## dc : object
The entire dc.js library is scoped under the **dc** name space. It does not introduce
anything else into the global name space.
Most `dc` functions are designed to allow function chaining, meaning they return the current chart
instance whenever it is appropriate. The getter forms of functions do not participate in function
chaining because they return values that are not the chart, although some,
such as [.svg](#dc.baseMixin+svg) and [.xAxis](#dc.coordinateGridMixin+xAxis),
return values that are themselves chainable d3 objects.
**Kind**: global namespace
**Version**: 2.0.0-beta.27
**Example**
```js
// Example chaining
chart.width(300)
.height(300)
.filter('sunday');
```
* [dc](#dc) : object
* [.pieChart](#dc.pieChart)
* [new pieChart(parent, [chartGroup])](#new_dc.pieChart_new)
* [.slicesCap([cap])](#dc.pieChart+slicesCap) ⇒ Number | [pieChart](#dc.pieChart)
* [.externalRadiusPadding([externalRadiusPadding])](#dc.pieChart+externalRadiusPadding) ⇒ Number | [pieChart](#dc.pieChart)
* [.innerRadius([innerRadius])](#dc.pieChart+innerRadius) ⇒ Number | [pieChart](#dc.pieChart)
* [.radius([radius])](#dc.pieChart+radius) ⇒ Number | [pieChart](#dc.pieChart)
* [.cx([cx])](#dc.pieChart+cx) ⇒ Number | [pieChart](#dc.pieChart)
* [.cy([cy])](#dc.pieChart+cy) ⇒ Number | [pieChart](#dc.pieChart)
* [.minAngleForLabel([minAngleForLabel])](#dc.pieChart+minAngleForLabel) ⇒ Number | [pieChart](#dc.pieChart)
* [.emptyTitle([title])](#dc.pieChart+emptyTitle) ⇒ String | [pieChart](#dc.pieChart)
* [.externalLabels([externalLabelRadius])](#dc.pieChart+externalLabels) ⇒ Number | [pieChart](#dc.pieChart)
* [.drawPaths([drawPaths])](#dc.pieChart+drawPaths) ⇒ Boolean | [pieChart](#dc.pieChart)
* [.barChart](#dc.barChart)
* [new barChart(parent, [chartGroup])](#new_dc.barChart_new)
* [.centerBar([centerBar])](#dc.barChart+centerBar) ⇒ Boolean | [barChart](#dc.barChart)
* [.barPadding([barPadding])](#dc.barChart+barPadding) ⇒ Number | [barChart](#dc.barChart)
* [.outerPadding([padding])](#dc.barChart+outerPadding) ⇒ Number | [barChart](#dc.barChart)
* [.gap([gap])](#dc.barChart+gap) ⇒ Number | [barChart](#dc.barChart)
* [.alwaysUseRounding([alwaysUseRounding])](#dc.barChart+alwaysUseRounding) ⇒ Boolean | [barChart](#dc.barChart)
* [.lineChart](#dc.lineChart)
* [new lineChart(parent, [chartGroup])](#new_dc.lineChart_new)
* [.interpolate([interpolate])](#dc.lineChart+interpolate) ⇒ String | [lineChart](#dc.lineChart)
* [.tension([tension])](#dc.lineChart+tension) ⇒ Number | [lineChart](#dc.lineChart)
* [.defined([defined])](#dc.lineChart+defined) ⇒ function | [lineChart](#dc.lineChart)
* [.dashStyle([dashStyle])](#dc.lineChart+dashStyle) ⇒ Array.<Number> | [lineChart](#dc.lineChart)
* [.renderArea([renderArea])](#dc.lineChart+renderArea) ⇒ Boolean | [lineChart](#dc.lineChart)
* [.xyTipsOn([xyTipsOn])](#dc.lineChart+xyTipsOn) ⇒ Boolean | [lineChart](#dc.lineChart)
* [.dotRadius([dotRadius])](#dc.lineChart+dotRadius) ⇒ Number | [lineChart](#dc.lineChart)
* [.renderDataPoints([options])](#dc.lineChart+renderDataPoints) ⇒ Object | [lineChart](#dc.lineChart)
* [.dataCount](#dc.dataCount)
* [new dataCount(parent, [chartGroup])](#new_dc.dataCount_new)
* [.html([options])](#dc.dataCount+html) ⇒ Object | [dataCount](#dc.dataCount)
* [.formatNumber([formatter])](#dc.dataCount+formatNumber) ⇒ function | [dataCount](#dc.dataCount)
* [.dataTable](#dc.dataTable)
* [new dataTable(parent, [chartGroup])](#new_dc.dataTable_new)
* [.size([size])](#dc.dataTable+size) ⇒ Number | [dataTable](#dc.dataTable)
* [.beginSlice([beginSlice])](#dc.dataTable+beginSlice) ⇒ Number | [dataTable](#dc.dataTable)
* [.endSlice([endSlice])](#dc.dataTable+endSlice) ⇒ Number | [dataTable](#dc.dataTable)
* [.columns([columns])](#dc.dataTable+columns) ⇒ Array.<function()> | [dataTable](#dc.dataTable)
* [.sortBy([sortBy])](#dc.dataTable+sortBy) ⇒ function | [dataTable](#dc.dataTable)
* [.order([order])](#dc.dataTable+order) ⇒ function | [dataTable](#dc.dataTable)
* [.showGroups([showGroups])](#dc.dataTable+showGroups) ⇒ Boolean | [dataTable](#dc.dataTable)
* [.dataGrid](#dc.dataGrid)
* [new dataGrid(parent, [chartGroup])](#new_dc.dataGrid_new)
* [.beginSlice([beginSlice])](#dc.dataGrid+beginSlice) ⇒ Number | [dataGrid](#dc.dataGrid)
* [.endSlice([endSlice])](#dc.dataGrid+endSlice) ⇒ Number | [dataGrid](#dc.dataGrid)
* [.size([size])](#dc.dataGrid+size) ⇒ Number | [dataGrid](#dc.dataGrid)
* [.html([html])](#dc.dataGrid+html) ⇒ function | [dataGrid](#dc.dataGrid)
* [.htmlGroup([htmlGroup])](#dc.dataGrid+htmlGroup) ⇒ function | [dataGrid](#dc.dataGrid)
* [.sortBy([sortByFunction])](#dc.dataGrid+sortBy) ⇒ function | [dataGrid](#dc.dataGrid)
* [.order([order])](#dc.dataGrid+order) ⇒ function | [dataGrid](#dc.dataGrid)
* [.bubbleChart](#dc.bubbleChart)
* [new bubbleChart(parent, [chartGroup])](#new_dc.bubbleChart_new)
* [.elasticRadius([elasticRadius])](#dc.bubbleChart+elasticRadius) ⇒ Boolean | [bubbleChart](#dc.bubbleChart)
* [.sortBubbleSize([sortBubbleSize])](#dc.bubbleChart+sortBubbleSize) ⇒ Boolean | [bubbleChart](#dc.bubbleChart)
* [.compositeChart](#dc.compositeChart)
* [new compositeChart(parent, [chartGroup])](#new_dc.compositeChart_new)
* [.useRightAxisGridLines([useRightAxisGridLines])](#dc.compositeChart+useRightAxisGridLines) ⇒ Boolean | [compositeChart](#dc.compositeChart)
* [.childOptions([childOptions])](#dc.compositeChart+childOptions) ⇒ Object | [compositeChart](#dc.compositeChart)
* [.rightYAxisLabel([rightYAxisLabel], [padding])](#dc.compositeChart+rightYAxisLabel) ⇒ String | [compositeChart](#dc.compositeChart)
* [.compose([subChartArray])](#dc.compositeChart+compose) ⇒ [compositeChart](#dc.compositeChart)
* [.children()](#dc.compositeChart+children) ⇒ [Array.<baseMixin>](#dc.baseMixin)
* [.shareColors([shareColors])](#dc.compositeChart+shareColors) ⇒ Boolean | [compositeChart](#dc.compositeChart)
* [.shareTitle([shareTitle])](#dc.compositeChart+shareTitle) ⇒ Boolean | [compositeChart](#dc.compositeChart)
* [.rightY([yScale])](#dc.compositeChart+rightY) ⇒ d3.scale | [compositeChart](#dc.compositeChart)
* [.alignYAxes([alignYAxes])](#dc.compositeChart+alignYAxes) ⇒ Chart
* [.rightYAxis([rightYAxis])](#dc.compositeChart+rightYAxis) ⇒ d3.svg.axis | [compositeChart](#dc.compositeChart)
* [.seriesChart](#dc.seriesChart)
* [new seriesChart(parent, [chartGroup])](#new_dc.seriesChart_new)
* [.chart([chartFunction])](#dc.seriesChart+chart) ⇒ function | [seriesChart](#dc.seriesChart)
* [.seriesAccessor([accessor])](#dc.seriesChart+seriesAccessor) ⇒ function | [seriesChart](#dc.seriesChart)
* [.seriesSort([sortFunction])](#dc.seriesChart+seriesSort) ⇒ function | [seriesChart](#dc.seriesChart)
* [.valueSort([sortFunction])](#dc.seriesChart+valueSort) ⇒ function | [seriesChart](#dc.seriesChart)
* [.geoChoroplethChart](#dc.geoChoroplethChart)
* [new geoChoroplethChart(parent, [chartGroup])](#new_dc.geoChoroplethChart_new)
* [.overlayGeoJson(json, name, keyAccessor)](#dc.geoChoroplethChart+overlayGeoJson) ⇒ [geoChoroplethChart](#dc.geoChoroplethChart)
* [.projection([projection])](#dc.geoChoroplethChart+projection) ⇒ [geoChoroplethChart](#dc.geoChoroplethChart)
* [.geoJsons()](#dc.geoChoroplethChart+geoJsons) ⇒ Array.<{name:String, data: Object, accessor: function()}>
* [.geoPath()](#dc.geoChoroplethChart+geoPath) ⇒ d3.geo.path
* [.removeGeoJson(name)](#dc.geoChoroplethChart+removeGeoJson) ⇒ [geoChoroplethChart](#dc.geoChoroplethChart)
* [.bubbleOverlay](#dc.bubbleOverlay)
* [new bubbleOverlay(parent, [chartGroup])](#new_dc.bubbleOverlay_new)
* [.svg([imageElement])](#dc.bubbleOverlay+svg) ⇒ [bubbleOverlay](#dc.bubbleOverlay)
* [.point(name, x, y)](#dc.bubbleOverlay+point) ⇒ [bubbleOverlay](#dc.bubbleOverlay)
* [.rowChart](#dc.rowChart)
* [new rowChart(parent, [chartGroup])](#new_dc.rowChart_new)
* [.x([scale])](#dc.rowChart+x) ⇒ d3.scale | [rowChart](#dc.rowChart)
* [.renderTitleLabel([renderTitleLabel])](#dc.rowChart+renderTitleLabel) ⇒ Boolean | [rowChart](#dc.rowChart)
* [.xAxis()](#dc.rowChart+xAxis) ⇒ d3.svg.axis
* [.fixedBarHeight([fixedBarHeight])](#dc.rowChart+fixedBarHeight) ⇒ Boolean | Number | [rowChart](#dc.rowChart)
* [.gap([gap])](#dc.rowChart+gap) ⇒ Number | [rowChart](#dc.rowChart)
* [.elasticX([elasticX])](#dc.rowChart+elasticX) ⇒ Boolean | [rowChart](#dc.rowChart)
* [.labelOffsetX([labelOffsetX])](#dc.rowChart+labelOffsetX) ⇒ Number | [rowChart](#dc.rowChart)
* [.labelOffsetY([labelOffsety])](#dc.rowChart+labelOffsetY) ⇒ Number | [rowChart](#dc.rowChart)
* [.titleLabelOffsetX([titleLabelOffsetX])](#dc.rowChart+titleLabelOffsetX) ⇒ Number | [rowChart](#dc.rowChart)
* [.legend](#dc.legend)
* [new legend()](#new_dc.legend_new)
* [.x([x])](#dc.legend+x) ⇒ Number | [legend](#dc.legend)
* [.y([y])](#dc.legend+y) ⇒ Number | [legend](#dc.legend)
* [.gap([gap])](#dc.legend+gap) ⇒ Number | [legend](#dc.legend)
* [.itemHeight([itemHeight])](#dc.legend+itemHeight) ⇒ Number | [legend](#dc.legend)
* [.horizontal([horizontal])](#dc.legend+horizontal) ⇒ Boolean | [legend](#dc.legend)
* [.legendWidth([legendWidth])](#dc.legend+legendWidth) ⇒ Number | [legend](#dc.legend)
* [.itemWidth([itemWidth])](#dc.legend+itemWidth) ⇒ Number | [legend](#dc.legend)
* [.autoItemWidth([autoItemWidth])](#dc.legend+autoItemWidth) ⇒ Boolean | [legend](#dc.legend)
* [.scatterPlot](#dc.scatterPlot)
* [new scatterPlot(parent, [chartGroup])](#new_dc.scatterPlot_new)
* [.existenceAccessor([accessor])](#dc.scatterPlot+existenceAccessor) ⇒ function | [scatterPlot](#dc.scatterPlot)
* [.symbol([type])](#dc.scatterPlot+symbol) ⇒ String | function | [scatterPlot](#dc.scatterPlot)
* [.symbolSize([symbolSize])](#dc.scatterPlot+symbolSize) ⇒ Number | [scatterPlot](#dc.scatterPlot)
* [.highlightedSize([highlightedSize])](#dc.scatterPlot+highlightedSize) ⇒ Number | [scatterPlot](#dc.scatterPlot)
* [.excludedSize([excludedSize])](#dc.scatterPlot+excludedSize) ⇒ Number | [scatterPlot](#dc.scatterPlot)
* [.excludedColor([excludedColor])](#dc.scatterPlot+excludedColor) ⇒ Number | [scatterPlot](#dc.scatterPlot)
* [.excludedOpacity([excludedOpacity])](#dc.scatterPlot+excludedOpacity) ⇒ Number | [scatterPlot](#dc.scatterPlot)
* [.emptySize([emptySize])](#dc.scatterPlot+emptySize) ⇒ Number | [scatterPlot](#dc.scatterPlot)
* [.numberDisplay](#dc.numberDisplay)
* [new numberDisplay(parent, [chartGroup])](#new_dc.numberDisplay_new)
* [.html([html])](#dc.numberDisplay+html) ⇒ Object | [numberDisplay](#dc.numberDisplay)
* [.value()](#dc.numberDisplay+value) ⇒ Number
* [.formatNumber([formatter])](#dc.numberDisplay+formatNumber) ⇒ function | [numberDisplay](#dc.numberDisplay)
* [.heatMap](#dc.heatMap)
* [new heatMap(parent, [chartGroup])](#new_dc.heatMap_new)
* [.colsLabel([labelFunction])](#dc.heatMap+colsLabel) ⇒ function | [heatMap](#dc.heatMap)
* [.rowsLabel([labelFunction])](#dc.heatMap+rowsLabel) ⇒ function | [heatMap](#dc.heatMap)
* [.rows([rows])](#dc.heatMap+rows) ⇒ Array.<(String\|Number)> | [heatMap](#dc.heatMap)
* [.cols([cols])](#dc.heatMap+cols) ⇒ Array.<(String\|Number)> | [heatMap](#dc.heatMap)
* [.boxOnClick([handler])](#dc.heatMap+boxOnClick) ⇒ function | [heatMap](#dc.heatMap)
* [.xAxisOnClick([handler])](#dc.heatMap+xAxisOnClick) ⇒ function | [heatMap](#dc.heatMap)
* [.yAxisOnClick([handler])](#dc.heatMap+yAxisOnClick) ⇒ function | [heatMap](#dc.heatMap)
* [.xBorderRadius([xBorderRadius])](#dc.heatMap+xBorderRadius) ⇒ Number | [heatMap](#dc.heatMap)
* [.yBorderRadius([yBorderRadius])](#dc.heatMap+yBorderRadius) ⇒ Number | [heatMap](#dc.heatMap)
* [.boxPlot](#dc.boxPlot)
* [new boxPlot(parent, [chartGroup])](#new_dc.boxPlot_new)
* [.boxPadding([padding])](#dc.boxPlot+boxPadding) ⇒ Number | [boxPlot](#dc.boxPlot)
* [.outerPadding([padding])](#dc.boxPlot+outerPadding) ⇒ Number | [boxPlot](#dc.boxPlot)
* [.boxWidth([boxWidth])](#dc.boxPlot+boxWidth) ⇒ Number | function | [boxPlot](#dc.boxPlot)
* [.tickFormat([tickFormat])](#dc.boxPlot+tickFormat) ⇒ Number | function | [boxPlot](#dc.boxPlot)
* [.baseMixin](#dc.baseMixin) ⇒ [baseMixin](#dc.baseMixin)
* [.height([height])](#dc.baseMixin+height) ⇒ Number | [baseMixin](#dc.baseMixin)
* [.width([width])](#dc.baseMixin+width) ⇒ Number | [baseMixin](#dc.baseMixin)
* [.minWidth([minWidth])](#dc.baseMixin+minWidth) ⇒ Number | [baseMixin](#dc.baseMixin)
* [.minHeight([minHeight])](#dc.baseMixin+minHeight) ⇒ Number | [baseMixin](#dc.baseMixin)
* [.dimension([dimension])](#dc.baseMixin+dimension) ⇒ crossfilter.dimension | [baseMixin](#dc.baseMixin)
* [.data([callback])](#dc.baseMixin+data) ⇒ \* | [baseMixin](#dc.baseMixin)
* [.group([group], [name])](#dc.baseMixin+group) ⇒ crossfilter.group | [baseMixin](#dc.baseMixin)
* [.ordering([orderFunction])](#dc.baseMixin+ordering) ⇒ function | [baseMixin](#dc.baseMixin)
* [.filterAll()](#dc.baseMixin+filterAll) ⇒ [baseMixin](#dc.baseMixin)
* [.select()](#dc.baseMixin+select) ⇒ d3.selection
* [.selectAll()](#dc.baseMixin+selectAll) ⇒ d3.selection
* [.anchor([parent], [chartGroup])](#dc.baseMixin+anchor) ⇒ String | node | d3.selection | [baseMixin](#dc.baseMixin)
* [.anchorName()](#dc.baseMixin+anchorName) ⇒ String
* [.root([rootElement])](#dc.baseMixin+root) ⇒ HTMLElement | [baseMixin](#dc.baseMixin)
* [.svg([svgElement])](#dc.baseMixin+svg) ⇒ SVGElement | d3.selection | [baseMixin](#dc.baseMixin)
* [.resetSvg()](#dc.baseMixin+resetSvg) ⇒ SVGElement
* [.filterPrinter([filterPrinterFunction])](#dc.baseMixin+filterPrinter) ⇒ function | [baseMixin](#dc.baseMixin)
* [.controlsUseVisibility([controlsUseVisibility])](#dc.baseMixin+controlsUseVisibility) ⇒ Boolean | [baseMixin](#dc.baseMixin)
* [.turnOnControls()](#dc.baseMixin+turnOnControls) ⇒ [baseMixin](#dc.baseMixin)
* [.turnOffControls()](#dc.baseMixin+turnOffControls) ⇒ [baseMixin](#dc.baseMixin)
* [.transitionDuration([duration])](#dc.baseMixin+transitionDuration) ⇒ Number | [baseMixin](#dc.baseMixin)
* [.render()](#dc.baseMixin+render) ⇒ [baseMixin](#dc.baseMixin)
* [.redraw()](#dc.baseMixin+redraw) ⇒ [baseMixin](#dc.baseMixin)
* [.commitHandler()](#dc.baseMixin+commitHandler) ⇒ [baseMixin](#dc.baseMixin)
* [.redrawGroup()](#dc.baseMixin+redrawGroup) ⇒ [baseMixin](#dc.baseMixin)
* [.renderGroup()](#dc.baseMixin+renderGroup) ⇒ [baseMixin](#dc.baseMixin)
* [.hasFilterHandler([hasFilterHandler])](#dc.baseMixin+hasFilterHandler) ⇒ function | [baseMixin](#dc.baseMixin)
* [.hasFilter([filter])](#dc.baseMixin+hasFilter) ⇒ Boolean
* [.removeFilterHandler([removeFilterHandler])](#dc.baseMixin+removeFilterHandler) ⇒ function | [baseMixin](#dc.baseMixin)
* [.addFilterHandler([addFilterHandler])](#dc.baseMixin+addFilterHandler) ⇒ function | [baseMixin](#dc.baseMixin)
* [.resetFilterHandler([resetFilterHandler])](#dc.baseMixin+resetFilterHandler) ⇒ [baseMixin](#dc.baseMixin)
* [.filter([filter])](#dc.baseMixin+filter) ⇒ [baseMixin](#dc.baseMixin)
* [.filters()](#dc.baseMixin+filters) ⇒ Array.<\*>
* [.onClick(datum)](#dc.baseMixin+onClick)
* [.filterHandler([filterHandler])](#dc.baseMixin+filterHandler) ⇒ function | [baseMixin](#dc.baseMixin)
* [.keyAccessor([keyAccessor])](#dc.baseMixin+keyAccessor) ⇒ function | [baseMixin](#dc.baseMixin)
* [.valueAccessor([valueAccessor])](#dc.baseMixin+valueAccessor) ⇒ function | [baseMixin](#dc.baseMixin)
* [.label([labelFunction], [enableLabels])](#dc.baseMixin+label) ⇒ function | [baseMixin](#dc.baseMixin)
* [.renderLabel([renderLabel])](#dc.baseMixin+renderLabel) ⇒ Boolean | [baseMixin](#dc.baseMixin)
* [.title([titleFunction])](#dc.baseMixin+title) ⇒ function | [baseMixin](#dc.baseMixin)
* [.renderTitle([renderTitle])](#dc.baseMixin+renderTitle) ⇒ Boolean | [baseMixin](#dc.baseMixin)
* ~~[.renderlet(renderletFunction)](#dc.baseMixin+renderlet) ⇒ [baseMixin](#dc.baseMixin)~~
* [.chartGroup([chartGroup])](#dc.baseMixin+chartGroup) ⇒ String | [baseMixin](#dc.baseMixin)
* [.expireCache()](#dc.baseMixin+expireCache) ⇒ [baseMixin](#dc.baseMixin)
* [.legend([legend])](#dc.baseMixin+legend) ⇒ [legend](#dc.legend) | [baseMixin](#dc.baseMixin)
* [.chartID()](#dc.baseMixin+chartID) ⇒ String
* [.options(opts)](#dc.baseMixin+options) ⇒ [baseMixin](#dc.baseMixin)
* [.on(event, listener)](#dc.baseMixin+on) ⇒ [baseMixin](#dc.baseMixin)
* [.marginMixin](#dc.marginMixin) ⇒ [marginMixin](#dc.marginMixin)
* [.margins([margins])](#dc.marginMixin+margins) ⇒ Object | [marginMixin](#dc.marginMixin)
* [.colorMixin](#dc.colorMixin) ⇒ [colorMixin](#dc.colorMixin)
* [.colors([colorScale])](#dc.colorMixin+colors) ⇒ d3.scale | [colorMixin](#dc.colorMixin)
* [.ordinalColors(r)](#dc.colorMixin+ordinalColors) ⇒ [colorMixin](#dc.colorMixin)
* [.linearColors(r)](#dc.colorMixin+linearColors) ⇒ [colorMixin](#dc.colorMixin)
* [.colorAccessor([colorAccessor])](#dc.colorMixin+colorAccessor) ⇒ function | [colorMixin](#dc.colorMixin)
* [.colorDomain([domain])](#dc.colorMixin+colorDomain) ⇒ Array.<String> | [colorMixin](#dc.colorMixin)
* [.calculateColorDomain()](#dc.colorMixin+calculateColorDomain) ⇒ [colorMixin](#dc.colorMixin)
* [.getColor(d, [i])](#dc.colorMixin+getColor) ⇒ String
* [.colorCalculator([colorCalculator])](#dc.colorMixin+colorCalculator) ⇒ \*
* [.coordinateGridMixin](#dc.coordinateGridMixin) ⇒ [coordinateGridMixin](#dc.coordinateGridMixin)
* [.rescale()](#dc.coordinateGridMixin+rescale) ⇒ [coordinateGridMixin](#dc.coordinateGridMixin)
* [.rangeChart([rangeChart])](#dc.coordinateGridMixin+rangeChart) ⇒ [coordinateGridMixin](#dc.coordinateGridMixin)
* [.zoomScale([extent])](#dc.coordinateGridMixin+zoomScale) ⇒ Array.<(Number\|Date)> | [coordinateGridMixin](#dc.coordinateGridMixin)
* [.zoomOutRestrict([zoomOutRestrict])](#dc.coordinateGridMixin+zoomOutRestrict) ⇒ Boolean | [coordinateGridMixin](#dc.coordinateGridMixin)
* [.g([gElement])](#dc.coordinateGridMixin+g) ⇒ SVGElement | [coordinateGridMixin](#dc.coordinateGridMixin)
* [.mouseZoomable([mouseZoomable])](#dc.coordinateGridMixin+mouseZoomable) ⇒ Boolean | [coordinateGridMixin](#dc.coordinateGridMixin)
* [.chartBodyG([chartBodyG])](#dc.coordinateGridMixin+chartBodyG) ⇒ SVGElement
* [.x([xScale])](#dc.coordinateGridMixin+x) ⇒ d3.scale | [coordinateGridMixin](#dc.coordinateGridMixin)
* [.xUnits([xUnits])](#dc.coordinateGridMixin+xUnits) ⇒ function | [coordinateGridMixin](#dc.coordinateGridMixin)
* [.xAxis([xAxis])](#dc.coordinateGridMixin+xAxis) ⇒ d3.svg.axis | [coordinateGridMixin](#dc.coordinateGridMixin)
* [.elasticX([elasticX])](#dc.coordinateGridMixin+elasticX) ⇒ Boolean | [coordinateGridMixin](#dc.coordinateGridMixin)
* [.xAxisPadding([padding])](#dc.coordinateGridMixin+xAxisPadding) ⇒ Number | String | [coordinateGridMixin](#dc.coordinateGridMixin)
* [.xUnitCount()](#dc.coordinateGridMixin+xUnitCount) ⇒ Number
* [.useRightYAxis([useRightYAxis])](#dc.coordinateGridMixin+useRightYAxis) ⇒ Boolean | [coordinateGridMixin](#dc.coordinateGridMixin)
* [.isOrdinal()](#dc.coordinateGridMixin+isOrdinal) ⇒ Boolean
* [.xAxisLabel([labelText], [padding])](#dc.coordinateGridMixin+xAxisLabel) ⇒ String
* [.yAxisLabel([labelText], [padding])](#dc.coordinateGridMixin+yAxisLabel) ⇒ String | [coordinateGridMixin](#dc.coordinateGridMixin)
* [.y([yScale])](#dc.coordinateGridMixin+y) ⇒ d3.scale | [coordinateGridMixin](#dc.coordinateGridMixin)
* [.yAxis([yAxis])](#dc.coordinateGridMixin+yAxis) ⇒ d3.svg.axis | [coordinateGridMixin](#dc.coordinateGridMixin)
* [.elasticY([elasticY])](#dc.coordinateGridMixin+elasticY) ⇒ Boolean | [coordinateGridMixin](#dc.coordinateGridMixin)
* [.renderHorizontalGridLines([renderHorizontalGridLines])](#dc.coordinateGridMixin+renderHorizontalGridLines) ⇒ Boolean | [coordinateGridMixin](#dc.coordinateGridMixin)
* [.renderVerticalGridLines([renderVerticalGridLines])](#dc.coordinateGridMixin+renderVerticalGridLines) ⇒ Boolean | [coordinateGridMixin](#dc.coordinateGridMixin)
* [.xAxisMin()](#dc.coordinateGridMixin+xAxisMin) ⇒ \*
* [.xAxisMax()](#dc.coordinateGridMixin+xAxisMax) ⇒ \*
* [.yAxisMin()](#dc.coordinateGridMixin+yAxisMin) ⇒ \*
* [.yAxisMax()](#dc.coordinateGridMixin+yAxisMax) ⇒ \*
* [.yAxisPadding([padding])](#dc.coordinateGridMixin+yAxisPadding) ⇒ Number | [coordinateGridMixin](#dc.coordinateGridMixin)
* [.round([round])](#dc.coordinateGridMixin+round) ⇒ function | [coordinateGridMixin](#dc.coordinateGridMixin)
* [.clipPadding([padding])](#dc.coordinateGridMixin+clipPadding) ⇒ Number | [coordinateGridMixin](#dc.coordinateGridMixin)
* [.focus([range])](#dc.coordinateGridMixin+focus)
* [.brushOn([brushOn])](#dc.coordinateGridMixin+brushOn) ⇒ Boolean | [coordinateGridMixin](#dc.coordinateGridMixin)
* [.stackMixin](#dc.stackMixin) ⇒ [stackMixin](#dc.stackMixin)
* [.stack(group, [name], [accessor])](#dc.stackMixin+stack) ⇒ Array.<{group: crossfilter.group, name: String, accessor: function()}> | [stackMixin](#dc.stackMixin)
* [.hidableStacks([hidableStacks])](#dc.stackMixin+hidableStacks) ⇒ Boolean | [stackMixin](#dc.stackMixin)
* [.hideStack(stackName)](#dc.stackMixin+hideStack) ⇒ [stackMixin](#dc.stackMixin)
* [.showStack(stackName)](#dc.stackMixin+showStack) ⇒ [stackMixin](#dc.stackMixin)
* [.title([stackName], [titleAccessor])](#dc.stackMixin+title) ⇒ String | [stackMixin](#dc.stackMixin)
* [.stackLayout([stack])](#dc.stackMixin+stackLayout) ⇒ function | [stackMixin](#dc.stackMixin)
* [.capMixin](#dc.capMixin) ⇒ [capMixin](#dc.capMixin)
* [.cap([count])](#dc.capMixin+cap) ⇒ Number | [capMixin](#dc.capMixin)
* [.othersLabel([label])](#dc.capMixin+othersLabel) ⇒ String | [capMixin](#dc.capMixin)
* [.othersGrouper([grouperFunction])](#dc.capMixin+othersGrouper) ⇒ function | [capMixin](#dc.capMixin)
* [.bubbleMixin](#dc.bubbleMixin) ⇒ [bubbleMixin](#dc.bubbleMixin)
* [.r([bubbleRadiusScale])](#dc.bubbleMixin+r) ⇒ d3.scale | [bubbleMixin](#dc.bubbleMixin)
* [.radiusValueAccessor([radiusValueAccessor])](#dc.bubbleMixin+radiusValueAccessor) ⇒ function | [bubbleMixin](#dc.bubbleMixin)
* [.minRadius([radius])](#dc.bubbleMixin+minRadius) ⇒ Number | [bubbleMixin](#dc.bubbleMixin)
* [.minRadiusWithLabel([radius])](#dc.bubbleMixin+minRadiusWithLabel) ⇒ Number | [bubbleMixin](#dc.bubbleMixin)
* [.maxBubbleRelativeSize([relativeSize])](#dc.bubbleMixin+maxBubbleRelativeSize) ⇒ Number | [bubbleMixin](#dc.bubbleMixin)
* [.dateFormat](#dc.dateFormat) : function
* [.chartRegistry](#dc.chartRegistry) : object
* [.has(chart)](#dc.chartRegistry.has) ⇒ Boolean
* [.register(chart, [group])](#dc.chartRegistry.register)
* [.deregister(chart, [group])](#dc.chartRegistry.deregister)
* [.clear(group)](#dc.chartRegistry.clear)
* [.list([group])](#dc.chartRegistry.list) ⇒ Array.<Object>
* [.units](#dc.units) : object
* [.fp](#dc.units.fp) : object
* [.precision(precision)](#dc.units.fp.precision) ⇒ function
* [.integers(start, end)](#dc.units.integers) ⇒ Number
* [.ordinal(start, end, domain)](#dc.units.ordinal) ⇒ Array.<String>
* [.printers](#dc.printers) : object
* [.filters(filters)](#dc.printers.filters) ⇒ String
* [.filter(filter)](#dc.printers.filter) ⇒ String
* [.utils](#dc.utils) : object
* [.printSingleValue(filter)](#dc.utils.printSingleValue) ⇒ String
* [.add(l, r)](#dc.utils.add) ⇒ String | Date | Number
* [.subtract(l, r)](#dc.utils.subtract) ⇒ String | Date | Number
* [.isNumber(n)](#dc.utils.isNumber) ⇒ Boolean
* [.isFloat(n)](#dc.utils.isFloat) ⇒ Boolean
* [.isInteger(n)](#dc.utils.isInteger) ⇒ Boolean
* [.isNegligible(n)](#dc.utils.isNegligible) ⇒ Boolean
* [.clamp(val, min, max)](#dc.utils.clamp) ⇒ any
* [.uniqueId()](#dc.utils.uniqueId) ⇒ Number
* [.nameToId(name)](#dc.utils.nameToId) ⇒ String
* [.appendOrSelect(parent, selector, tag)](#dc.utils.appendOrSelect) ⇒ d3.selection
* [.safeNumber(n)](#dc.utils.safeNumber) ⇒ Number
* [.filters](#dc.filters) : object
* [.RangedFilter](#dc.filters.RangedFilter)
* [new RangedFilter(low, high)](#new_dc.filters.RangedFilter_new)
* [.TwoDimensionalFilter](#dc.filters.TwoDimensionalFilter)
* [new TwoDimensionalFilter(filter)](#new_dc.filters.TwoDimensionalFilter_new)
* [.RangedTwoDimensionalFilter](#dc.filters.RangedTwoDimensionalFilter)
* [new RangedTwoDimensionalFilter(filter)](#new_dc.filters.RangedTwoDimensionalFilter_new)
* [.registerChart(chart, [group])](#dc.registerChart)
* [.deregisterChart(chart, [group])](#dc.deregisterChart)
* [.hasChart(chart)](#dc.hasChart) ⇒ Boolean
* [.deregisterAllCharts(group)](#dc.deregisterAllCharts)
* [.filterAll([group])](#dc.filterAll)
* [.refocusAll([group])](#dc.refocusAll)
* [.renderAll([group])](#dc.renderAll)
* [.redrawAll([group])](#dc.redrawAll)
* [.disableTransitions()](#dc.disableTransitions) ⇒ Boolean
* [.pluck(n, [f])](#dc.pluck) ⇒ function
### dc.pieChart
**Kind**: static class of [dc](#dc)
**Mixes**: [capMixin](#dc.capMixin), [colorMixin](#dc.colorMixin), [baseMixin](#dc.baseMixin)
* [.pieChart](#dc.pieChart)
* [new pieChart(parent, [chartGroup])](#new_dc.pieChart_new)
* [.slicesCap([cap])](#dc.pieChart+slicesCap) ⇒ Number | [pieChart](#dc.pieChart)
* [.externalRadiusPadding([externalRadiusPadding])](#dc.pieChart+externalRadiusPadding) ⇒ Number | [pieChart](#dc.pieChart)
* [.innerRadius([innerRadius])](#dc.pieChart+innerRadius) ⇒ Number | [pieChart](#dc.pieChart)
* [.radius([radius])](#dc.pieChart+radius) ⇒ Number | [pieChart](#dc.pieChart)
* [.cx([cx])](#dc.pieChart+cx) ⇒ Number | [pieChart](#dc.pieChart)
* [.cy([cy])](#dc.pieChart+cy) ⇒ Number | [pieChart](#dc.pieChart)
* [.minAngleForLabel([minAngleForLabel])](#dc.pieChart+minAngleForLabel) ⇒ Number | [pieChart](#dc.pieChart)
* [.emptyTitle([title])](#dc.pieChart+emptyTitle) ⇒ String | [pieChart](#dc.pieChart)
* [.externalLabels([externalLabelRadius])](#dc.pieChart+externalLabels) ⇒ Number | [pieChart](#dc.pieChart)
* [.drawPaths([drawPaths])](#dc.pieChart+drawPaths) ⇒ Boolean | [pieChart](#dc.pieChart)
#### new pieChart(parent, [chartGroup])
The pie chart implementation is usually used to visualize a small categorical distribution. The pie
chart uses keyAccessor to determine the slices, and valueAccessor to calculate the size of each
slice relative to the sum of all values. Slices are ordered by [ordering](#dc.baseMixin+ordering)
which defaults to sorting by key.
Examples:
- [Nasdaq 100 Index](http://dc-js.github.com/dc.js/)
| Param | Type | Description |
| --- | --- | --- |
| parent | String | node | d3.selection | Any valid [d3 single selector](https://github.com/mbostock/d3/wiki/Selections#selecting-elements) specifying a dom block element such as a div; or a dom element or d3 selection. |
| [chartGroup] | String | The name of the chart group this chart instance should be placed in. Interaction with a chart will only trigger events and redraws within the chart's group. |
**Example**
```js
// create a pie chart under #chart-container1 element using the default global chart group
var chart1 = dc.pieChart('#chart-container1');
// create a pie chart under #chart-container2 element using chart group A
var chart2 = dc.pieChart('#chart-container2', 'chartGroupA');
```
#### pieChart.slicesCap([cap]) ⇒ Number | [pieChart](#dc.pieChart)
Get or set the maximum number of slices the pie chart will generate. The top slices are determined by
value from high to low. Other slices exeeding the cap will be rolled up into one single *Others* slice.
**Kind**: instance method of [pieChart](#dc.pieChart)
| Param | Type |
| --- | --- |
| [cap] | Number |
#### pieChart.externalRadiusPadding([externalRadiusPadding]) ⇒ Number | [pieChart](#dc.pieChart)
Get or set the external radius padding of the pie chart. This will force the radius of the
pie chart to become smaller or larger depending on the value.
**Kind**: instance method of [pieChart](#dc.pieChart)
| Param | Type | Default |
| --- | --- | --- |
| [externalRadiusPadding] | Number | 0 |
#### pieChart.innerRadius([innerRadius]) ⇒ Number | [pieChart](#dc.pieChart)
Get or set the inner radius of the pie chart. If the inner radius is greater than 0px then the
pie chart will be rendered as a doughnut chart.
**Kind**: instance method of [pieChart](#dc.pieChart)
| Param | Type | Default |
| --- | --- | --- |
| [innerRadius] | Number | 0 |
#### pieChart.radius([radius]) ⇒ Number | [pieChart](#dc.pieChart)
Get or set the outer radius. If the radius is not set, it will be half of the minimum of the
chart width and height.
**Kind**: instance method of [pieChart](#dc.pieChart)
| Param | Type |
| --- | --- |
| [radius] | Number |
#### pieChart.cx([cx]) ⇒ Number | [pieChart](#dc.pieChart)
Get or set center x coordinate position. Default is center of svg.
**Kind**: instance method of [pieChart](#dc.pieChart)
| Param | Type |
| --- | --- |
| [cx] | Number |
#### pieChart.cy([cy]) ⇒ Number | [pieChart](#dc.pieChart)
Get or set center y coordinate position. Default is center of svg.
**Kind**: instance method of [pieChart](#dc.pieChart)
| Param | Type |
| --- | --- |
| [cy] | Number |
#### pieChart.minAngleForLabel([minAngleForLabel]) ⇒ Number | [pieChart](#dc.pieChart)
Get or set the minimal slice angle for label rendering. Any slice with a smaller angle will not
display a slice label.
**Kind**: instance method of [pieChart](#dc.pieChart)
| Param | Type | Default |
| --- | --- | --- |
| [minAngleForLabel] | Number | 0.5 |
#### pieChart.emptyTitle([title]) ⇒ String | [pieChart](#dc.pieChart)
Title to use for the only slice when there is no data.
**Kind**: instance method of [pieChart](#dc.pieChart)
| Param | Type |
| --- | --- |
| [title] | String |
#### pieChart.externalLabels([externalLabelRadius]) ⇒ Number | [pieChart](#dc.pieChart)
Position slice labels offset from the outer edge of the chart
The given argument sets the radial offset.
**Kind**: instance method of [pieChart](#dc.pieChart)
| Param | Type |
| --- | --- |
| [externalLabelRadius] | Number |
#### pieChart.drawPaths([drawPaths]) ⇒ Boolean | [pieChart](#dc.pieChart)
Get or set whether to draw lines from pie slices to their labels.
**Kind**: instance method of [pieChart](#dc.pieChart)
| Param | Type |
| --- | --- |
| [drawPaths] | Boolean |
### dc.barChart
**Kind**: static class of [dc](#dc)
**Mixes**: [stackMixin](#dc.stackMixin), [coordinateGridMixin](#dc.coordinateGridMixin)
* [.barChart](#dc.barChart)
* [new barChart(parent, [chartGroup])](#new_dc.barChart_new)
* [.centerBar([centerBar])](#dc.barChart+centerBar) ⇒ Boolean | [barChart](#dc.barChart)
* [.barPadding([barPadding])](#dc.barChart+barPadding) ⇒ Number | [barChart](#dc.barChart)
* [.outerPadding([padding])](#dc.barChart+outerPadding) ⇒ Number | [barChart](#dc.barChart)
* [.gap([gap])](#dc.barChart+gap) ⇒ Number | [barChart](#dc.barChart)
* [.alwaysUseRounding([alwaysUseRounding])](#dc.barChart+alwaysUseRounding) ⇒ Boolean | [barChart](#dc.barChart)
#### new barChart(parent, [chartGroup])
Concrete bar chart/histogram implementation.
Examples:
- [Nasdaq 100 Index](http://dc-js.github.com/dc.js/)
- [Canadian City Crime Stats](http://dc-js.github.com/dc.js/crime/index.html)
| Param | Type | Description |
| --- | --- | --- |
| parent | String | node | d3.selection | [compositeChart](#dc.compositeChart) | Any valid [d3 single selector](https://github.com/mbostock/d3/wiki/Selections#selecting-elements) specifying a dom block element such as a div; or a dom element or d3 selection. If the bar chart is a sub-chart in a [Composite Chart](#dc.compositeChart) then pass in the parent composite chart instance instead. |
| [chartGroup] | String | The name of the chart group this chart instance should be placed in. Interaction with a chart will only trigger events and redraws within the chart's group. |
**Example**
```js
// create a bar chart under #chart-container1 element using the default global chart group
var chart1 = dc.barChart('#chart-container1');
// create a bar chart under #chart-container2 element using chart group A
var chart2 = dc.barChart('#chart-container2', 'chartGroupA');
// create a sub-chart under a composite parent chart
var chart3 = dc.barChart(compositeChart);
```
#### barChart.centerBar([centerBar]) ⇒ Boolean | [barChart](#dc.barChart)
Whether the bar chart will render each bar centered around the data position on the x-axis.
**Kind**: instance method of [barChart](#dc.barChart)
| Param | Type | Default |
| --- | --- | --- |
| [centerBar] | Boolean | false |
#### barChart.barPadding([barPadding]) ⇒ Number | [barChart](#dc.barChart)
Get or set the spacing between bars as a fraction of bar size. Valid values are between 0-1.
Setting this value will also remove any previously set [gap](#dc.barChart+gap). See the
[d3 docs](https://github.com/mbostock/d3/wiki/Ordinal-Scales#wiki-ordinal_rangeBands)
for a visual description of how the padding is applied.
**Kind**: instance method of [barChart](#dc.barChart)
| Param | Type | Default |
| --- | --- | --- |
| [barPadding] | Number | 0 |
#### barChart.outerPadding([padding]) ⇒ Number | [barChart](#dc.barChart)
Get or set the outer padding on an ordinal bar chart. This setting has no effect on non-ordinal charts.
Will pad the width by `padding * barWidth` on each side of the chart.
**Kind**: instance method of [barChart](#dc.barChart)
| Param | Type | Default |
| --- | --- | --- |
| [padding] | Number | 0.5 |
#### barChart.gap([gap]) ⇒ Number | [barChart](#dc.barChart)
Manually set fixed gap (in px) between bars instead of relying on the default auto-generated
gap. By default the bar chart implementation will calculate and set the gap automatically
based on the number of data points and the length of the x axis.
**Kind**: instance method of [barChart](#dc.barChart)
| Param | Type | Default |
| --- | --- | --- |
| [gap] | Number | 2 |
#### barChart.alwaysUseRounding([alwaysUseRounding]) ⇒ Boolean | [barChart](#dc.barChart)
Set or get whether rounding is enabled when bars are centered. If false, using
rounding with centered bars will result in a warning and rounding will be ignored. This flag
has no effect if bars are not [centered](#dc.barChart+centerBar).
When using standard d3.js rounding methods, the brush often doesn't align correctly with
centered bars since the bars are offset. The rounding function must add an offset to
compensate, such as in the following example.
**Kind**: instance method of [barChart](#dc.barChart)
| Param | Type | Default |
| --- | --- | --- |
| [alwaysUseRounding] | Boolean | false |
**Example**
```js
chart.round(function(n) { return Math.floor(n) + 0.5; });
```
### dc.lineChart
**Kind**: static class of [dc](#dc)
**Mixes**: [stackMixin](#dc.stackMixin), [coordinateGridMixin](#dc.coordinateGridMixin)
* [.lineChart](#dc.lineChart)
* [new lineChart(parent, [chartGroup])](#new_dc.lineChart_new)
* [.interpolate([interpolate])](#dc.lineChart+interpolate) ⇒ String | [lineChart](#dc.lineChart)
* [.tension([tension])](#dc.lineChart+tension) ⇒ Number | [lineChart](#dc.lineChart)
* [.defined([defined])](#dc.lineChart+defined) ⇒ function | [lineChart](#dc.lineChart)
* [.dashStyle([dashStyle])](#dc.lineChart+dashStyle) ⇒ Array.<Number> | [lineChart](#dc.lineChart)
* [.renderArea([renderArea])](#dc.lineChart+renderArea) ⇒ Boolean | [lineChart](#dc.lineChart)
* [.xyTipsOn([xyTipsOn])](#dc.lineChart+xyTipsOn) ⇒ Boolean | [lineChart](#dc.lineChart)
* [.dotRadius([dotRadius])](#dc.lineChart+dotRadius) ⇒ Number | [lineChart](#dc.lineChart)
* [.renderDataPoints([options])](#dc.lineChart+renderDataPoints) ⇒ Object | [lineChart](#dc.lineChart)
#### new lineChart(parent, [chartGroup])
Concrete line/area chart implementation.
Examples:
- [Nasdaq 100 Index](http://dc-js.github.com/dc.js/)
- [Canadian City Crime Stats](http://dc-js.github.com/dc.js/crime/index.html)
| Param | Type | Description |
| --- | --- | --- |
| parent | String | node | d3.selection | [compositeChart](#dc.compositeChart) | Any valid [d3 single selector](https://github.com/mbostock/d3/wiki/Selections#selecting-elements) specifying a dom block element such as a div; or a dom element or d3 selection. If the line chart is a sub-chart in a [Composite Chart](#dc.compositeChart) then pass in the parent composite chart instance instead. |
| [chartGroup] | String | The name of the chart group this chart instance should be placed in. Interaction with a chart will only trigger events and redraws within the chart's group. |
**Example**
```js
// create a line chart under #chart-container1 element using the default global chart group
var chart1 = dc.lineChart('#chart-container1');
// create a line chart under #chart-container2 element using chart group A
var chart2 = dc.lineChart('#chart-container2', 'chartGroupA');
// create a sub-chart under a composite parent chart
var chart3 = dc.lineChart(compositeChart);
```
#### lineChart.interpolate([interpolate]) ⇒ String | [lineChart](#dc.lineChart)
Gets or sets the interpolator to use for lines drawn, by string name, allowing e.g. step
functions, splines, and cubic interpolation. This is passed to
[d3.svg.line.interpolate](https://github.com/mbostock/d3/wiki/SVG-Shapes#line_interpolate) and
[d3.svg.area.interpolate](https://github.com/mbostock/d3/wiki/SVG-Shapes#area_interpolate),
where you can find a complete list of valid arguments
**Kind**: instance method of [lineChart](#dc.lineChart)
**See**
- [d3.svg.line.interpolate](https://github.com/mbostock/d3/wiki/SVG-Shapes#line_interpolate)
- [d3.svg.area.interpolate](https://github.com/mbostock/d3/wiki/SVG-Shapes#area_interpolate)
| Param | Type | Default |
| --- | --- | --- |
| [interpolate] | String | 'linear' |
#### lineChart.tension([tension]) ⇒ Number | [lineChart](#dc.lineChart)
Gets or sets the tension to use for lines drawn, in the range 0 to 1.
This parameter further customizes the interpolation behavior. It is passed to
[d3.svg.line.tension](https://github.com/mbostock/d3/wiki/SVG-Shapes#line_tension) and
[d3.svg.area.tension](https://github.com/mbostock/d3/wiki/SVG-Shapes#area_tension).
**Kind**: instance method of [lineChart](#dc.lineChart)
**See**
- [d3.svg.line.interpolate](https://github.com/mbostock/d3/wiki/SVG-Shapes#line_interpolate)
- [d3.svg.area.interpolate](https://github.com/mbostock/d3/wiki/SVG-Shapes#area_interpolate)
| Param | Type | Default |
| --- | --- | --- |
| [tension] | Number | 0.7 |
#### lineChart.defined([defined]) ⇒ function | [lineChart](#dc.lineChart)
Gets or sets a function that will determine discontinuities in the line which should be
skipped: the path will be broken into separate subpaths if some points are undefined.
This function is passed to
[d3.svg.line.defined](https://github.com/mbostock/d3/wiki/SVG-Shapes#line_defined)
Note: crossfilter will sometimes coerce nulls to 0, so you may need to carefully write
custom reduce functions to get this to work, depending on your data. See
https://github.com/dc-js/dc.js/issues/615#issuecomment-49089248
**Kind**: instance method of [lineChart](#dc.lineChart)
**See**: [d3.svg.line.defined](https://github.com/mbostock/d3/wiki/SVG-Shapes#line_defined)
| Param | Type |
| --- | --- |
| [defined] | function |
#### lineChart.dashStyle([dashStyle]) ⇒ Array.<Number> | [lineChart](#dc.lineChart)
Set the line's d3 dashstyle. This value becomes the 'stroke-dasharray' of line. Defaults to empty
array (solid line).
**Kind**: instance method of [lineChart](#dc.lineChart)
**See**: [stroke-dasharray](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray)
| Param | Type | Default |
| --- | --- | --- |
| [dashStyle] | Array.<Number> | [] |
**Example**
```js
// create a Dash Dot Dot Dot
chart.dashStyle([3,1,1,1]);
```
#### lineChart.renderArea([renderArea]) ⇒ Boolean | [lineChart](#dc.lineChart)
Get or set render area flag. If the flag is set to true then the chart will render the area
beneath each line and the line chart effectively becomes an area chart.
**Kind**: instance method of [lineChart](#dc.lineChart)
| Param | Type | Default |
| --- | --- | --- |
| [renderArea] | Boolean | false |
#### lineChart.xyTipsOn([xyTipsOn]) ⇒ Boolean | [lineChart](#dc.lineChart)
Turn on/off the mouseover behavior of an individual data point which renders a circle and x/y axis
dashed lines back to each respective axis. This is ignored if the chart
[brush](#dc.coordinateGridMixin+brushOn) is on
**Kind**: instance method of [lineChart](#dc.lineChart)
| Param | Type | Default |
| --- | --- | --- |
| [xyTipsOn] | Boolean | false |
#### lineChart.dotRadius([dotRadius]) ⇒ Number | [lineChart](#dc.lineChart)
Get or set the radius (in px) for dots displayed on the data points.
**Kind**: instance method of [lineChart](#dc.lineChart)
| Param | Type | Default |
| --- | --- | --- |
| [dotRadius] | Number | 5 |
#### lineChart.renderDataPoints([options]) ⇒ Object | [lineChart](#dc.lineChart)
Always show individual dots for each datapoint.
If `options` is falsy, it disables data point rendering.
If no `options` are provided, the current `options` values are instead returned.
**Kind**: instance method of [lineChart](#dc.lineChart)
| Param | Type | Default |
| --- | --- | --- |
| [options] | Object | {fillOpacity: 0.8, strokeOpacity: 0.8, radius: 2} |
**Example**
```js
chart.renderDataPoints({radius: 2, fillOpacity: 0.8, strokeOpacity: 0.8})
```
### dc.dataCount
**Kind**: static class of [dc](#dc)
**Mixes**: [baseMixin](#dc.baseMixin)
* [.dataCount](#dc.dataCount)
* [new dataCount(parent, [chartGroup])](#new_dc.dataCount_new)
* [.html([options])](#dc.dataCount+html) ⇒ Object | [dataCount](#dc.dataCount)
* [.formatNumber([formatter])](#dc.dataCount+formatNumber) ⇒ function | [dataCount](#dc.dataCount)
#### new dataCount(parent, [chartGroup])
The data count widget is a simple widget designed to display the number of records selected by the
current filters out of the total number of records in the data set. Once created the data count widget
will automatically update the text content of the following elements under the parent element.
'.total-count' - total number of records
'.filter-count' - number of records matched by the current filters
Examples:
- [Nasdaq 100 Index](http://dc-js.github.com/dc.js/)
| Param | Type | Description |
| --- | --- | --- |
| parent | String | node | d3.selection | Any valid [d3 single selector](https://github.com/mbostock/d3/wiki/Selections#selecting-elements) specifying a dom block element such as a div; or a dom element or d3 selection. |
| [chartGroup] | String | The name of the chart group this chart instance should be placed in. Interaction with a chart will only trigger events and redraws within the chart's group. |
**Example**
```js
var ndx = crossfilter(data);
var all = ndx.groupAll();
dc.dataCount('.dc-data-count')
.dimension(ndx)
.group(all);
```
#### dataCount.html([options]) ⇒ Object | [dataCount](#dc.dataCount)
Gets or sets an optional object specifying HTML templates to use depending how many items are
selected. The text `%total-count` will replaced with the total number of records, and the text
`%filter-count` will be replaced with the number of selected records.
- all: HTML template to use if all items are selected
- some: HTML template to use if not all items are selected
**Kind**: instance method of [dataCount](#dc.dataCount)
| Param | Type |
| --- | --- |
| [options] | Object |
**Example**
```js
counter.html({
some: '%filter-count out of %total-count records selected',
all: 'All records selected. Click on charts to apply filters'
})
```
#### dataCount.formatNumber([formatter]) ⇒ function | [dataCount](#dc.dataCount)
Gets or sets an optional function to format the filter count and total count.
**Kind**: instance method of [dataCount](#dc.dataCount)
**See**: [d3.format](https://github.com/mbostock/d3/wiki/Formatting)
| Param | Type | Default |
| --- | --- | --- |
| [formatter] | function | d3.format('.2g') |
**Example**
```js
counter.formatNumber(d3.format('.2g'))
```
### dc.dataTable
**Kind**: static class of [dc](#dc)
**Mixes**: [baseMixin](#dc.baseMixin)
* [.dataTable](#dc.dataTable)
* [new dataTable(parent, [chartGroup])](#new_dc.dataTable_new)
* [.size([size])](#dc.dataTable+size) ⇒ Number | [dataTable](#dc.dataTable)
* [.beginSlice([beginSlice])](#dc.dataTable+beginSlice) ⇒ Number | [dataTable](#dc.dataTable)
* [.endSlice([endSlice])](#dc.dataTable+endSlice) ⇒ Number | [dataTable](#dc.dataTable)
* [.columns([columns])](#dc.dataTable+columns) ⇒ Array.<function()> | [dataTable](#dc.dataTable)
* [.sortBy([sortBy])](#dc.dataTable+sortBy) ⇒ function | [dataTable](#dc.dataTable)
* [.order([order])](#dc.dataTable+order) ⇒ function | [dataTable](#dc.dataTable)
* [.showGroups([showGroups])](#dc.dataTable+showGroups) ⇒ Boolean | [dataTable](#dc.dataTable)
#### new dataTable(parent, [chartGroup])
The data table is a simple widget designed to list crossfilter focused data set (rows being
filtered) in a good old tabular fashion.
Note: Unlike other charts, the data table (and data grid chart) use the group attribute as a
keying function for [nesting](https://github.com/mbostock/d3/wiki/Arrays#-nest) the data
together in groups. Do not pass in a crossfilter group as this will not work.
Another interesting feature of the data table is that you can pass a crossfilter group to the `dimension`, as
long as you specify the [order](#dc.dataTable+order) as `d3.descending`, since the data
table will use `dimension.top()` to fetch the data in that case, and the method is equally
supported on the crossfilter group as the crossfilter dimension.
Examples:
- [Nasdaq 100 Index](http://dc-js.github.com/dc.js/)
- [dataTable on a crossfilter group](http://dc-js.github.io/dc.js/examples/table-on-aggregated-data.html)
([source](https://github.com/dc-js/dc.js/blob/develop/web/examples/table-on-aggregated-data.html))
| Param | Type | Description |
| --- | --- | --- |
| parent | String | node | d3.selection | Any valid [d3 single selector](https://github.com/mbostock/d3/wiki/Selections#selecting-elements) specifying a dom block element such as a div; or a dom element or d3 selection. |
| [chartGroup] | String | The name of the chart group this chart instance should be placed in. Interaction with a chart will only trigger events and redraws within the chart's group. |
#### dataTable.size([size]) ⇒ Number | [dataTable](#dc.dataTable)
Get or set the table size which determines the number of rows displayed by the widget.
**Kind**: instance method of [dataTable](#dc.dataTable)
| Param | Type | Default |
| --- | --- | --- |
| [size] | Number | 25 |
#### dataTable.beginSlice([beginSlice]) ⇒ Number | [dataTable](#dc.dataTable)
Get or set the index of the beginning slice which determines which entries get displayed
by the widget. Useful when implementing pagination.
Note: the sortBy function will determine how the rows are ordered for pagination purposes.
See the [table pagination example](http://dc-js.github.io/dc.js/examples/table-pagination.html)
to see how to implement the pagination user interface using `beginSlice` and `endSlice`.
**Kind**: instance method of [dataTable](#dc.dataTable)
| Param | Type | Default |
| --- | --- | --- |
| [beginSlice] | Number | 0 |
#### dataTable.endSlice([endSlice]) ⇒ Number | [dataTable](#dc.dataTable)
Get or set the index of the end slice which determines which entries get displayed by the
widget. Useful when implementing pagination. See [`beginSlice`](#dc.dataTable+beginSlice) for more information.
**Kind**: instance method of [dataTable](#dc.dataTable)
| Param | Type |
| --- | --- |
| [endSlice] | Number | undefined |
#### dataTable.columns([columns]) ⇒ Array.<function()> | [dataTable](#dc.dataTable)
Get or set column functions. The data table widget supports several methods of specifying the
columns to display.
The original method uses an array of functions to generate dynamic columns. Column functions
are simple javascript functions with only one input argument `d` which represents a row in
the data set. The return value of these functions will be used to generate the content for
each cell. However, this method requires the HTML for the table to have a fixed set of column
headers.
chart.columns([
function(d) { return d.date; },
function(d) { return d.open; },
function(d) { return d.close; },
function(d) { return numberFormat(d.close - d.open); },
function(d) { return d.volume; }
]);
In the second method, you can list the columns to read from the data without specifying it as
a function, except where necessary (ie, computed columns). Note the data element name is
capitalized when displayed in the table header. You can also mix in functions as necessary,
using the third `{label, format}` form, as shown below.
chart.columns([
"date", // d["date"], ie, a field accessor; capitalized automatically
"open", // ...
"close", // ...
{
label: "Change",
format: function (d) {
return numberFormat(d.close - d.open);
}
},
"volume" // d["volume"], ie, a field accessor; capitalized automatically
]);
In the third example, we specify all fields using the `{label, format}` method:
chart.columns([
{
label: "Date",
format: function (d) { return d.date; }
},
{
label: "Open",
format: function (d) { return numberFormat(d.open); }
},
{
label: "Close",
format: function (d) { return numberFormat(d.close); }
},
{
label: "Change",
format: function (d) { return numberFormat(d.close - d.open); }
},
{
label: "Volume",
format: function (d) { return d.volume; }
}
]);
You may wish to override the dataTable functions `_doColumnHeaderCapitalize` and
`_doColumnHeaderFnToString`, which are used internally to translate the column information or
function into a displayed header. The first one is used on the "string" column specifier; the
second is used to transform a stringified function into something displayable. For the Stock
example, the function for Change becomes the table header **d.close - d.open**.
Finally, you can even specify a completely different form of column definition. To do this,
override `_chart._doColumnHeaderFormat` and `_chart._doColumnValueFormat` Be aware that
fields without numberFormat specification will be displayed just as they are stored in the
data, unformatted.
**Kind**: instance method of [dataTable](#dc.dataTable)
**Returns**: Array.<function()> - }[dataTable](#dc.dataTable)
| Param | Type | Default |
| --- | --- | --- |
| [columns] | Array.<function()> | [] |
#### dataTable.sortBy([sortBy]) ⇒ function | [dataTable](#dc.dataTable)
Get or set sort-by function. This function works as a value accessor at row level and returns a
particular field to be sorted by. Default value: identity function
**Kind**: instance method of [dataTable](#dc.dataTable)
| Param | Type |
| --- | --- |
| [sortBy] | function |
**Example**
```js
chart.sortBy(function(d) {
return d.date;
});
```
#### dataTable.order([order]) ⇒ function | [dataTable](#dc.dataTable)
Get or set sort order. If the order is `d3.ascending`, the data table will use
`dimension().bottom()` to fetch the data; otherwise it will use `dimension().top()`
**Kind**: instance method of [dataTable](#dc.dataTable)
**See**
- [d3.ascending](https://github.com/mbostock/d3/wiki/Arrays#d3_ascending)
- [d3.descending](https://github.com/mbostock/d3/wiki/Arrays#d3_descending)
| Param | Type | Default |
| --- | --- | --- |
| [order] | function | d3.ascending |
**Example**
```js
chart.order(d3.descending);
```
#### dataTable.showGroups([showGroups]) ⇒ Boolean | [dataTable](#dc.dataTable)
Get or set if group rows will be shown.
The .group() getter-setter must be provided in either case.
**Kind**: instance method of [dataTable](#dc.dataTable)
| Param | Type | Default |
| --- | --- | --- |
| [showGroups] | Boolean | true |
**Example**
```js
chart
.group([value], [name])
.showGroups(true|false);
```
### dc.dataGrid
**Kind**: static class of [dc](#dc)
**Mixes**: [baseMixin](#dc.baseMixin)
* [.dataGrid](#dc.dataGrid)
* [new dataGrid(parent, [chartGroup])](#new_dc.dataGrid_new)
* [.beginSlice([beginSlice])](#dc.dataGrid+beginSlice) ⇒ Number | [dataGrid](#dc.dataGrid)
* [.endSlice([endSlice])](#dc.dataGrid+endSlice) ⇒ Number | [dataGrid](#dc.dataGrid)
* [.size([size])](#dc.dataGrid+size) ⇒ Number | [dataGrid](#dc.dataGrid)
* [.html([html])](#dc.dataGrid+html) ⇒ function | [dataGrid](#dc.dataGrid)
* [.htmlGroup([htmlGroup])](#dc.dataGrid+htmlGroup) ⇒ function | [dataGrid](#dc.dataGrid)
* [.sortBy([sortByFunction])](#dc.dataGrid+sortBy) ⇒ function | [dataGrid](#dc.dataGrid)
* [.order([order])](#dc.dataGrid+order) ⇒ function | [dataGrid](#dc.dataGrid)
#### new dataGrid(parent, [chartGroup])
Data grid is a simple widget designed to list the filtered records, providing
a simple way to define how the items are displayed.
Note: Unlike other charts, the data grid chart (and data table) use the group attribute as a keying function
for [nesting](https://github.com/mbostock/d3/wiki/Arrays#-nest) the data together in groups.
Do not pass in a crossfilter group as this will not work.
Examples:
- [List of members of the european parliament](http://europarl.me/dc.js/web/ep/index.html)
| Param | Type | Description |
| --- | --- | --- |
| parent | String | node | d3.selection | Any valid [d3 single selector](https://github.com/mbostock/d3/wiki/Selections#selecting-elements) specifying a dom block element such as a div; or a dom element or d3 selection. |
| [chartGroup] | String | The name of the chart group this chart instance should be placed in. Interaction with a chart will only trigger events and redraws within the chart's group. |
#### dataGrid.beginSlice([beginSlice]) ⇒ Number | [dataGrid](#dc.dataGrid)
Get or set the index of the beginning slice which determines which entries get displayed by the widget.
Useful when implementing pagination.
**Kind**: instance method of [dataGrid](#dc.dataGrid)
| Param | Type | Default |
| --- | --- | --- |
| [beginSlice] | Number | 0 |
#### dataGrid.endSlice([endSlice]) ⇒ Number | [dataGrid](#dc.dataGrid)
Get or set the index of the end slice which determines which entries get displayed by the widget
Useful when implementing pagination.
**Kind**: instance method of [dataGrid](#dc.dataGrid)
| Param | Type |
| --- | --- |
| [endSlice] | Number |
#### dataGrid.size([size]) ⇒ Number | [dataGrid](#dc.dataGrid)
Get or set the grid size which determines the number of items displayed by the widget.
**Kind**: instance method of [dataGrid](#dc.dataGrid)
| Param | Type | Default |
| --- | --- | --- |
| [size] | Number | 999 |
#### dataGrid.html([html]) ⇒ function | [dataGrid](#dc.dataGrid)
Get or set the function that formats an item. The data grid widget uses a
function to generate dynamic html. Use your favourite templating engine or
generate the string directly.
**Kind**: instance method of [dataGrid](#dc.dataGrid)
| Param | Type |
| --- | --- |
| [html] | function |
**Example**
```js
chart.html(function (d) { return ''+data.exampleString+'
';});
```
#### dataGrid.htmlGroup([htmlGroup]) ⇒ function | [dataGrid](#dc.dataGrid)
Get or set the function that formats a group label.
**Kind**: instance method of [dataGrid](#dc.dataGrid)
| Param | Type |
| --- | --- |
| [htmlGroup] | function |
**Example**
```js
chart.htmlGroup (function (d) { return ''.d.key . 'with ' . d.values.length .' items
'});
```
#### dataGrid.sortBy([sortByFunction]) ⇒ function | [dataGrid](#dc.dataGrid)
Get or set sort-by function. This function works as a value accessor at the item
level and returns a particular field to be sorted.
**Kind**: instance method of [dataGrid](#dc.dataGrid)
| Param | Type |
| --- | --- |
| [sortByFunction] | function |
**Example**
```js
chart.sortBy(function(d) {
return d.date;
});
```
#### dataGrid.order([order]) ⇒ function | [dataGrid](#dc.dataGrid)
Get or set sort order function.
**Kind**: instance method of [dataGrid](#dc.dataGrid)
**See**
- [d3.ascending](https://github.com/mbostock/d3/wiki/Arrays#d3_ascending)
- [d3.descending](https://github.com/mbostock/d3/wiki/Arrays#d3_descending)
| Param | Type | Default |
| --- | --- | --- |
| [order] | function | d3.ascending |
**Example**
```js
chart.order(d3.descending);
```
### dc.bubbleChart
**Kind**: static class of [dc](#dc)
**Mixes**: [bubbleMixin](#dc.bubbleMixin), [coordinateGridMixin](#dc.coordinateGridMixin)
* [.bubbleChart](#dc.bubbleChart)
* [new bubbleChart(parent, [chartGroup])](#new_dc.bubbleChart_new)
* [.elasticRadius([elasticRadius])](#dc.bubbleChart+elasticRadius) ⇒ Boolean | [bubbleChart](#dc.bubbleChart)
* [.sortBubbleSize([sortBubbleSize])](#dc.bubbleChart+sortBubbleSize) ⇒ Boolean | [bubbleChart](#dc.bubbleChart)
#### new bubbleChart(parent, [chartGroup])
A concrete implementation of a general purpose bubble chart that allows data visualization using the
following dimensions:
- x axis position
- y axis position
- bubble radius
- color
Examples:
- [Nasdaq 100 Index](http://dc-js.github.com/dc.js/)
- [US Venture Capital Landscape 2011](http://dc-js.github.com/dc.js/vc/index.html)
| Param | Type | Description |
| --- | --- | --- |
| parent | String | node | d3.selection | Any valid [d3 single selector](https://github.com/mbostock/d3/wiki/Selections#selecting-elements) specifying a dom block element such as a div; or a dom element or d3 selection. |
| [chartGroup] | String | The name of the chart group this chart instance should be placed in. Interaction with a chart will only trigger events and redraws within the chart's group. |
**Example**
```js
// create a bubble chart under #chart-container1 element using the default global chart group
var bubbleChart1 = dc.bubbleChart('#chart-container1');
// create a bubble chart under #chart-container2 element using chart group A
var bubbleChart2 = dc.bubbleChart('#chart-container2', 'chartGroupA');
```
#### bubbleChart.elasticRadius([elasticRadius]) ⇒ Boolean | [bubbleChart](#dc.bubbleChart)
Turn on or off the elastic bubble radius feature, or return the value of the flag. If this
feature is turned on, then bubble radii will be automatically rescaled to fit the chart better.
**Kind**: instance method of [bubbleChart](#dc.bubbleChart)
| Param | Type | Default |
| --- | --- | --- |
| [elasticRadius] | Boolean | false |
#### bubbleChart.sortBubbleSize([sortBubbleSize]) ⇒ Boolean | [bubbleChart](#dc.bubbleChart)
Turn on or off the bubble sorting feature, or return the value of the flag. If enabled,
bubbles will be sorted by their radius, with smaller bubbles in front.
**Kind**: instance method of [bubbleChart](#dc.bubbleChart)
| Param | Type | Default |
| --- | --- | --- |
| [sortBubbleSize] | Boolean | false |
### dc.compositeChart
**Kind**: static class of [dc](#dc)
**Mixes**: [coordinateGridMixin](#dc.coordinateGridMixin)
* [.compositeChart](#dc.compositeChart)
* [new compositeChart(parent, [chartGroup])](#new_dc.compositeChart_new)
* [.useRightAxisGridLines([useRightAxisGridLines])](#dc.compositeChart+useRightAxisGridLines) ⇒ Boolean | [compositeChart](#dc.compositeChart)
* [.childOptions([childOptions])](#dc.compositeChart+childOptions) ⇒ Object | [compositeChart](#dc.compositeChart)
* [.rightYAxisLabel([rightYAxisLabel], [padding])](#dc.compositeChart+rightYAxisLabel) ⇒ String | [compositeChart](#dc.compositeChart)
* [.compose([subChartArray])](#dc.compositeChart+compose) ⇒ [compositeChart](#dc.compositeChart)
* [.children()](#dc.compositeChart+children) ⇒ [Array.<baseMixin>](#dc.baseMixin)
* [.shareColors([shareColors])](#dc.compositeChart+shareColors) ⇒ Boolean | [compositeChart](#dc.compositeChart)
* [.shareTitle([shareTitle])](#dc.compositeChart+shareTitle) ⇒ Boolean | [compositeChart](#dc.compositeChart)
* [.rightY([yScale])](#dc.compositeChart+rightY) ⇒ d3.scale | [compositeChart](#dc.compositeChart)
* [.alignYAxes([alignYAxes])](#dc.compositeChart+alignYAxes) ⇒ Chart
* [.rightYAxis([rightYAxis])](#dc.compositeChart+rightYAxis) ⇒ d3.svg.axis | [compositeChart](#dc.compositeChart)
#### new compositeChart(parent, [chartGroup])
Composite charts are a special kind of chart that render multiple charts on the same Coordinate
Grid. You can overlay (compose) different bar/line/area charts in a single composite chart to
achieve some quite flexible charting effects.
| Param | Type | Description |
| --- | --- | --- |
| parent | String | node | d3.selection | Any valid [d3 single selector](https://github.com/mbostock/d3/wiki/Selections#selecting-elements) specifying a dom block element such as a div; or a dom element or d3 selection. |
| [chartGroup] | String | The name of the chart group this chart instance should be placed in. Interaction with a chart will only trigger events and redraws within the chart's group. |
**Example**
```js
// create a composite chart under #chart-container1 element using the default global chart group
var compositeChart1 = dc.compositeChart('#chart-container1');
// create a composite chart under #chart-container2 element using chart group A
var compositeChart2 = dc.compositeChart('#chart-container2', 'chartGroupA');
```
#### compositeChart.useRightAxisGridLines([useRightAxisGridLines]) ⇒ Boolean | [compositeChart](#dc.compositeChart)
Get or set whether to draw gridlines from the right y axis. Drawing from the left y axis is the
default behavior. This option is only respected when subcharts with both left and right y-axes
are present.
**Kind**: instance method of [compositeChart](#dc.compositeChart)
| Param | Type | Default |
| --- | --- | --- |
| [useRightAxisGridLines] | Boolean | false |
#### compositeChart.childOptions([childOptions]) ⇒ Object | [compositeChart](#dc.compositeChart)
Get or set chart-specific options for all child charts. This is equivalent to calling
[.options](#dc.baseMixin+options) on each child chart.
**Kind**: instance method of [compositeChart](#dc.compositeChart)
| Param | Type |
| --- | --- |
| [childOptions] | Object |
#### compositeChart.rightYAxisLabel([rightYAxisLabel], [padding]) ⇒ String | [compositeChart](#dc.compositeChart)
Set or get the right y axis label.
**Kind**: instance method of [compositeChart](#dc.compositeChart)
| Param | Type |
| --- | --- |
| [rightYAxisLabel] | String |
| [padding] | Number |
#### compositeChart.compose([subChartArray]) ⇒ [compositeChart](#dc.compositeChart)
Combine the given charts into one single composite coordinate grid chart.
**Kind**: instance method of [compositeChart](#dc.compositeChart)
| Param | Type |
| --- | --- |
| [subChartArray] | Array.<Chart> |
**Example**
```js
moveChart.compose([
// when creating sub-chart you need to pass in the parent chart
dc.lineChart(moveChart)
.group(indexAvgByMonthGroup) // if group is missing then parent's group will be used
.valueAccessor(function (d){return d.value.avg;})
// most of the normal functions will continue to work in a composed chart
.renderArea(true)
.stack(monthlyMoveGroup, function (d){return d.value;})
.title(function (d){
var value = d.value.avg?d.value.avg:d.value;
if(isNaN(value)) value = 0;
return dateFormat(d.key) + '\n' + numberFormat(value);
}),
dc.barChart(moveChart)
.group(volumeByMonthGroup)
.centerBar(true)
]);
```
#### compositeChart.children() ⇒ [Array.<baseMixin>](#dc.baseMixin)
Returns the child charts which are composed into the composite chart.
**Kind**: instance method of [compositeChart](#dc.compositeChart)
#### compositeChart.shareColors([shareColors]) ⇒ Boolean | [compositeChart](#dc.compositeChart)
Get or set color sharing for the chart. If set, the [.colors()](#dc.colorMixin+colors) value from this chart
will be shared with composed children. Additionally if the child chart implements
Stackable and has not set a custom .colorAccessor, then it will generate a color
specific to its order in the composition.
**Kind**: instance method of [compositeChart](#dc.compositeChart)
| Param | Type | Default |
| --- | --- | --- |
| [shareColors] | Boolean | false |
#### compositeChart.shareTitle([shareTitle]) ⇒ Boolean | [compositeChart](#dc.compositeChart)
Get or set title sharing for the chart. If set, the [.title()](#dc.baseMixin+title) value from
this chart will be shared with composed children.
**Kind**: instance method of [compositeChart](#dc.compositeChart)
| Param | Type | Default |
| --- | --- | --- |
| [shareTitle] | Boolean | true |
#### compositeChart.rightY([yScale]) ⇒ d3.scale | [compositeChart](#dc.compositeChart)
Get or set the y scale for the right axis. The right y scale is typically automatically
generated by the chart implementation.
**Kind**: instance method of [compositeChart](#dc.compositeChart)
**See**: [d3.scale](https://github.com/mbostock/d3/wiki/Scales)
| Param | Type |
| --- | --- |
| [yScale] | d3.scale |
#### compositeChart.alignYAxes([alignYAxes]) ⇒ Chart
Get or set alignment between left and right y axes. A line connecting '0' on both y axis
will be parallel to x axis.
**Kind**: instance method of [compositeChart](#dc.compositeChart)
| Param | Type | Default |
| --- | --- | --- |
| [alignYAxes] | Boolean | false |
#### compositeChart.rightYAxis([rightYAxis]) ⇒ d3.svg.axis | [compositeChart](#dc.compositeChart)
Set or get the right y axis used by the composite chart. This function is most useful when y
axis customization is required. The y axis in dc.js is an instance of a [d3 axis
object](https://github.com/mbostock/d3/wiki/SVG-Axes#wiki-_axis) therefore it supports any valid
d3 axis manipulation. **Caution**: The y axis is usually generated internally by dc;
resetting it may cause unexpected results.
**Kind**: instance method of [compositeChart](#dc.compositeChart)
**See**: [d3.svg.axis](https://github.com/mbostock/d3/wiki/SVG-Axes)
| Param | Type |
| --- | --- |
| [rightYAxis] | d3.svg.axis |
**Example**
```js
// customize y axis tick format
chart.rightYAxis().tickFormat(function (v) {return v + '%';});
// customize y axis tick values
chart.rightYAxis().tickValues([0, 100, 200, 300]);
```
### dc.seriesChart
**Kind**: static class of [dc](#dc)
**Mixes**: [compositeChart](#dc.compositeChart)
* [.seriesChart](#dc.seriesChart)
* [new seriesChart(parent, [chartGroup])](#new_dc.seriesChart_new)
* [.chart([chartFunction])](#dc.seriesChart+chart) ⇒ function | [seriesChart](#dc.seriesChart)
* [.seriesAccessor([accessor])](#dc.seriesChart+seriesAccessor) ⇒ function | [seriesChart](#dc.seriesChart)
* [.seriesSort([sortFunction])](#dc.seriesChart+seriesSort) ⇒ function | [seriesChart](#dc.seriesChart)
* [.valueSort([sortFunction])](#dc.seriesChart+valueSort) ⇒ function | [seriesChart](#dc.seriesChart)
#### new seriesChart(parent, [chartGroup])
A series chart is a chart that shows multiple series of data overlaid on one chart, where the
series is specified in the data. It is a specialization of Composite Chart and inherits all
composite features other than recomposing the chart.
Examples:
- [Series Chart](http://dc-js.github.io/dc.js/examples/series.html)
| Param | Type | Description |
| --- | --- | --- |
| parent | String | node | d3.selection | Any valid [d3 single selector](https://github.com/mbostock/d3/wiki/Selections#selecting-elements) specifying a dom block element such as a div; or a dom element or d3 selection. |
| [chartGroup] | String | The name of the chart group this chart instance should be placed in. Interaction with a chart will only trigger events and redraws within the chart's group. |
**Example**
```js
// create a series chart under #chart-container1 element using the default global chart group
var seriesChart1 = dc.seriesChart("#chart-container1");
// create a series chart under #chart-container2 element using chart group A
var seriesChart2 = dc.seriesChart("#chart-container2", "chartGroupA");
```
#### seriesChart.chart([chartFunction]) ⇒ function | [seriesChart](#dc.seriesChart)
Get or set the chart function, which generates the child charts.
**Kind**: instance method of [seriesChart](#dc.seriesChart)
| Param | Type | Default |
| --- | --- | --- |
| [chartFunction] | function | dc.lineChart |
**Example**
```js
// put interpolation on the line charts used for the series
chart.chart(function(c) { return dc.lineChart(c).interpolate('basis'); })
// do a scatter series chart
chart.chart(dc.scatterPlot)
```
#### seriesChart.seriesAccessor([accessor]) ⇒ function | [seriesChart](#dc.seriesChart)
**mandatory**
Get or set accessor function for the displayed series. Given a datum, this function
should return the series that datum belongs to.
**Kind**: instance method of [seriesChart](#dc.seriesChart)
| Param | Type |
| --- | --- |
| [accessor] | function |
**Example**
```js
// simple series accessor
chart.seriesAccessor(function(d) { return "Expt: " + d.key[0]; })
```
#### seriesChart.seriesSort([sortFunction]) ⇒ function | [seriesChart](#dc.seriesChart)
Get or set a function to sort the list of series by, given series values.
**Kind**: instance method of [seriesChart](#dc.seriesChart)
**See**
- [d3.ascending](https://github.com/mbostock/d3/wiki/Arrays#d3_ascending)
- [d3.descending](https://github.com/mbostock/d3/wiki/Arrays#d3_descending)
| Param | Type | Default |
| --- | --- | --- |
| [sortFunction] | function | d3.ascending |
**Example**
```js
chart.seriesSort(d3.descending);
```
#### seriesChart.valueSort([sortFunction]) ⇒ function | [seriesChart](#dc.seriesChart)
Get or set a function to sort each series values by. By default this is the key accessor which,
for example, will ensure a lineChart series connects its points in increasing key/x order,
rather than haphazardly.
**Kind**: instance method of [seriesChart](#dc.seriesChart)
**See**
- [d3.ascending](https://github.com/mbostock/d3/wiki/Arrays#d3_ascending)
- [d3.descending](https://github.com/mbostock/d3/wiki/Arrays#d3_descending)
| Param | Type |
| --- | --- |
| [sortFunction] | function |
**Example**
```js
// Default value sort
_chart.valueSort(function keySort (a, b) {
return d3.ascending(_chart.keyAccessor()(a), _chart.keyAccessor()(b));
});
```
### dc.geoChoroplethChart
**Kind**: static class of [dc](#dc)
**Mixes**: [colorMixin](#dc.colorMixin), [baseMixin](#dc.baseMixin)
* [.geoChoroplethChart](#dc.geoChoroplethChart)
* [new geoChoroplethChart(parent, [chartGroup])](#new_dc.geoChoroplethChart_new)
* [.overlayGeoJson(json, name, keyAccessor)](#dc.geoChoroplethChart+overlayGeoJson) ⇒ [geoChoroplethChart](#dc.geoChoroplethChart)
* [.projection([projection])](#dc.geoChoroplethChart+projection) ⇒ [geoChoroplethChart](#dc.geoChoroplethChart)
* [.geoJsons()](#dc.geoChoroplethChart+geoJsons) ⇒ Array.<{name:String, data: Object, accessor: function()}>
* [.geoPath()](#dc.geoChoroplethChart+geoPath) ⇒ d3.geo.path
* [.removeGeoJson(name)](#dc.geoChoroplethChart+removeGeoJson) ⇒ [geoChoroplethChart](#dc.geoChoroplethChart)
#### new geoChoroplethChart(parent, [chartGroup])
The geo choropleth chart is designed as an easy way to create a crossfilter driven choropleth map
from GeoJson data. This chart implementation was inspired by
[the great d3 choropleth example](http://bl.ocks.org/4060606).
Examples:
- [US Venture Capital Landscape 2011](http://dc-js.github.com/dc.js/vc/index.html)
| Param | Type | Description |
| --- | --- | --- |
| parent | String | node | d3.selection | Any valid [d3 single selector](https://github.com/mbostock/d3/wiki/Selections#selecting-elements) specifying a dom block element such as a div; or a dom element or d3 selection. |
| [chartGroup] | String | The name of the chart group this chart instance should be placed in. Interaction with a chart will only trigger events and redraws within the chart's group. |
**Example**
```js
// create a choropleth chart under '#us-chart' element using the default global chart group
var chart1 = dc.geoChoroplethChart('#us-chart');
// create a choropleth chart under '#us-chart2' element using chart group A
var chart2 = dc.compositeChart('#us-chart2', 'chartGroupA');
```
#### geoChoroplethChart.overlayGeoJson(json, name, keyAccessor) ⇒ [geoChoroplethChart](#dc.geoChoroplethChart)
**mandatory**
Use this function to insert a new GeoJson map layer. This function can be invoked multiple times
if you have multiple GeoJson data layers to render on top of each other. If you overlay multiple
layers with the same name the new overlay will override the existing one.
**Kind**: instance method of [geoChoroplethChart](#dc.geoChoroplethChart)
**See**
- [GeoJSON](http://geojson.org/)
- [TopoJSON](https://github.com/mbostock/topojson/wiki)
- [topojson.feature](https://github.com/mbostock/topojson/wiki/API-Reference#feature)
| Param | Type | Description |
| --- | --- | --- |
| json | geoJson | a geojson feed |
| name | String | name of the layer |
| keyAccessor | function | accessor function used to extract 'key' from the GeoJson data. The key extracted by this function should match the keys returned by the crossfilter groups. |
**Example**
```js
// insert a layer for rendering US states
chart.overlayGeoJson(statesJson.features, 'state', function(d) {
return d.properties.name;
});
```
#### geoChoroplethChart.projection([projection]) ⇒ [geoChoroplethChart](#dc.geoChoroplethChart)
Set custom geo projection function. See the available [d3 geo projection
functions](https://github.com/mbostock/d3/wiki/Geo-Projections).
**Kind**: instance method of [geoChoroplethChart](#dc.geoChoroplethChart)
**See**
- [d3.geo.projection](https://github.com/mbostock/d3/wiki/Geo-Projections)
- [Extended d3.geo.projection](https://github.com/d3/d3-geo-projection)
| Param | Type | Default |
| --- | --- | --- |
| [projection] | d3.projection | d3.geo.albersUsa() |
#### geoChoroplethChart.geoJsons() ⇒ Array.<{name:String, data: Object, accessor: function()}>
Returns all GeoJson layers currently registered with this chart. The returned array is a
reference to this chart's internal data structure, so any modification to this array will also
modify this chart's internal registration.
**Kind**: instance method of [geoChoroplethChart](#dc.geoChoroplethChart)
#### geoChoroplethChart.geoPath() ⇒ d3.geo.path
Returns the [d3.geo.path](https://github.com/mbostock/d3/wiki/Geo-Paths#path) object used to
render the projection and features. Can be useful for figuring out the bounding box of the
feature set and thus a way to calculate scale and translation for the projection.
**Kind**: instance method of [geoChoroplethChart](#dc.geoChoroplethChart)
**See**: [d3.geo.path](https://github.com/mbostock/d3/wiki/Geo-Paths#path)
#### geoChoroplethChart.removeGeoJson(name) ⇒ [geoChoroplethChart](#dc.geoChoroplethChart)
Remove a GeoJson layer from this chart by name
**Kind**: instance method of [geoChoroplethChart](#dc.geoChoroplethChart)
| Param | Type |
| --- | --- |
| name | String |
### dc.bubbleOverlay
**Kind**: static class of [dc](#dc)
**Mixes**: [bubbleMixin](#dc.bubbleMixin), [baseMixin](#dc.baseMixin)
* [.bubbleOverlay](#dc.bubbleOverlay)
* [new bubbleOverlay(parent, [chartGroup])](#new_dc.bubbleOverlay_new)
* [.svg([imageElement])](#dc.bubbleOverlay+svg) ⇒ [bubbleOverlay](#dc.bubbleOverlay)
* [.point(name, x, y)](#dc.bubbleOverlay+point) ⇒ [bubbleOverlay](#dc.bubbleOverlay)
#### new bubbleOverlay(parent, [chartGroup])
The bubble overlay chart is quite different from the typical bubble chart. With the bubble overlay
chart you can arbitrarily place bubbles on an existing svg or bitmap image, thus changing the
typical x and y positioning while retaining the capability to visualize data using bubble radius
and coloring.
Examples:
- [Canadian City Crime Stats](http://dc-js.github.com/dc.js/crime/index.html)
| Param | Type | Description |
| --- | --- | --- |
| parent | String | node | d3.selection | Any valid [d3 single selector](https://github.com/mbostock/d3/wiki/Selections#selecting-elements) specifying a dom block element such as a div; or a dom element or d3 selection. |
| [chartGroup] | String | The name of the chart group this chart instance should be placed in. Interaction with a chart will only trigger events and redraws within the chart's group. |
**Example**
```js
// create a bubble overlay chart on top of the '#chart-container1 svg' element using the default global chart group
var bubbleChart1 = dc.bubbleOverlayChart('#chart-container1').svg(d3.select('#chart-container1 svg'));
// create a bubble overlay chart on top of the '#chart-container2 svg' element using chart group A
var bubbleChart2 = dc.compositeChart('#chart-container2', 'chartGroupA').svg(d3.select('#chart-container2 svg'));
```
#### bubbleOverlay.svg([imageElement]) ⇒ [bubbleOverlay](#dc.bubbleOverlay)
**mandatory**
Set the underlying svg image element. Unlike other dc charts this chart will not generate a svg
element; therefore the bubble overlay chart will not work if this function is not invoked. If the
underlying image is a bitmap, then an empty svg will need to be created on top of the image.
**Kind**: instance method of [bubbleOverlay](#dc.bubbleOverlay)
| Param | Type |
| --- | --- |
| [imageElement] | SVGElement | d3.selection |
**Example**
```js
// set up underlying svg element
chart.svg(d3.select('#chart svg'));
```
#### bubbleOverlay.point(name, x, y) ⇒ [bubbleOverlay](#dc.bubbleOverlay)
**mandatory**
Set up a data point on the overlay. The name of a data point should match a specific 'key' among
data groups generated using keyAccessor. If a match is found (point name <-> data group key)
then a bubble will be generated at the position specified by the function. x and y
value specified here are relative to the underlying svg.
**Kind**: instance method of [bubbleOverlay](#dc.bubbleOverlay)
| Param | Type |
| --- | --- |
| name | String |
| x | Number |
| y | Number |
### dc.rowChart
**Kind**: static class of [dc](#dc)
**Mixes**: [capMixin](#dc.capMixin), [marginMixin](#dc.marginMixin), [colorMixin](#dc.colorMixin), [baseMixin](#dc.baseMixin)
* [.rowChart](#dc.rowChart)
* [new rowChart(parent, [chartGroup])](#new_dc.rowChart_new)
* [.x([scale])](#dc.rowChart+x) ⇒ d3.scale | [rowChart](#dc.rowChart)
* [.renderTitleLabel([renderTitleLabel])](#dc.rowChart+renderTitleLabel) ⇒ Boolean | [rowChart](#dc.rowChart)
* [.xAxis()](#dc.rowChart+xAxis) ⇒ d3.svg.axis
* [.fixedBarHeight([fixedBarHeight])](#dc.rowChart+fixedBarHeight) ⇒ Boolean | Number | [rowChart](#dc.rowChart)
* [.gap([gap])](#dc.rowChart+gap) ⇒ Number | [rowChart](#dc.rowChart)
* [.elasticX([elasticX])](#dc.rowChart+elasticX) ⇒ Boolean | [rowChart](#dc.rowChart)
* [.labelOffsetX([labelOffsetX])](#dc.rowChart+labelOffsetX) ⇒ Number | [rowChart](#dc.rowChart)
* [.labelOffsetY([labelOffsety])](#dc.rowChart+labelOffsetY) ⇒ Number | [rowChart](#dc.rowChart)
* [.titleLabelOffsetX([titleLabelOffsetX])](#dc.rowChart+titleLabelOffsetX) ⇒ Number | [rowChart](#dc.rowChart)
#### new rowChart(parent, [chartGroup])
Concrete row chart implementation.
Examples:
- [Nasdaq 100 Index](http://dc-js.github.com/dc.js/)
| Param | Type | Description |
| --- | --- | --- |
| parent | String | node | d3.selection | Any valid [d3 single selector](https://github.com/mbostock/d3/wiki/Selections#selecting-elements) specifying a dom block element such as a div; or a dom element or d3 selection. |
| [chartGroup] | String | The name of the chart group this chart instance should be placed in. Interaction with a chart will only trigger events and redraws within the chart's group. |
**Example**
```js
// create a row chart under #chart-container1 element using the default global chart group
var chart1 = dc.rowChart('#chart-container1');
// create a row chart under #chart-container2 element using chart group A
var chart2 = dc.rowChart('#chart-container2', 'chartGroupA');
```
#### rowChart.x([scale]) ⇒ d3.scale | [rowChart](#dc.rowChart)
Gets or sets the x scale. The x scale can be any d3
[quantitive scale](https://github.com/mbostock/d3/wiki/Quantitative-Scales)
**Kind**: instance method of [rowChart](#dc.rowChart)
**See**: [quantitive scale](https://github.com/mbostock/d3/wiki/Quantitative-Scales)
| Param | Type |
| --- | --- |
| [scale] | d3.scale |
#### rowChart.renderTitleLabel([renderTitleLabel]) ⇒ Boolean | [rowChart](#dc.rowChart)
Turn on/off Title label rendering (values) using SVG style of text-anchor 'end'
**Kind**: instance method of [rowChart](#dc.rowChart)
| Param | Type | Default |
| --- | --- | --- |
| [renderTitleLabel] | Boolean | false |
#### rowChart.xAxis() ⇒ d3.svg.axis
Get the x axis for the row chart instance. Note: not settable for row charts.
See the [d3 axis object](https://github.com/mbostock/d3/wiki/SVG-Axes#wiki-axis)
documention for more information.
**Kind**: instance method of [rowChart](#dc.rowChart)
**See**: [d3.svg.axis](https://github.com/mbostock/d3/wiki/SVG-Axes#wiki-axis)
**Example**
```js
// customize x axis tick format
chart.xAxis().tickFormat(function (v) {return v + '%';});
// customize x axis tick values
chart.xAxis().tickValues([0, 100, 200, 300]);
```
#### rowChart.fixedBarHeight([fixedBarHeight]) ⇒ Boolean | Number | [rowChart](#dc.rowChart)
Get or set the fixed bar height. Default is [false] which will auto-scale bars.
For example, if you want to fix the height for a specific number of bars (useful in TopN charts)
you could fix height as follows (where count = total number of bars in your TopN and gap is
your vertical gap space).
**Kind**: instance method of [rowChart](#dc.rowChart)
| Param | Type | Default |
| --- | --- | --- |
| [fixedBarHeight] | Boolean | Number | false |
**Example**
```js
chart.fixedBarHeight( chartheight - (count + 1) * gap / count);
```
#### rowChart.gap([gap]) ⇒ Number | [rowChart](#dc.rowChart)
Get or set the vertical gap space between rows on a particular row chart instance
**Kind**: instance method of [rowChart](#dc.rowChart)
| Param | Type | Default |
| --- | --- | --- |
| [gap] | Number | 5 |
#### rowChart.elasticX([elasticX]) ⇒ Boolean | [rowChart](#dc.rowChart)
Get or set the elasticity on x axis. If this attribute is set to true, then the x axis will rescle to auto-fit the
data range when filtered.
**Kind**: instance method of [rowChart](#dc.rowChart)
| Param | Type |
| --- | --- |
| [elasticX] | Boolean |
#### rowChart.labelOffsetX([labelOffsetX]) ⇒ Number | [rowChart](#dc.rowChart)
Get or set the x offset (horizontal space to the top left corner of a row) for labels on a particular row chart.
**Kind**: instance method of [rowChart](#dc.rowChart)
| Param | Type | Default |
| --- | --- | --- |
| [labelOffsetX] | Number | 10 |
#### rowChart.labelOffsetY([labelOffsety]) ⇒ Number | [rowChart](#dc.rowChart)
Get or set the y offset (vertical space to the top left corner of a row) for labels on a particular row chart.
**Kind**: instance method of [rowChart](#dc.rowChart)
| Param | Type | Default |
| --- | --- | --- |
| [labelOffsety] | Number | 15 |
#### rowChart.titleLabelOffsetX([titleLabelOffsetX]) ⇒ Number | [rowChart](#dc.rowChart)
Get of set the x offset (horizontal space between right edge of row and right edge or text.
**Kind**: instance method of [rowChart](#dc.rowChart)
| Param | Type | Default |
| --- | --- | --- |
| [titleLabelOffsetX] | Number | 2 |
### dc.legend
**Kind**: static class of [dc](#dc)
* [.legend](#dc.legend)
* [new legend()](#new_dc.legend_new)
* [.x([x])](#dc.legend+x) ⇒ Number | [legend](#dc.legend)
* [.y([y])](#dc.legend+y) ⇒ Number | [legend](#dc.legend)
* [.gap([gap])](#dc.legend+gap) ⇒ Number | [legend](#dc.legend)
* [.itemHeight([itemHeight])](#dc.legend+itemHeight) ⇒ Number | [legend](#dc.legend)
* [.horizontal([horizontal])](#dc.legend+horizontal) ⇒ Boolean | [legend](#dc.legend)
* [.legendWidth([legendWidth])](#dc.legend+legendWidth) ⇒ Number | [legend](#dc.legend)
* [.itemWidth([itemWidth])](#dc.legend+itemWidth) ⇒ Number | [legend](#dc.legend)
* [.autoItemWidth([autoItemWidth])](#dc.legend+autoItemWidth) ⇒ Boolean | [legend](#dc.legend)
#### new legend()
Legend is a attachable widget that can be added to other dc charts to render horizontal legend
labels.
Examples:
- [Nasdaq 100 Index](http://dc-js.github.com/dc.js/)
- [Canadian City Crime Stats](http://dc-js.github.com/dc.js/crime/index.html)
**Example**
```js
chart.legend(dc.legend().x(400).y(10).itemHeight(13).gap(5))
```
#### legend.x([x]) ⇒ Number | [legend](#dc.legend)
Set or get x coordinate for legend widget.
**Kind**: instance method of [legend](#dc.legend)
| Param | Type | Default |
| --- | --- | --- |
| [x] | Number | 0 |
#### legend.y([y]) ⇒ Number | [legend](#dc.legend)
Set or get y coordinate for legend widget.
**Kind**: instance method of [legend](#dc.legend)
| Param | Type | Default |
| --- | --- | --- |
| [y] | Number | 0 |
#### legend.gap([gap]) ⇒ Number | [legend](#dc.legend)
Set or get gap between legend items.
**Kind**: instance method of [legend](#dc.legend)
| Param | Type | Default |
| --- | --- | --- |
| [gap] | Number | 5 |
#### legend.itemHeight([itemHeight]) ⇒ Number | [legend](#dc.legend)
Set or get legend item height.
**Kind**: instance method of [legend](#dc.legend)
| Param | Type | Default |
| --- | --- | --- |
| [itemHeight] | Number | 12 |
#### legend.horizontal([horizontal]) ⇒ Boolean | [legend](#dc.legend)
Position legend horizontally instead of vertically.
**Kind**: instance method of [legend](#dc.legend)
| Param | Type | Default |
| --- | --- | --- |
| [horizontal] | Boolean | false |
#### legend.legendWidth([legendWidth]) ⇒ Number | [legend](#dc.legend)
Maximum width for horizontal legend.
**Kind**: instance method of [legend](#dc.legend)
| Param | Type | Default |
| --- | --- | --- |
| [legendWidth] | Number | 500 |
#### legend.itemWidth([itemWidth]) ⇒ Number | [legend](#dc.legend)
legendItem width for horizontal legend.
**Kind**: instance method of [legend](#dc.legend)
| Param | Type | Default |
| --- | --- | --- |
| [itemWidth] | Number | 70 |
#### legend.autoItemWidth([autoItemWidth]) ⇒ Boolean | [legend](#dc.legend)
Turn automatic width for legend items on or off. If true, [itemWidth](#dc.legend+itemWidth) is ignored.
This setting takes into account [gap](#dc.legend+gap).
**Kind**: instance method of [legend](#dc.legend)
| Param | Type | Default |
| --- | --- | --- |
| [autoItemWidth] | Boolean | false |
### dc.scatterPlot
**Kind**: static class of [dc](#dc)
**Mixes**: [coordinateGridMixin](#dc.coordinateGridMixin)
* [.scatterPlot](#dc.scatterPlot)
* [new scatterPlot(parent, [chartGroup])](#new_dc.scatterPlot_new)
* [.existenceAccessor([accessor])](#dc.scatterPlot+existenceAccessor) ⇒ function | [scatterPlot](#dc.scatterPlot)
* [.symbol([type])](#dc.scatterPlot+symbol) ⇒ String | function | [scatterPlot](#dc.scatterPlot)
* [.symbolSize([symbolSize])](#dc.scatterPlot+symbolSize) ⇒ Number | [scatterPlot](#dc.scatterPlot)
* [.highlightedSize([highlightedSize])](#dc.scatterPlot+highlightedSize) ⇒ Number | [scatterPlot](#dc.scatterPlot)
* [.excludedSize([excludedSize])](#dc.scatterPlot+excludedSize) ⇒ Number | [scatterPlot](#dc.scatterPlot)
* [.excludedColor([excludedColor])](#dc.scatterPlot+excludedColor) ⇒ Number | [scatterPlot](#dc.scatterPlot)
* [.excludedOpacity([excludedOpacity])](#dc.scatterPlot+excludedOpacity) ⇒ Number | [scatterPlot](#dc.scatterPlot)
* [.emptySize([emptySize])](#dc.scatterPlot+emptySize) ⇒ Number | [scatterPlot](#dc.scatterPlot)
#### new scatterPlot(parent, [chartGroup])
A scatter plot chart
Examples:
- [Scatter Chart](http://dc-js.github.io/dc.js/examples/scatter.html)
- [Multi-Scatter Chart](http://dc-js.github.io/dc.js/examples/multi-scatter.html)
| Param | Type | Description |
| --- | --- | --- |
| parent | String | node | d3.selection | Any valid [d3 single selector](https://github.com/mbostock/d3/wiki/Selections#selecting-elements) specifying a dom block element such as a div; or a dom element or d3 selection. |
| [chartGroup] | String | The name of the chart group this chart instance should be placed in. Interaction with a chart will only trigger events and redraws within the chart's group. |
**Example**
```js
// create a scatter plot under #chart-container1 element using the default global chart group
var chart1 = dc.scatterPlot('#chart-container1');
// create a scatter plot under #chart-container2 element using chart group A
var chart2 = dc.scatterPlot('#chart-container2', 'chartGroupA');
// create a sub-chart under a composite parent chart
var chart3 = dc.scatterPlot(compositeChart);
```
#### scatterPlot.existenceAccessor([accessor]) ⇒ function | [scatterPlot](#dc.scatterPlot)
Get or set the existence accessor. If a point exists, it is drawn with
[symbolSize](#dc.scatterPlot+symbolSize) radius and
opacity 1; if it does not exist, it is drawn with
[emptySize](#dc.scatterPlot+emptySize) radius and opacity 0. By default,
the existence accessor checks if the reduced value is truthy.
**Kind**: instance method of [scatterPlot](#dc.scatterPlot)
**See**
- [symbolSize](#dc.scatterPlot+symbolSize)
- [emptySize](#dc.scatterPlot+emptySize)
| Param | Type |
| --- | --- |
| [accessor] | function |
**Example**
```js
// default accessor
chart.existenceAccessor(function (d) { return d.value; });
```
#### scatterPlot.symbol([type]) ⇒ String | function | [scatterPlot](#dc.scatterPlot)
Get or set the symbol type used for each point. By default the symbol is a circle.
Type can be a constant or an accessor.
**Kind**: instance method of [scatterPlot](#dc.scatterPlot)
**See**: [d3.svg.symbol().type()](https://github.com/mbostock/d3/wiki/SVG-Shapes#symbol_type)
| Param | Type | Default |
| --- | --- | --- |
| [type] | String | function | 'circle' |
**Example**
```js
// Circle type
chart.symbol('circle');
// Square type
chart.symbol('square');
```
#### scatterPlot.symbolSize([symbolSize]) ⇒ Number | [scatterPlot](#dc.scatterPlot)
Set or get radius for symbols.
**Kind**: instance method of [scatterPlot](#dc.scatterPlot)
**See**: [d3.svg.symbol().size()](https://github.com/mbostock/d3/wiki/SVG-Shapes#symbol_size)
| Param | Type | Default |
| --- | --- | --- |
| [symbolSize] | Number | 3 |
#### scatterPlot.highlightedSize([highlightedSize]) ⇒ Number | [scatterPlot](#dc.scatterPlot)
Set or get radius for highlighted symbols.
**Kind**: instance method of [scatterPlot](#dc.scatterPlot)
**See**: [d3.svg.symbol().size()](https://github.com/mbostock/d3/wiki/SVG-Shapes#symbol_size)
| Param | Type | Default |
| --- | --- | --- |
| [highlightedSize] | Number | 5 |
#### scatterPlot.excludedSize([excludedSize]) ⇒ Number | [scatterPlot](#dc.scatterPlot)
Set or get size for symbols excluded from this chart's filter. If null, no
special size is applied for symbols based on their filter status
**Kind**: instance method of [scatterPlot](#dc.scatterPlot)
**See**: [d3.svg.symbol().size()](https://github.com/mbostock/d3/wiki/SVG-Shapes#symbol_size)
| Param | Type | Default |
| --- | --- | --- |
| [excludedSize] | Number | Number | [scatterPlot](#dc.scatterPlot)
Set or get color for symbols excluded from this chart's filter. If null, no
special color is applied for symbols based on their filter status
**Kind**: instance method of [scatterPlot](#dc.scatterPlot)
**See**: [d3.svg.symbol().size()](https://github.com/mbostock/d3/wiki/SVG-Shapes#symbol_size)
| Param | Type | Default |
| --- | --- | --- |
| [excludedColor] | Number | Number | [scatterPlot](#dc.scatterPlot)
Set or get opacity for symbols excluded from this chart's filter.
**Kind**: instance method of [scatterPlot](#dc.scatterPlot)
**See**: [d3.svg.symbol().size()](https://github.com/mbostock/d3/wiki/SVG-Shapes#symbol_size)
| Param | Type | Default |
| --- | --- | --- |
| [excludedOpacity] | Number | 1.0 |
#### scatterPlot.emptySize([emptySize]) ⇒ Number | [scatterPlot](#dc.scatterPlot)
Set or get radius for symbols when the group is empty.
**Kind**: instance method of [scatterPlot](#dc.scatterPlot)
**See**: [d3.svg.symbol().size()](https://github.com/mbostock/d3/wiki/SVG-Shapes#symbol_size)
| Param | Type | Default |
| --- | --- | --- |
| [emptySize] | Number | 0 |
### dc.numberDisplay
**Kind**: static class of [dc](#dc)
**Mixes**: [baseMixin](#dc.baseMixin)
* [.numberDisplay](#dc.numberDisplay)
* [new numberDisplay(parent, [chartGroup])](#new_dc.numberDisplay_new)
* [.html([html])](#dc.numberDisplay+html) ⇒ Object | [numberDisplay](#dc.numberDisplay)
* [.value()](#dc.numberDisplay+value) ⇒ Number
* [.formatNumber([formatter])](#dc.numberDisplay+formatNumber) ⇒ function | [numberDisplay](#dc.numberDisplay)
#### new numberDisplay(parent, [chartGroup])
A display of a single numeric value.
Unlike other charts, you do not need to set a dimension. Instead a group object must be provided and
a valueAccessor that returns a single value.
| Param | Type | Description |
| --- | --- | --- |
| parent | String | node | d3.selection | Any valid [d3 single selector](https://github.com/mbostock/d3/wiki/Selections#selecting-elements) specifying a dom block element such as a div; or a dom element or d3 selection. |
| [chartGroup] | String | The name of the chart group this chart instance should be placed in. Interaction with a chart will only trigger events and redraws within the chart's group. |
**Example**
```js
// create a number display under #chart-container1 element using the default global chart group
var display1 = dc.numberDisplay('#chart-container1');
```
#### numberDisplay.html([html]) ⇒ Object | [numberDisplay](#dc.numberDisplay)
Gets or sets an optional object specifying HTML templates to use depending on the number
displayed. The text `%number` will be replaced with the current value.
- one: HTML template to use if the number is 1
- zero: HTML template to use if the number is 0
- some: HTML template to use otherwise
**Kind**: instance method of [numberDisplay](#dc.numberDisplay)
| Param | Type | Default |
| --- | --- | --- |
| [html] | Object | {one: '', some: '', none: ''} |
**Example**
```js
numberWidget.html({
one:'%number record',
some:'%number records',
none:'no records'})
```
#### numberDisplay.value() ⇒ Number
Calculate and return the underlying value of the display
**Kind**: instance method of [numberDisplay](#dc.numberDisplay)
#### numberDisplay.formatNumber([formatter]) ⇒ function | [numberDisplay](#dc.numberDisplay)
Get or set a function to format the value for the display.
**Kind**: instance method of [numberDisplay](#dc.numberDisplay)
**See**: [d3.format](https://github.com/mbostock/d3/wiki/Formatting)
| Param | Type | Default |
| --- | --- | --- |
| [formatter] | function | d3.format('.2s') |
### dc.heatMap
**Kind**: static class of [dc](#dc)
**Mixes**: [colorMixin](#dc.colorMixin), [marginMixin](#dc.marginMixin), [baseMixin](#dc.baseMixin)
* [.heatMap](#dc.heatMap)
* [new heatMap(parent, [chartGroup])](#new_dc.heatMap_new)
* [.colsLabel([labelFunction])](#dc.heatMap+colsLabel) ⇒ function | [heatMap](#dc.heatMap)
* [.rowsLabel([labelFunction])](#dc.heatMap+rowsLabel) ⇒ function | [heatMap](#dc.heatMap)
* [.rows([rows])](#dc.heatMap+rows) ⇒ Array.<(String\|Number)> | [heatMap](#dc.heatMap)
* [.cols([cols])](#dc.heatMap+cols) ⇒ Array.<(String\|Number)> | [heatMap](#dc.heatMap)
* [.boxOnClick([handler])](#dc.heatMap+boxOnClick) ⇒ function | [heatMap](#dc.heatMap)
* [.xAxisOnClick([handler])](#dc.heatMap+xAxisOnClick) ⇒ function | [heatMap](#dc.heatMap)
* [.yAxisOnClick([handler])](#dc.heatMap+yAxisOnClick) ⇒ function | [heatMap](#dc.heatMap)
* [.xBorderRadius([xBorderRadius])](#dc.heatMap+xBorderRadius) ⇒ Number | [heatMap](#dc.heatMap)
* [.yBorderRadius([yBorderRadius])](#dc.heatMap+yBorderRadius) ⇒ Number | [heatMap](#dc.heatMap)
#### new heatMap(parent, [chartGroup])
A heat map is matrix that represents the values of two dimensions of data using colors.
| Param | Type | Description |
| --- | --- | --- |
| parent | String | node | d3.selection | Any valid [d3 single selector](https://github.com/mbostock/d3/wiki/Selections#selecting-elements) specifying a dom block element such as a div; or a dom element or d3 selection. |
| [chartGroup] | String | The name of the chart group this chart instance should be placed in. Interaction with a chart will only trigger events and redraws within the chart's group. |
**Example**
```js
// create a heat map under #chart-container1 element using the default global chart group
var heatMap1 = dc.heatMap('#chart-container1');
// create a heat map under #chart-container2 element using chart group A
var heatMap2 = dc.heatMap('#chart-container2', 'chartGroupA');
```
#### heatMap.colsLabel([labelFunction]) ⇒ function | [heatMap](#dc.heatMap)
Set or get the column label function. The chart class uses this function to render
column labels on the X axis. It is passed the column name.
**Kind**: instance method of [heatMap](#dc.heatMap)
| Param | Type | Default |
| --- | --- | --- |
| [labelFunction] | function | function(d) { return d; } |
**Example**
```js
// the default label function just returns the name
chart.colsLabel(function(d) { return d; });
```
#### heatMap.rowsLabel([labelFunction]) ⇒ function | [heatMap](#dc.heatMap)
Set or get the row label function. The chart class uses this function to render
row labels on the Y axis. It is passed the row name.
**Kind**: instance method of [heatMap](#dc.heatMap)
| Param | Type | Default |
| --- | --- | --- |
| [labelFunction] | function | function(d) { return d; } |
**Example**
```js
// the default label function just returns the name
chart.rowsLabel(function(d) { return d; });
```
#### heatMap.rows([rows]) ⇒ Array.<(String\|Number)> | [heatMap](#dc.heatMap)
Gets or sets the values used to create the rows of the heatmap, as an array. By default, all
the values will be fetched from the data using the value accessor, and they will be sorted in
ascending order.
**Kind**: instance method of [heatMap](#dc.heatMap)
| Param | Type |
| --- | --- |
| [rows] | Array.<(String\|Number)> |
#### heatMap.cols([cols]) ⇒ Array.<(String\|Number)> | [heatMap](#dc.heatMap)
Gets or sets the keys used to create the columns of the heatmap, as an array. By default, all
the values will be fetched from the data using the key accessor, and they will be sorted in
ascending order.
**Kind**: instance method of [heatMap](#dc.heatMap)
| Param | Type |
| --- | --- |
| [cols] | Array.<(String\|Number)> |
#### heatMap.boxOnClick([handler]) ⇒ function | [heatMap](#dc.heatMap)
Gets or sets the handler that fires when an individual cell is clicked in the heatmap.
By default, filtering of the cell will be toggled.
**Kind**: instance method of [heatMap](#dc.heatMap)
| Param | Type |
| --- | --- |
| [handler] | function |
**Example**
```js
// default box on click handler
chart.boxOnClick(function (d) {
var filter = d.key;
dc.events.trigger(function () {
_chart.filter(filter);
_chart.redrawGroup();
});
});
```
#### heatMap.xAxisOnClick([handler]) ⇒ function | [heatMap](#dc.heatMap)
Gets or sets the handler that fires when a column tick is clicked in the x axis.
By default, if any cells in the column are unselected, the whole column will be selected,
otherwise the whole column will be unselected.
**Kind**: instance method of [heatMap](#dc.heatMap)
| Param | Type |
| --- | --- |
| [handler] | function |
#### heatMap.yAxisOnClick([handler]) ⇒ function | [heatMap](#dc.heatMap)
Gets or sets the handler that fires when a row tick is clicked in the y axis.
By default, if any cells in the row are unselected, the whole row will be selected,
otherwise the whole row will be unselected.
**Kind**: instance method of [heatMap](#dc.heatMap)
| Param | Type |
| --- | --- |
| [handler] | function |
#### heatMap.xBorderRadius([xBorderRadius]) ⇒ Number | [heatMap](#dc.heatMap)
Gets or sets the X border radius. Set to 0 to get full rectangles.
**Kind**: instance method of [heatMap](#dc.heatMap)
| Param | Type | Default |
| --- | --- | --- |
| [xBorderRadius] | Number | 6.75 |
#### heatMap.yBorderRadius([yBorderRadius]) ⇒ Number | [heatMap](#dc.heatMap)
Gets or sets the Y border radius. Set to 0 to get full rectangles.
**Kind**: instance method of [heatMap](#dc.heatMap)
| Param | Type | Default |
| --- | --- | --- |
| [yBorderRadius] | Number | 6.75 |
### dc.boxPlot
**Kind**: static class of [dc](#dc)
**Mixes**: [coordinateGridMixin](#dc.coordinateGridMixin)
* [.boxPlot](#dc.boxPlot)
* [new boxPlot(parent, [chartGroup])](#new_dc.boxPlot_new)
* [.boxPadding([padding])](#dc.boxPlot+boxPadding) ⇒ Number | [boxPlot](#dc.boxPlot)
* [.outerPadding([padding])](#dc.boxPlot+outerPadding) ⇒ Number | [boxPlot](#dc.boxPlot)
* [.boxWidth([boxWidth])](#dc.boxPlot+boxWidth) ⇒ Number | function | [boxPlot](#dc.boxPlot)
* [.tickFormat([tickFormat])](#dc.boxPlot+tickFormat) ⇒ Number | function | [boxPlot](#dc.boxPlot)
#### new boxPlot(parent, [chartGroup])
A box plot is a chart that depicts numerical data via their quartile ranges.
Examples:
- [Box plot time example](http://dc-js.github.io/dc.js/examples/box-plot-time.html)
- [Box plot example](http://dc-js.github.io/dc.js/examples/box-plot.html)
| Param | Type | Description |
| --- | --- | --- |
| parent | String | node | d3.selection | Any valid [d3 single selector](https://github.com/mbostock/d3/wiki/Selections#selecting-elements) specifying a dom block element such as a div; or a dom element or d3 selection. |
| [chartGroup] | String | The name of the chart group this chart instance should be placed in. Interaction with a chart will only trigger events and redraws within the chart's group. |
**Example**
```js
// create a box plot under #chart-container1 element using the default global chart group
var boxPlot1 = dc.boxPlot('#chart-container1');
// create a box plot under #chart-container2 element using chart group A
var boxPlot2 = dc.boxPlot('#chart-container2', 'chartGroupA');
```
#### boxPlot.boxPadding([padding]) ⇒ Number | [boxPlot](#dc.boxPlot)
Get or set the spacing between boxes as a fraction of box size. Valid values are within 0-1.
See the [d3 docs](https://github.com/mbostock/d3/wiki/Ordinal-Scales#wiki-ordinal_rangeBands)
for a visual description of how the padding is applied.
**Kind**: instance method of [boxPlot](#dc.boxPlot)
**See**: [d3.scale.ordinal.rangeBands](https://github.com/mbostock/d3/wiki/Ordinal-Scales#wiki-ordinal_rangeBands)
| Param | Type | Default |
| --- | --- | --- |
| [padding] | Number | 0.8 |
#### boxPlot.outerPadding([padding]) ⇒ Number | [boxPlot](#dc.boxPlot)
Get or set the outer padding on an ordinal box chart. This setting has no effect on non-ordinal charts
or on charts with a custom [.boxWidth](#dc.boxPlot+boxWidth). Will pad the width by
`padding * barWidth` on each side of the chart.
**Kind**: instance method of [boxPlot](#dc.boxPlot)
| Param | Type | Default |
| --- | --- | --- |
| [padding] | Number | 0.5 |
#### boxPlot.boxWidth([boxWidth]) ⇒ Number | function | [boxPlot](#dc.boxPlot)
Get or set the numerical width of the boxplot box. The width may also be a function taking as
parameters the chart width excluding the right and left margins, as well as the number of x
units.
**Kind**: instance method of [boxPlot](#dc.boxPlot)
| Param | Type | Default |
| --- | --- | --- |
| [boxWidth] | Number | function | 0.5 |
**Example**
```js
// Using numerical parameter
chart.boxWidth(10);
// Using function
chart.boxWidth((innerChartWidth, xUnits) { ... });
```
#### boxPlot.tickFormat([tickFormat]) ⇒ Number | function | [boxPlot](#dc.boxPlot)
Set the numerical format of the boxplot median, whiskers and quartile labels. Defaults to
integer formatting.
**Kind**: instance method of [boxPlot](#dc.boxPlot)
| Param | Type |
| --- | --- |
| [tickFormat] | function |
**Example**
```js
// format ticks to 2 decimal places
chart.tickFormat(d3.format('.2f'));
```
### dc.baseMixin ⇒ [baseMixin](#dc.baseMixin)
`dc.baseMixin` is an abstract functional object representing a basic `dc` chart object
for all chart and widget implementations. Methods from the [dc.baseMixin](#dc.baseMixin) are inherited
and available on all chart implementations in the `dc` library.
**Kind**: static mixin of [dc](#dc)
| Param | Type |
| --- | --- |
| _chart | Object |
* [.baseMixin](#dc.baseMixin) ⇒ [baseMixin](#dc.baseMixin)
* [.height([height])](#dc.baseMixin+height) ⇒ Number | [baseMixin](#dc.baseMixin)
* [.width([width])](#dc.baseMixin+width) ⇒ Number | [baseMixin](#dc.baseMixin)
* [.minWidth([minWidth])](#dc.baseMixin+minWidth) ⇒ Number | [baseMixin](#dc.baseMixin)
* [.minHeight([minHeight])](#dc.baseMixin+minHeight) ⇒ Number | [baseMixin](#dc.baseMixin)
* [.dimension([dimension])](#dc.baseMixin+dimension) ⇒ crossfilter.dimension | [baseMixin](#dc.baseMixin)
* [.data([callback])](#dc.baseMixin+data) ⇒ \* | [baseMixin](#dc.baseMixin)
* [.group([group], [name])](#dc.baseMixin+group) ⇒ crossfilter.group | [baseMixin](#dc.baseMixin)
* [.ordering([orderFunction])](#dc.baseMixin+ordering) ⇒ function | [baseMixin](#dc.baseMixin)
* [.filterAll()](#dc.baseMixin+filterAll) ⇒ [baseMixin](#dc.baseMixin)
* [.select()](#dc.baseMixin+select) ⇒ d3.selection
* [.selectAll()](#dc.baseMixin+selectAll) ⇒ d3.selection
* [.anchor([parent], [chartGroup])](#dc.baseMixin+anchor) ⇒ String | node | d3.selection | [baseMixin](#dc.baseMixin)
* [.anchorName()](#dc.baseMixin+anchorName) ⇒ String
* [.root([rootElement])](#dc.baseMixin+root) ⇒ HTMLElement | [baseMixin](#dc.baseMixin)
* [.svg([svgElement])](#dc.baseMixin+svg) ⇒ SVGElement | d3.selection | [baseMixin](#dc.baseMixin)
* [.resetSvg()](#dc.baseMixin+resetSvg) ⇒ SVGElement
* [.filterPrinter([filterPrinterFunction])](#dc.baseMixin+filterPrinter) ⇒ function | [baseMixin](#dc.baseMixin)
* [.controlsUseVisibility([controlsUseVisibility])](#dc.baseMixin+controlsUseVisibility) ⇒ Boolean | [baseMixin](#dc.baseMixin)
* [.turnOnControls()](#dc.baseMixin+turnOnControls) ⇒ [baseMixin](#dc.baseMixin)
* [.turnOffControls()](#dc.baseMixin+turnOffControls) ⇒ [baseMixin](#dc.baseMixin)
* [.transitionDuration([duration])](#dc.baseMixin+transitionDuration) ⇒ Number | [baseMixin](#dc.baseMixin)
* [.render()](#dc.baseMixin+render) ⇒ [baseMixin](#dc.baseMixin)
* [.redraw()](#dc.baseMixin+redraw) ⇒ [baseMixin](#dc.baseMixin)
* [.commitHandler()](#dc.baseMixin+commitHandler) ⇒ [baseMixin](#dc.baseMixin)
* [.redrawGroup()](#dc.baseMixin+redrawGroup) ⇒ [baseMixin](#dc.baseMixin)
* [.renderGroup()](#dc.baseMixin+renderGroup) ⇒ [baseMixin](#dc.baseMixin)
* [.hasFilterHandler([hasFilterHandler])](#dc.baseMixin+hasFilterHandler) ⇒ function | [baseMixin](#dc.baseMixin)
* [.hasFilter([filter])](#dc.baseMixin+hasFilter) ⇒ Boolean
* [.removeFilterHandler([removeFilterHandler])](#dc.baseMixin+removeFilterHandler) ⇒ function | [baseMixin](#dc.baseMixin)
* [.addFilterHandler([addFilterHandler])](#dc.baseMixin+addFilterHandler) ⇒ function | [baseMixin](#dc.baseMixin)
* [.resetFilterHandler([resetFilterHandler])](#dc.baseMixin+resetFilterHandler) ⇒ [baseMixin](#dc.baseMixin)
* [.filter([filter])](#dc.baseMixin+filter) ⇒ [baseMixin](#dc.baseMixin)
* [.filters()](#dc.baseMixin+filters) ⇒ Array.<\*>
* [.onClick(datum)](#dc.baseMixin+onClick)
* [.filterHandler([filterHandler])](#dc.baseMixin+filterHandler) ⇒ function | [baseMixin](#dc.baseMixin)
* [.keyAccessor([keyAccessor])](#dc.baseMixin+keyAccessor) ⇒ function | [baseMixin](#dc.baseMixin)
* [.valueAccessor([valueAccessor])](#dc.baseMixin+valueAccessor) ⇒ function | [baseMixin](#dc.baseMixin)
* [.label([labelFunction], [enableLabels])](#dc.baseMixin+label) ⇒ function | [baseMixin](#dc.baseMixin)
* [.renderLabel([renderLabel])](#dc.baseMixin+renderLabel) ⇒ Boolean | [baseMixin](#dc.baseMixin)
* [.title([titleFunction])](#dc.baseMixin+title) ⇒ function | [baseMixin](#dc.baseMixin)
* [.renderTitle([renderTitle])](#dc.baseMixin+renderTitle) ⇒ Boolean | [baseMixin](#dc.baseMixin)
* ~~[.renderlet(renderletFunction)](#dc.baseMixin+renderlet) ⇒ [baseMixin](#dc.baseMixin)~~
* [.chartGroup([chartGroup])](#dc.baseMixin+chartGroup) ⇒ String | [baseMixin](#dc.baseMixin)
* [.expireCache()](#dc.baseMixin+expireCache) ⇒ [baseMixin](#dc.baseMixin)
* [.legend([legend])](#dc.baseMixin+legend) ⇒ [legend](#dc.legend) | [baseMixin](#dc.baseMixin)
* [.chartID()](#dc.baseMixin+chartID) ⇒ String
* [.options(opts)](#dc.baseMixin+options) ⇒ [baseMixin](#dc.baseMixin)
* [.on(event, listener)](#dc.baseMixin+on) ⇒ [baseMixin](#dc.baseMixin)
#### baseMixin.height([height]) ⇒ Number | [baseMixin](#dc.baseMixin)
Set or get the height attribute of a chart. The height is applied to the SVGElement generated by
the chart when rendered (or re-rendered). If a value is given, then it will be used to calculate
the new height and the chart returned for method chaining. The value can either be a numeric, a
function, or falsy. If no value is specified then the value of the current height attribute will
be returned.
By default, without an explicit height being given, the chart will select the width of its
anchor element. If that isn't possible it defaults to 200 (provided by the
[minHeight](#dc.baseMixin+minHeight) property). Setting the value falsy will return
the chart to the default behavior.
**Kind**: instance method of [baseMixin](#dc.baseMixin)
**See**: [minHeight](#dc.baseMixin+minHeight)
| Param | Type |
| --- | --- |
| [height] | Number | function |
**Example**
```js
// Default height
chart.height(function (element) {
var height = element && element.getBoundingClientRect && element.getBoundingClientRect().height;
return (height && height > chart.minHeight()) ? height : chart.minHeight();
});
chart.height(250); // Set the chart's height to 250px;
chart.height(function(anchor) { return doSomethingWith(anchor); }); // set the chart's height with a function
chart.height(null); // reset the height to the default auto calculation
```
#### baseMixin.width([width]) ⇒ Number | [baseMixin](#dc.baseMixin)
Set or get the width attribute of a chart.
**Kind**: instance method of [baseMixin](#dc.baseMixin)
**See**
- [height](#dc.baseMixin+height)
- [minWidth](#dc.baseMixin+minWidth)
| Param | Type |
| --- | --- |
| [width] | Number | function |
**Example**
```js
// Default width
chart.width(function (element) {
var width = element && element.getBoundingClientRect && element.getBoundingClientRect().width;
return (width && width > chart.minWidth()) ? width : chart.minWidth();
});
```
#### baseMixin.minWidth([minWidth]) ⇒ Number | [baseMixin](#dc.baseMixin)
Set or get the minimum width attribute of a chart. This only has effect when used with the default
[width](#dc.baseMixin+width) function.
**Kind**: instance method of [baseMixin](#dc.baseMixin)
**See**: [width](#dc.baseMixin+width)
| Param | Type | Default |
| --- | --- | --- |
| [minWidth] | Number | 200 |
#### baseMixin.minHeight([minHeight]) ⇒ Number | [baseMixin](#dc.baseMixin)
Set or get the minimum height attribute of a chart. This only has effect when used with the default
[height](#dc.baseMixin+height) function.
**Kind**: instance method of [baseMixin](#dc.baseMixin)
**See**: [height](#dc.baseMixin+height)
| Param | Type | Default |
| --- | --- | --- |
| [minHeight] | Number | 200 |
#### baseMixin.dimension([dimension]) ⇒ crossfilter.dimension | [baseMixin](#dc.baseMixin)
**mandatory**
Set or get the dimension attribute of a chart. In `dc`, a dimension can be any valid [crossfilter
dimension](https://github.com/square/crossfilter/wiki/API-Reference#wiki-dimension).
If a value is given, then it will be used as the new dimension. If no value is specified then
the current dimension will be returned.
**Kind**: instance method of [baseMixin](#dc.baseMixin)
**See**: [crossfilter.dimension](https://github.com/square/crossfilter/wiki/API-Reference#dimension)
| Param | Type |
| --- | --- |
| [dimension] | crossfilter.dimension |
**Example**
```js
var index = crossfilter([]);
var dimension = index.dimension(dc.pluck('key'));
chart.dimension(dimension);
```
#### baseMixin.data([callback]) ⇒ \* | [baseMixin](#dc.baseMixin)
Set the data callback or retrieve the chart's data set. The data callback is passed the chart's
group and by default will return
[group.all](https://github.com/square/crossfilter/wiki/API-Reference#group_all).
This behavior may be modified to, for instance, return only the top 5 groups.
**Kind**: instance method of [baseMixin](#dc.baseMixin)
| Param | Type |
| --- | --- |
| [callback] | function |
**Example**
```js
// Default data function
chart.data(function (group) { return group.all(); });
chart.data(function (group) { return group.top(5); });
```
#### baseMixin.group([group], [name]) ⇒ crossfilter.group | [baseMixin](#dc.baseMixin)
**mandatory**
Set or get the group attribute of a chart. In `dc` a group is a
[crossfilter group](https://github.com/square/crossfilter/wiki/API-Reference#group-map-reduce).
Usually the group should be created from the particular dimension associated with the same chart. If a value is
given, then it will be used as the new group.
If no value specified then the current group will be returned.
If `name` is specified then it will be used to generate legend label.
**Kind**: instance method of [baseMixin](#dc.baseMixin)
**See**: [crossfilter.group](https://github.com/square/crossfilter/wiki/API-Reference#group-map-reduce)
| Param | Type |
| --- | --- |
| [group] | crossfilter.group |
| [name] | String |
**Example**
```js
var index = crossfilter([]);
var dimension = index.dimension(dc.pluck('key'));
chart.dimension(dimension);
chart.group(dimension.group(crossfilter.reduceSum()));
```
#### baseMixin.ordering([orderFunction]) ⇒ function | [baseMixin](#dc.baseMixin)
Get or set an accessor to order ordinal dimensions. This uses
[crossfilter.quicksort.by](https://github.com/square/crossfilter/wiki/API-Reference#quicksort_by) as the
sort.
**Kind**: instance method of [baseMixin](#dc.baseMixin)
**See**: [crossfilter.quicksort.by](https://github.com/square/crossfilter/wiki/API-Reference#quicksort_by)
| Param | Type |
| --- | --- |
| [orderFunction] | function |
**Example**
```js
// Default ordering accessor
_chart.ordering(dc.pluck('key'));
```
#### baseMixin.filterAll() ⇒ [baseMixin](#dc.baseMixin)
Clear all filters associated with this chart
The same can be achieved by calling [chart.filter(null)](#dc.baseMixin+filter).
**Kind**: instance method of [baseMixin](#dc.baseMixin)
#### baseMixin.select() ⇒ d3.selection
Execute d3 single selection in the chart's scope using the given selector and return the d3
selection.
This function is **not chainable** since it does not return a chart instance; however the d3
selection result can be chained to d3 function calls.
**Kind**: instance method of [baseMixin](#dc.baseMixin)
**See**: [d3.selection](https://github.com/mbostock/d3/wiki/Selections)
**Example**
```js
// Similar to:
d3.select('#chart-id').select(selector);
```
#### baseMixin.selectAll() ⇒ d3.selection
Execute in scope d3 selectAll using the given selector and return d3 selection result.
This function is **not chainable** since it does not return a chart instance; however the d3
selection result can be chained to d3 function calls.
**Kind**: instance method of [baseMixin](#dc.baseMixin)
**See**: [d3.selection](https://github.com/mbostock/d3/wiki/Selections)
**Example**
```js
// Similar to:
d3.select('#chart-id').selectAll(selector);
```
#### baseMixin.anchor([parent], [chartGroup]) ⇒ String | node | d3.selection | [baseMixin](#dc.baseMixin)
Set the root SVGElement to either be an existing chart's root; or any valid [d3 single
selector](https://github.com/mbostock/d3/wiki/Selections#selecting-elements) specifying a dom
block element such as a div; or a dom element or d3 selection. Optionally registers the chart
within the chartGroup. This class is called internally on chart initialization, but be called
again to relocate the chart. However, it will orphan any previously created SVGElements.
**Kind**: instance method of [baseMixin](#dc.baseMixin)
| Param | Type |
| --- | --- |
| [parent] | anchorChart | anchorSelector | anchorNode |
| [chartGroup] | String |
#### baseMixin.anchorName() ⇒ String
Returns the DOM id for the chart's anchored location.
**Kind**: instance method of [baseMixin](#dc.baseMixin)
#### baseMixin.root([rootElement]) ⇒ HTMLElement | [baseMixin](#dc.baseMixin)
Returns the root element where a chart resides. Usually it will be the parent div element where
the SVGElement was created. You can also pass in a new root element however this is usually handled by
dc internally. Resetting the root element on a chart outside of dc internals may have
unexpected consequences.
**Kind**: instance method of [baseMixin](#dc.baseMixin)
**See**: [HTMLElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement)
| Param | Type |
| --- | --- |
| [rootElement] | HTMLElement |
#### baseMixin.svg([svgElement]) ⇒ SVGElement | d3.selection | [baseMixin](#dc.baseMixin)
Returns the top SVGElement for this specific chart. You can also pass in a new SVGElement,
however this is usually handled by dc internally. Resetting the SVGElement on a chart outside
of dc internals may have unexpected consequences.
**Kind**: instance method of [baseMixin](#dc.baseMixin)
**See**: [SVGElement](https://developer.mozilla.org/en-US/docs/Web/API/SVGElement)
| Param | Type |
| --- | --- |
| [svgElement] | SVGElement | d3.selection |
#### baseMixin.resetSvg() ⇒ SVGElement
Remove the chart's SVGElements from the dom and recreate the container SVGElement.
**Kind**: instance method of [baseMixin](#dc.baseMixin)
**See**: [SVGElement](https://developer.mozilla.org/en-US/docs/Web/API/SVGElement)
#### baseMixin.filterPrinter([filterPrinterFunction]) ⇒ function | [baseMixin](#dc.baseMixin)
Set or get the filter printer function. The filter printer function is used to generate human
friendly text for filter value(s) associated with the chart instance. By default dc charts use a
default filter printer `dc.printers.filter` that provides simple printing support for both
single value and ranged filters.
**Kind**: instance method of [baseMixin](#dc.baseMixin)
| Param | Type | Default |
| --- | --- | --- |
| [filterPrinterFunction] | function | dc.printers.filter |
#### baseMixin.controlsUseVisibility([controlsUseVisibility]) ⇒ Boolean | [baseMixin](#dc.baseMixin)
If set, use the `visibility` attribute instead of the `display` attribute for showing/hiding
chart reset and filter controls, for less disruption to the layout.
**Kind**: instance method of [baseMixin](#dc.baseMixin)
| Param | Type | Default |
| --- | --- | --- |
| [controlsUseVisibility] | Boolean | false |
#### baseMixin.turnOnControls() ⇒ [baseMixin](#dc.baseMixin)
Turn on optional control elements within the root element. dc currently supports the
following html control elements.
* root.selectAll('.reset') - elements are turned on if the chart has an active filter. This type
of control element is usually used to store a reset link to allow user to reset filter on a
certain chart. This element will be turned off automatically if the filter is cleared.
* root.selectAll('.filter') elements are turned on if the chart has an active filter. The text
content of this element is then replaced with the current filter value using the filter printer
function. This type of element will be turned off automatically if the filter is cleared.
**Kind**: instance method of [baseMixin](#dc.baseMixin)
#### baseMixin.turnOffControls() ⇒ [baseMixin](#dc.baseMixin)
Turn off optional control elements within the root element.
**Kind**: instance method of [baseMixin](#dc.baseMixin)
**See**: [turnOnControls](#dc.baseMixin+turnOnControls)
#### baseMixin.transitionDuration([duration]) ⇒ Number | [baseMixin](#dc.baseMixin)
Set or get the animation transition duration (in milliseconds) for this chart instance.
**Kind**: instance method of [baseMixin](#dc.baseMixin)
| Param | Type | Default |
| --- | --- | --- |
| [duration] | Number | 750 |
#### baseMixin.render() ⇒ [baseMixin](#dc.baseMixin)
Invoking this method will force the chart to re-render everything from scratch. Generally it
should only be used to render the chart for the first time on the page or if you want to make
sure everything is redrawn from scratch instead of relying on the default incremental redrawing
behaviour.
**Kind**: instance method of [baseMixin](#dc.baseMixin)
#### baseMixin.redraw() ⇒ [baseMixin](#dc.baseMixin)
Calling redraw will cause the chart to re-render data changes incrementally. If there is no
change in the underlying data dimension then calling this method will have no effect on the
chart. Most chart interaction in dc will automatically trigger this method through internal
events (in particular [redrawAll](#dc.redrawAll); therefore, you only need to
manually invoke this function if data is manipulated outside of dc's control (for example if
data is loaded in the background using
[crossfilter.add](https://github.com/square/crossfilter/wiki/API-Reference#crossfilter_add).
**Kind**: instance method of [baseMixin](#dc.baseMixin)
#### baseMixin.commitHandler() ⇒ [baseMixin](#dc.baseMixin)
Gets/sets the commit handler. If the chart has a commit handler, the handler will be called when
the chart's filters have changed, in order to send the filter data asynchronously to a server.
Unlike other functions in dc.js, the commit handler is asynchronous. It takes two arguments:
a flag indicating whether this is a render (true) or a redraw (false), and a callback to be
triggered once the commit is filtered. The callback has the standard node.js continuation signature
with error first and result second.
**Kind**: instance method of [baseMixin](#dc.baseMixin)
#### baseMixin.redrawGroup() ⇒ [baseMixin](#dc.baseMixin)
Redraws all charts in the same group as this chart, typically in reaction to a filter
change. If the chart has a [commitHandler](dc.baseMixin.commitFilter), it will
be executed and waited for.
**Kind**: instance method of [baseMixin](#dc.baseMixin)
#### baseMixin.renderGroup() ⇒ [baseMixin](#dc.baseMixin)
Renders all charts in the same group as this chart. If the chart has a
[commitHandler](dc.baseMixin.commitFilter), it will be executed and waited for
**Kind**: instance method of [baseMixin](#dc.baseMixin)
#### baseMixin.hasFilterHandler([hasFilterHandler]) ⇒ function | [baseMixin](#dc.baseMixin)
Set or get the has filter handler. The has filter handler is a function that checks to see if
the chart's current filters include a specific filter. Using a custom has filter handler allows
you to change the way filters are checked for and replaced.
**Kind**: instance method of [baseMixin](#dc.baseMixin)
| Param | Type |
| --- | --- |
| [hasFilterHandler] | function |
**Example**
```js
// default has filter handler
chart.hasFilterHandler(function (filters, filter) {
if (filter === null || typeof(filter) === 'undefined') {
return filters.length > 0;
}
return filters.some(function (f) {
return filter <= f && filter >= f;
});
});
// custom filter handler (no-op)
chart.hasFilterHandler(function(filters, filter) {
return false;
});
```
#### baseMixin.hasFilter([filter]) ⇒ Boolean
Check whether any active filter or a specific filter is associated with particular chart instance.
This function is **not chainable**.
**Kind**: instance method of [baseMixin](#dc.baseMixin)
**See**: [hasFilterHandler](#dc.baseMixin+hasFilterHandler)
| Param | Type |
| --- | --- |
| [filter] | \* |
#### baseMixin.removeFilterHandler([removeFilterHandler]) ⇒ function | [baseMixin](#dc.baseMixin)
Set or get the remove filter handler. The remove filter handler is a function that removes a
filter from the chart's current filters. Using a custom remove filter handler allows you to
change how filters are removed or perform additional work when removing a filter, e.g. when
using a filter server other than crossfilter.
Any changes should modify the `filters` array argument and return that array.
**Kind**: instance method of [baseMixin](#dc.baseMixin)
| Param | Type |
| --- | --- |
| [removeFilterHandler] | function |
**Example**
```js
// default remove filter handler
chart.removeFilterHandler(function (filters, filter) {
for (var i = 0; i < filters.length; i++) {
if (filters[i] <= filter && filters[i] >= filter) {
filters.splice(i, 1);
break;
}
}
return filters;
});
// custom filter handler (no-op)
chart.removeFilterHandler(function(filters, filter) {
return filters;
});
```
#### baseMixin.addFilterHandler([addFilterHandler]) ⇒ function | [baseMixin](#dc.baseMixin)
Set or get the add filter handler. The add filter handler is a function that adds a filter to
the chart's filter list. Using a custom add filter handler allows you to change the way filters
are added or perform additional work when adding a filter, e.g. when using a filter server other
than crossfilter.
Any changes should modify the `filters` array argument and return that array.
**Kind**: instance method of [baseMixin](#dc.baseMixin)
| Param | Type |
| --- | --- |
| [addFilterHandler] | function |
**Example**
```js
// default add filter handler
chart.addFilterHandler(function (filters, filter) {
filters.push(filter);
return filters;
});
// custom filter handler (no-op)
chart.addFilterHandler(function(filters, filter) {
return filters;
});
```
#### baseMixin.resetFilterHandler([resetFilterHandler]) ⇒ [baseMixin](#dc.baseMixin)
Set or get the reset filter handler. The reset filter handler is a function that resets the
chart's filter list by returning a new list. Using a custom reset filter handler allows you to
change the way filters are reset, or perform additional work when resetting the filters,
e.g. when using a filter server other than crossfilter.
This function should return an array.
**Kind**: instance method of [baseMixin](#dc.baseMixin)
| Param | Type |
| --- | --- |
| [resetFilterHandler] | function |
**Example**
```js
// default remove filter handler
function (filters) {
return [];
}
// custom filter handler (no-op)
chart.resetFilterHandler(function(filters) {
return filters;
});
```
#### baseMixin.filter([filter]) ⇒ [baseMixin](#dc.baseMixin)
Filter the chart by the given value or return the current filter if the input parameter is missing.
If the passed filter is not currently in the chart's filters, it is added to the filters by the
[addFilterHandler](#dc.baseMixin+addFilterHandler). If a filter exists already within the chart's
filters, it will be removed by the [removeFilterHandler](#dc.baseMixin+removeFilterHandler). If
a `null` value was passed at the filter, this denotes that the filters should be reset, and is performed
by the [resetFilterHandler](#dc.baseMixin+resetFilterHandler).
Once the filters array has been updated, the filters are applied to the crossfilter.dimension, using the
[filterHandler](#dc.baseMixin+filterHandler).
**Kind**: instance method of [baseMixin](#dc.baseMixin)
**See**
- [addFilterHandler](#dc.baseMixin+addFilterHandler)
- [removeFilterHandler](#dc.baseMixin+removeFilterHandler)
- [resetFilterHandler](#dc.baseMixin+resetFilterHandler)
- [filterHandler](#dc.baseMixin+filterHandler)
| Param | Type |
| --- | --- |
| [filter] | \* |
**Example**
```js
// filter by a single string
chart.filter('Sunday');
// filter by a single age
chart.filter(18);
// filter by range -- note the use of dc.filters.RangedFilter
// which is different from the regular crossfilter syntax, dimension.filter([15,20])
chart.filter(dc.filters.RangedFilter(15,20));
```
#### baseMixin.filters() ⇒ Array.<\*>
Returns all current filters. This method does not perform defensive cloning of the internal
filter array before returning, therefore any modification of the returned array will effect the
chart's internal filter storage.
**Kind**: instance method of [baseMixin](#dc.baseMixin)
#### baseMixin.onClick(datum)
This function is passed to d3 as the onClick handler for each chart. The default behavior is to
filter on the clicked datum (passed to the callback) and redraw the chart group.
**Kind**: instance method of [baseMixin](#dc.baseMixin)
| Param | Type |
| --- | --- |
| datum | \* |
#### baseMixin.filterHandler([filterHandler]) ⇒ function | [baseMixin](#dc.baseMixin)
Set or get the filter handler. The filter handler is a function that performs the filter action
on a specific dimension. Using a custom filter handler allows you to perform additional logic
before or after filtering.
**Kind**: instance method of [baseMixin](#dc.baseMixin)
**See**: [crossfilter.dimension.filter](https://github.com/square/crossfilter/wiki/API-Reference#dimension_filter)
| Param | Type |
| --- | --- |
| [filterHandler] | function |
**Example**
```js
// default filter handler
chart.filterHandler(function (dimension, filters) {
dimension.filter(null);
if (filters.length === 0) {
dimension.filter(null);
} else {
dimension.filterFunction(function (d) {
for (var i = 0; i < filters.length; i++) {
var filter = filters[i];
if (filter.isFiltered && filter.isFiltered(d)) {
return true;
} else if (filter <= d && filter >= d) {
return true;
}
}
return false;
});
}
return filters;
});
// custom filter handler
chart.filterHandler(function(dimension, filter){
var newFilter = filter + 10;
dimension.filter(newFilter);
return newFilter; // set the actual filter value to the new value
});
```
#### baseMixin.keyAccessor([keyAccessor]) ⇒ function | [baseMixin](#dc.baseMixin)
Set or get the key accessor function. The key accessor function is used to retrieve the key
value from the crossfilter group. Key values are used differently in different charts, for
example keys correspond to slices in a pie chart and x axis positions in a grid coordinate chart.
**Kind**: instance method of [baseMixin](#dc.baseMixin)
| Param | Type |
| --- | --- |
| [keyAccessor] | function |
**Example**
```js
// default key accessor
chart.keyAccessor(function(d) { return d.key; });
// custom key accessor for a multi-value crossfilter reduction
chart.keyAccessor(function(p) { return p.value.absGain; });
```
#### baseMixin.valueAccessor([valueAccessor]) ⇒ function | [baseMixin](#dc.baseMixin)
Set or get the value accessor function. The value accessor function is used to retrieve the
value from the crossfilter group. Group values are used differently in different charts, for
example values correspond to slice sizes in a pie chart and y axis positions in a grid
coordinate chart.
**Kind**: instance method of [baseMixin](#dc.baseMixin)
| Param | Type |
| --- | --- |
| [valueAccessor] | function |
**Example**
```js
// default value accessor
chart.valueAccessor(function(d) { return d.value; });
// custom value accessor for a multi-value crossfilter reduction
chart.valueAccessor(function(p) { return p.value.percentageGain; });
```
#### baseMixin.label([labelFunction], [enableLabels]) ⇒ function | [baseMixin](#dc.baseMixin)
Set or get the label function. The chart class will use this function to render labels for each
child element in the chart, e.g. slices in a pie chart or bubbles in a bubble chart. Not every
chart supports the label function, for example line chart does not use this function
at all. By default, enables labels; pass false for the second parameter if this is not desired.
**Kind**: instance method of [baseMixin](#dc.baseMixin)
| Param | Type | Default |
| --- | --- | --- |
| [labelFunction] | function | |
| [enableLabels] | Boolean | true |
**Example**
```js
// default label function just return the key
chart.label(function(d) { return d.key; });
// label function has access to the standard d3 data binding and can get quite complicated
chart.label(function(d) { return d.data.key + '(' + Math.floor(d.data.value / all.value() * 100) + '%)'; });
```
#### baseMixin.renderLabel([renderLabel]) ⇒ Boolean | [baseMixin](#dc.baseMixin)
Turn on/off label rendering
**Kind**: instance method of [baseMixin](#dc.baseMixin)
| Param | Type | Default |
| --- | --- | --- |
| [renderLabel] | Boolean | false |
#### baseMixin.title([titleFunction]) ⇒ function | [baseMixin](#dc.baseMixin)
Set or get the title function. The chart class will use this function to render the SVGElement title
(usually interpreted by browser as tooltips) for each child element in the chart, e.g. a slice
in a pie chart or a bubble in a bubble chart. Almost every chart supports the title function;
however in grid coordinate charts you need to turn off the brush in order to see titles, because
otherwise the brush layer will block tooltip triggering.
**Kind**: instance method of [baseMixin](#dc.baseMixin)
| Param | Type |
| --- | --- |
| [titleFunction] | function |
**Example**
```js
// default title function just return the key
chart.title(function(d) { return d.key + ': ' + d.value; });
// title function has access to the standard d3 data binding and can get quite complicated
chart.title(function(p) {
return p.key.getFullYear()
+ '\n'
+ 'Index Gain: ' + numberFormat(p.value.absGain) + '\n'
+ 'Index Gain in Percentage: ' + numberFormat(p.value.percentageGain) + '%\n'
+ 'Fluctuation / Index Ratio: ' + numberFormat(p.value.fluctuationPercentage) + '%';
});
```
#### baseMixin.renderTitle([renderTitle]) ⇒ Boolean | [baseMixin](#dc.baseMixin)
Turn on/off title rendering, or return the state of the render title flag if no arguments are
given.
**Kind**: instance method of [baseMixin](#dc.baseMixin)
| Param | Type | Default |
| --- | --- | --- |
| [renderTitle] | Boolean | true |
#### ~~baseMixin.renderlet(renderletFunction) ⇒ [baseMixin](#dc.baseMixin)~~
***Deprecated***
A renderlet is similar to an event listener on rendering event. Multiple renderlets can be added
to an individual chart. Each time a chart is rerendered or redrawn the renderlets are invoked
right after the chart finishes its transitions, giving you a way to modify the SVGElements.
Renderlet functions take the chart instance as the only input parameter and you can
use the dc API or use raw d3 to achieve pretty much any effect.
Use [on](#dc.baseMixin+on) with a 'renderlet' prefix.
Generates a random key for the renderlet, which makes it hard to remove.
**Kind**: instance method of [baseMixin](#dc.baseMixin)
| Param | Type |
| --- | --- |
| renderletFunction | function |
**Example**
```js
// do this instead of .renderlet(function(chart) { ... })
chart.on("renderlet", function(chart){
// mix of dc API and d3 manipulation
chart.select('g.y').style('display', 'none');
// its a closure so you can also access other chart variable available in the closure scope
moveChart.filter(chart.filter());
});
```
#### baseMixin.chartGroup([chartGroup]) ⇒ String | [baseMixin](#dc.baseMixin)
Get or set the chart group to which this chart belongs. Chart groups are rendered or redrawn
together since it is expected they share the same underlying crossfilter data set.
**Kind**: instance method of [baseMixin](#dc.baseMixin)
| Param | Type |
| --- | --- |
| [chartGroup] | String |
#### baseMixin.expireCache() ⇒ [baseMixin](#dc.baseMixin)
Expire the internal chart cache. dc charts cache some data internally on a per chart basis to
speed up rendering and avoid unnecessary calculation; however it might be useful to clear the
cache if you have changed state which will affect rendering. For example if you invoke the
[crossfilter.add](https://github.com/square/crossfilter/wiki/API-Reference#crossfilter_add)
function or reset group or dimension after rendering it is a good idea to
clear the cache to make sure charts are rendered properly.
**Kind**: instance method of [baseMixin](#dc.baseMixin)
#### baseMixin.legend([legend]) ⇒ [legend](#dc.legend) | [baseMixin](#dc.baseMixin)
Attach a dc.legend widget to this chart. The legend widget will automatically draw legend labels
based on the color setting and names associated with each group.
**Kind**: instance method of [baseMixin](#dc.baseMixin)
| Param | Type |
| --- | --- |
| [legend] | [legend](#dc.legend) |
**Example**
```js
chart.legend(dc.legend().x(400).y(10).itemHeight(13).gap(5))
```
#### baseMixin.chartID() ⇒ String
Returns the internal numeric ID of the chart.
**Kind**: instance method of [baseMixin](#dc.baseMixin)
#### baseMixin.options(opts) ⇒ [baseMixin](#dc.baseMixin)
Set chart options using a configuration object. Each key in the object will cause the method of
the same name to be called with the value to set that attribute for the chart.
**Kind**: instance method of [baseMixin](#dc.baseMixin)
| Param | Type |
| --- | --- |
| opts | Object |
**Example**
```js
chart.options({dimension: myDimension, group: myGroup});
```
#### baseMixin.on(event, listener) ⇒ [baseMixin](#dc.baseMixin)
All dc chart instance supports the following listeners.
Supports the following events:
* `renderlet` - This listener function will be invoked after transitions after redraw and render. Replaces the
deprecated [renderlet](#dc.baseMixin+renderlet) method.
* `pretransition` - Like `.on('renderlet', ...)` but the event is fired before transitions start.
* `preRender` - This listener function will be invoked before chart rendering.
* `postRender` - This listener function will be invoked after chart finish rendering including
all renderlets' logic.
* `preRedraw` - This listener function will be invoked before chart redrawing.
* `postRedraw` - This listener function will be invoked after chart finish redrawing
including all renderlets' logic.
* `filtered` - This listener function will be invoked after a filter is applied, added or removed.
* `zoomed` - This listener function will be invoked after a zoom is triggered.
**Kind**: instance method of [baseMixin](#dc.baseMixin)
**See**: [d3.dispatch.on](https://github.com/mbostock/d3/wiki/Internals#dispatch_on)
| Param | Type |
| --- | --- |
| event | String |
| listener | function |
**Example**
```js
.on('renderlet', function(chart, filter){...})
.on('pretransition', function(chart, filter){...})
.on('preRender', function(chart){...})
.on('postRender', function(chart){...})
.on('preRedraw', function(chart){...})
.on('postRedraw', function(chart){...})
.on('filtered', function(chart, filter){...})
.on('zoomed', function(chart, filter){...})
```
### dc.marginMixin ⇒ [marginMixin](#dc.marginMixin)
Margin is a mixin that provides margin utility functions for both the Row Chart and Coordinate Grid
Charts.
**Kind**: static mixin of [dc](#dc)
| Param | Type |
| --- | --- |
| _chart | Object |
#### marginMixin.margins([margins]) ⇒ Object | [marginMixin](#dc.marginMixin)
Get or set the margins for a particular coordinate grid chart instance. The margins is stored as
an associative Javascript array.
**Kind**: instance method of [marginMixin](#dc.marginMixin)
| Param | Type | Default |
| --- | --- | --- |
| [margins] | Object | {top: 10, right: 50, bottom: 30, left: 30} |
**Example**
```js
var leftMargin = chart.margins().left; // 30 by default
chart.margins().left = 50;
leftMargin = chart.margins().left; // now 50
```
### dc.colorMixin ⇒ [colorMixin](#dc.colorMixin)
The Color Mixin is an abstract chart functional class providing universal coloring support
as a mix-in for any concrete chart implementation.
**Kind**: static mixin of [dc](#dc)
| Param | Type |
| --- | --- |
| _chart | Object |
* [.colorMixin](#dc.colorMixin) ⇒ [colorMixin](#dc.colorMixin)
* [.colors([colorScale])](#dc.colorMixin+colors) ⇒ d3.scale | [colorMixin](#dc.colorMixin)
* [.ordinalColors(r)](#dc.colorMixin+ordinalColors) ⇒ [colorMixin](#dc.colorMixin)
* [.linearColors(r)](#dc.colorMixin+linearColors) ⇒ [colorMixin](#dc.colorMixin)
* [.colorAccessor([colorAccessor])](#dc.colorMixin+colorAccessor) ⇒ function | [colorMixin](#dc.colorMixin)
* [.colorDomain([domain])](#dc.colorMixin+colorDomain) ⇒ Array.<String> | [colorMixin](#dc.colorMixin)
* [.calculateColorDomain()](#dc.colorMixin+calculateColorDomain) ⇒ [colorMixin](#dc.colorMixin)
* [.getColor(d, [i])](#dc.colorMixin+getColor) ⇒ String
* [.colorCalculator([colorCalculator])](#dc.colorMixin+colorCalculator) ⇒ \*
#### colorMixin.colors([colorScale]) ⇒ d3.scale | [colorMixin](#dc.colorMixin)
Retrieve current color scale or set a new color scale. This methods accepts any function that
operates like a d3 scale.
**Kind**: instance method of [colorMixin](#dc.colorMixin)
**See**: [d3.scale](http://github.com/mbostock/d3/wiki/Scales)
| Param | Type | Default |
| --- | --- | --- |
| [colorScale] | d3.scale | d3.scale.category20c() |
**Example**
```js
// alternate categorical scale
chart.colors(d3.scale.category20b());
// ordinal scale
chart.colors(d3.scale.ordinal().range(['red','green','blue']));
// convenience method, the same as above
chart.ordinalColors(['red','green','blue']);
// set a linear scale
chart.linearColors(["#4575b4", "#ffffbf", "#a50026"]);
```
#### colorMixin.ordinalColors(r) ⇒ [colorMixin](#dc.colorMixin)
Convenience method to set the color scale to
[d3.scale.ordinal](https://github.com/mbostock/d3/wiki/Ordinal-Scales#ordinal) with
range `r`.
**Kind**: instance method of [colorMixin](#dc.colorMixin)
| Param | Type |
| --- | --- |
| r | Array.<String> |
#### colorMixin.linearColors(r) ⇒ [colorMixin](#dc.colorMixin)
Convenience method to set the color scale to an Hcl interpolated linear scale with range `r`.
**Kind**: instance method of [colorMixin](#dc.colorMixin)
| Param | Type |
| --- | --- |
| r | Array.<Number> |
#### colorMixin.colorAccessor([colorAccessor]) ⇒ function | [colorMixin](#dc.colorMixin)
Set or the get color accessor function. This function will be used to map a data point in a
crossfilter group to a color value on the color scale. The default function uses the key
accessor.
**Kind**: instance method of [colorMixin](#dc.colorMixin)
| Param | Type |
| --- | --- |
| [colorAccessor] | function |
**Example**
```js
// default index based color accessor
.colorAccessor(function (d, i){return i;})
// color accessor for a multi-value crossfilter reduction
.colorAccessor(function (d){return d.value.absGain;})
```
#### colorMixin.colorDomain([domain]) ⇒ Array.<String> | [colorMixin](#dc.colorMixin)
Set or get the current domain for the color mapping function. The domain must be supplied as an
array.
Note: previously this method accepted a callback function. Instead you may use a custom scale
set by [.colors](#dc.colorMixin+colors).
**Kind**: instance method of [colorMixin](#dc.colorMixin)
| Param | Type |
| --- | --- |
| [domain] | Array.<String> |
#### colorMixin.calculateColorDomain() ⇒ [colorMixin](#dc.colorMixin)
Set the domain by determining the min and max values as retrieved by
[.colorAccessor](#dc.colorMixin+colorAccessor) over the chart's dataset.
**Kind**: instance method of [colorMixin](#dc.colorMixin)
#### colorMixin.getColor(d, [i]) ⇒ String
Get the color for the datum d and counter i. This is used internally by charts to retrieve a color.
**Kind**: instance method of [colorMixin](#dc.colorMixin)
| Param | Type |
| --- | --- |
| d | \* |
| [i] | Number |
#### colorMixin.colorCalculator([colorCalculator]) ⇒ \*
Get the color for the datum d and counter i. This is used internally by charts to retrieve a color.
**Kind**: instance method of [colorMixin](#dc.colorMixin)
| Param | Type |
| --- | --- |
| [colorCalculator] | \* |
### dc.coordinateGridMixin ⇒ [coordinateGridMixin](#dc.coordinateGridMixin)
Coordinate Grid is an abstract base chart designed to support a number of coordinate grid based
concrete chart types, e.g. bar chart, line chart, and bubble chart.
**Kind**: static mixin of [dc](#dc)
**Mixes**: [colorMixin](#dc.colorMixin), [marginMixin](#dc.marginMixin), [baseMixin](#dc.baseMixin)
| Param | Type |
| --- | --- |
| _chart | Object |
* [.coordinateGridMixin](#dc.coordinateGridMixin) ⇒ [coordinateGridMixin](#dc.coordinateGridMixin)
* [.rescale()](#dc.coordinateGridMixin+rescale) ⇒ [coordinateGridMixin](#dc.coordinateGridMixin)
* [.rangeChart([rangeChart])](#dc.coordinateGridMixin+rangeChart) ⇒ [coordinateGridMixin](#dc.coordinateGridMixin)
* [.zoomScale([extent])](#dc.coordinateGridMixin+zoomScale) ⇒ Array.<(Number\|Date)> | [coordinateGridMixin](#dc.coordinateGridMixin)
* [.zoomOutRestrict([zoomOutRestrict])](#dc.coordinateGridMixin+zoomOutRestrict) ⇒ Boolean | [coordinateGridMixin](#dc.coordinateGridMixin)
* [.g([gElement])](#dc.coordinateGridMixin+g) ⇒ SVGElement | [coordinateGridMixin](#dc.coordinateGridMixin)
* [.mouseZoomable([mouseZoomable])](#dc.coordinateGridMixin+mouseZoomable) ⇒ Boolean | [coordinateGridMixin](#dc.coordinateGridMixin)
* [.chartBodyG([chartBodyG])](#dc.coordinateGridMixin+chartBodyG) ⇒ SVGElement
* [.x([xScale])](#dc.coordinateGridMixin+x) ⇒ d3.scale | [coordinateGridMixin](#dc.coordinateGridMixin)
* [.xUnits([xUnits])](#dc.coordinateGridMixin+xUnits) ⇒ function | [coordinateGridMixin](#dc.coordinateGridMixin)
* [.xAxis([xAxis])](#dc.coordinateGridMixin+xAxis) ⇒ d3.svg.axis | [coordinateGridMixin](#dc.coordinateGridMixin)
* [.elasticX([elasticX])](#dc.coordinateGridMixin+elasticX) ⇒ Boolean | [coordinateGridMixin](#dc.coordinateGridMixin)
* [.xAxisPadding([padding])](#dc.coordinateGridMixin+xAxisPadding) ⇒ Number | String | [coordinateGridMixin](#dc.coordinateGridMixin)
* [.xUnitCount()](#dc.coordinateGridMixin+xUnitCount) ⇒ Number
* [.useRightYAxis([useRightYAxis])](#dc.coordinateGridMixin+useRightYAxis) ⇒ Boolean | [coordinateGridMixin](#dc.coordinateGridMixin)
* [.isOrdinal()](#dc.coordinateGridMixin+isOrdinal) ⇒ Boolean
* [.xAxisLabel([labelText], [padding])](#dc.coordinateGridMixin+xAxisLabel) ⇒ String
* [.yAxisLabel([labelText], [padding])](#dc.coordinateGridMixin+yAxisLabel) ⇒ String | [coordinateGridMixin](#dc.coordinateGridMixin)
* [.y([yScale])](#dc.coordinateGridMixin+y) ⇒ d3.scale | [coordinateGridMixin](#dc.coordinateGridMixin)
* [.yAxis([yAxis])](#dc.coordinateGridMixin+yAxis) ⇒ d3.svg.axis | [coordinateGridMixin](#dc.coordinateGridMixin)
* [.elasticY([elasticY])](#dc.coordinateGridMixin+elasticY) ⇒ Boolean | [coordinateGridMixin](#dc.coordinateGridMixin)
* [.renderHorizontalGridLines([renderHorizontalGridLines])](#dc.coordinateGridMixin+renderHorizontalGridLines) ⇒ Boolean | [coordinateGridMixin](#dc.coordinateGridMixin)
* [.renderVerticalGridLines([renderVerticalGridLines])](#dc.coordinateGridMixin+renderVerticalGridLines) ⇒ Boolean | [coordinateGridMixin](#dc.coordinateGridMixin)
* [.xAxisMin()](#dc.coordinateGridMixin+xAxisMin) ⇒ \*
* [.xAxisMax()](#dc.coordinateGridMixin+xAxisMax) ⇒ \*
* [.yAxisMin()](#dc.coordinateGridMixin+yAxisMin) ⇒ \*
* [.yAxisMax()](#dc.coordinateGridMixin+yAxisMax) ⇒ \*
* [.yAxisPadding([padding])](#dc.coordinateGridMixin+yAxisPadding) ⇒ Number | [coordinateGridMixin](#dc.coordinateGridMixin)
* [.round([round])](#dc.coordinateGridMixin+round) ⇒ function | [coordinateGridMixin](#dc.coordinateGridMixin)
* [.clipPadding([padding])](#dc.coordinateGridMixin+clipPadding) ⇒ Number | [coordinateGridMixin](#dc.coordinateGridMixin)
* [.focus([range])](#dc.coordinateGridMixin+focus)
* [.brushOn([brushOn])](#dc.coordinateGridMixin+brushOn) ⇒ Boolean | [coordinateGridMixin](#dc.coordinateGridMixin)
#### coordinateGridMixin.rescale() ⇒ [coordinateGridMixin](#dc.coordinateGridMixin)
When changing the domain of the x or y scale, it is necessary to tell the chart to recalculate
and redraw the axes. (`.rescale()` is called automatically when the x or y scale is replaced
with [.x()](dc.coordinateGridMixin+x) or [.y()](#dc.coordinateGridMixin+y), and has
no effect on elastic scales.)
**Kind**: instance method of [coordinateGridMixin](#dc.coordinateGridMixin)
#### coordinateGridMixin.rangeChart([rangeChart]) ⇒ [coordinateGridMixin](#dc.coordinateGridMixin)
Get or set the range selection chart associated with this instance. Setting the range selection
chart using this function will automatically update its selection brush when the current chart
zooms in. In return the given range chart will also automatically attach this chart as its focus
chart hence zoom in when range brush updates. See the [Nasdaq 100
Index](http://dc-js.github.com/dc.js/) example for this effect in action.
**Kind**: instance method of [coordinateGridMixin](#dc.coordinateGridMixin)
| Param | Type |
| --- | --- |
| [rangeChart] | [coordinateGridMixin](#dc.coordinateGridMixin) |
#### coordinateGridMixin.zoomScale([extent]) ⇒ Array.<(Number\|Date)> | [coordinateGridMixin](#dc.coordinateGridMixin)
Get or set the scale extent for mouse zooms.
**Kind**: instance method of [coordinateGridMixin](#dc.coordinateGridMixin)
| Param | Type | Default |
| --- | --- | --- |
| [extent] | Array.<(Number\|Date)> | [1, Infinity] |
#### coordinateGridMixin.zoomOutRestrict([zoomOutRestrict]) ⇒ Boolean | [coordinateGridMixin](#dc.coordinateGridMixin)
Get or set the zoom restriction for the chart. If true limits the zoom to origional domain of the chart.
**Kind**: instance method of [coordinateGridMixin](#dc.coordinateGridMixin)
| Param | Type | Default |
| --- | --- | --- |
| [zoomOutRestrict] | Boolean | true |
#### coordinateGridMixin.g([gElement]) ⇒ SVGElement | [coordinateGridMixin](#dc.coordinateGridMixin)
Get or set the root g element. This method is usually used to retrieve the g element in order to
overlay custom svg drawing programatically. **Caution**: The root g element is usually generated
by dc.js internals, and resetting it might produce unpredictable result.
**Kind**: instance method of [coordinateGridMixin](#dc.coordinateGridMixin)
| Param | Type |
| --- | --- |
| [gElement] | SVGElement |
#### coordinateGridMixin.mouseZoomable([mouseZoomable]) ⇒ Boolean | [coordinateGridMixin](#dc.coordinateGridMixin)
Set or get mouse zoom capability flag (default: false). When turned on the chart will be
zoomable using the mouse wheel. If the range selector chart is attached zooming will also update
the range selection brush on the associated range selector chart.
**Kind**: instance method of [coordinateGridMixin](#dc.coordinateGridMixin)
| Param | Type | Default |
| --- | --- | --- |
| [mouseZoomable] | Boolean | false |
#### coordinateGridMixin.chartBodyG([chartBodyG]) ⇒ SVGElement
Retrieve the svg group for the chart body.
**Kind**: instance method of [coordinateGridMixin](#dc.coordinateGridMixin)
| Param | Type |
| --- | --- |
| [chartBodyG] | SVGElement |
#### coordinateGridMixin.x([xScale]) ⇒ d3.scale | [coordinateGridMixin](#dc.coordinateGridMixin)
**mandatory**
Get or set the x scale. The x scale can be any d3
[quantitive scale](https://github.com/mbostock/d3/wiki/Quantitative-Scales) or
[ordinal scale](https://github.com/mbostock/d3/wiki/Ordinal-Scales).
**Kind**: instance method of [coordinateGridMixin](#dc.coordinateGridMixin)
**See**: [d3.scale](http://github.com/mbostock/d3/wiki/Scales)
| Param | Type |
| --- | --- |
| [xScale] | d3.scale |
**Example**
```js
// set x to a linear scale
chart.x(d3.scale.linear().domain([-2500, 2500]))
// set x to a time scale to generate histogram
chart.x(d3.time.scale().domain([new Date(1985, 0, 1), new Date(2012, 11, 31)]))
```
#### coordinateGridMixin.xUnits([xUnits]) ⇒ function | [coordinateGridMixin](#dc.coordinateGridMixin)
Set or get the xUnits function. The coordinate grid chart uses the xUnits function to calculate
the number of data projections on x axis such as the number of bars for a bar chart or the
number of dots for a line chart. This function is expected to return a Javascript array of all
data points on x axis, or the number of points on the axis. [d3 time range functions
d3.time.days, d3.time.months, and
d3.time.years](https://github.com/mbostock/d3/wiki/Time-Intervals#aliases) are all valid xUnits
function. dc.js also provides a few units function, see the [Utilities](#dc.utils) section for
a list of built-in units functions. The default xUnits function is dc.units.integers.
**Kind**: instance method of [coordinateGridMixin](#dc.coordinateGridMixin)
**Todo**
- [ ] Add docs for utilities
| Param | Type |
| --- | --- |
| [xUnits] | function |
**Example**
```js
// set x units to count days
chart.xUnits(d3.time.days);
// set x units to count months
chart.xUnits(d3.time.months);
// A custom xUnits function can be used as long as it follows the following interface:
// units in integer
function(start, end, xDomain) {
// simply calculates how many integers in the domain
return Math.abs(end - start);
};
// fixed units
function(start, end, xDomain) {
// be aware using fixed units will disable the focus/zoom ability on the chart
return 1000;
```
#### coordinateGridMixin.xAxis([xAxis]) ⇒ d3.svg.axis | [coordinateGridMixin](#dc.coordinateGridMixin)
Set or get the x axis used by a particular coordinate grid chart instance. This function is most
useful when x axis customization is required. The x axis in dc.js is an instance of a [d3
axis object](https://github.com/mbostock/d3/wiki/SVG-Axes#wiki-axis); therefore it supports any
valid d3 axis manipulation. **Caution**: The x axis is usually generated internally by dc;
resetting it may cause unexpected results.
**Kind**: instance method of [coordinateGridMixin](#dc.coordinateGridMixin)
**See**: [d3.svg.axis](http://github.com/mbostock/d3/wiki/SVG-Axes)
| Param | Type | Default |
| --- | --- | --- |
| [xAxis] | d3.svg.axis | d3.svg.axis().orient('bottom') |
**Example**
```js
// customize x axis tick format
chart.xAxis().tickFormat(function(v) {return v + '%';});
// customize x axis tick values
chart.xAxis().tickValues([0, 100, 200, 300]);
```
#### coordinateGridMixin.elasticX([elasticX]) ⇒ Boolean | [coordinateGridMixin](#dc.coordinateGridMixin)
Turn on/off elastic x axis behavior. If x axis elasticity is turned on, then the grid chart will
attempt to recalculate the x axis range whenever a redraw event is triggered.
**Kind**: instance method of [coordinateGridMixin](#dc.coordinateGridMixin)
| Param | Type | Default |
| --- | --- | --- |
| [elasticX] | Boolean | false |
#### coordinateGridMixin.xAxisPadding([padding]) ⇒ Number | String | [coordinateGridMixin](#dc.coordinateGridMixin)
Set or get x axis padding for the elastic x axis. The padding will be added to both end of the x
axis if elasticX is turned on; otherwise it is ignored.
padding can be an integer or percentage in string (e.g. '10%'). Padding can be applied to
number or date x axes. When padding a date axis, an integer represents number of days being padded
and a percentage string will be treated the same as an integer.
**Kind**: instance method of [coordinateGridMixin](#dc.coordinateGridMixin)
| Param | Type | Default |
| --- | --- | --- |
| [padding] | Number | String | 0 |
#### coordinateGridMixin.xUnitCount() ⇒ Number
Returns the number of units displayed on the x axis using the unit measure configured by
.xUnits.
**Kind**: instance method of [coordinateGridMixin](#dc.coordinateGridMixin)
#### coordinateGridMixin.useRightYAxis([useRightYAxis]) ⇒ Boolean | [coordinateGridMixin](#dc.coordinateGridMixin)
Gets or sets whether the chart should be drawn with a right axis instead of a left axis. When
used with a chart in a composite chart, allows both left and right Y axes to be shown on a
chart.
**Kind**: instance method of [coordinateGridMixin](#dc.coordinateGridMixin)
| Param | Type | Default |
| --- | --- | --- |
| [useRightYAxis] | Boolean | false |
#### coordinateGridMixin.isOrdinal() ⇒ Boolean
Returns true if the chart is using ordinal xUnits ([ordinal](#dc.units.ordinal), or false
otherwise. Most charts behave differently with ordinal data and use the result of this method to
trigger the appropriate logic.
**Kind**: instance method of [coordinateGridMixin](#dc.coordinateGridMixin)
#### coordinateGridMixin.xAxisLabel([labelText], [padding]) ⇒ String
Set or get the x axis label. If setting the label, you may optionally include additional padding to
the margin to make room for the label. By default the padded is set to 12 to accomodate the text height.
**Kind**: instance method of [coordinateGridMixin](#dc.coordinateGridMixin)
| Param | Type | Default |
| --- | --- | --- |
| [labelText] | String | |
| [padding] | Number | 12 |
#### coordinateGridMixin.yAxisLabel([labelText], [padding]) ⇒ String | [coordinateGridMixin](#dc.coordinateGridMixin)
Set or get the y axis label. If setting the label, you may optionally include additional padding
to the margin to make room for the label. By default the padded is set to 12 to accomodate the
text height.
**Kind**: instance method of [coordinateGridMixin](#dc.coordinateGridMixin)
| Param | Type | Default |
| --- | --- | --- |
| [labelText] | String | |
| [padding] | Number | 12 |
#### coordinateGridMixin.y([yScale]) ⇒ d3.scale | [coordinateGridMixin](#dc.coordinateGridMixin)
Get or set the y scale. The y scale is typically automatically determined by the chart implementation.
**Kind**: instance method of [coordinateGridMixin](#dc.coordinateGridMixin)
**See**: [d3.scale](http://github.com/mbostock/d3/wiki/Scales)
| Param | Type |
| --- | --- |
| [yScale] | d3.scale |
#### coordinateGridMixin.yAxis([yAxis]) ⇒ d3.svg.axis | [coordinateGridMixin](#dc.coordinateGridMixin)
Set or get the y axis used by the coordinate grid chart instance. This function is most useful
when y axis customization is required. The y axis in dc.js is simply an instance of a [d3 axis
object](https://github.com/mbostock/d3/wiki/SVG-Axes#wiki-_axis); therefore it supports any
valid d3 axis manipulation. **Caution**: The y axis is usually generated internally by dc;
resetting it may cause unexpected results.
**Kind**: instance method of [coordinateGridMixin](#dc.coordinateGridMixin)
**See**: [d3.svg.axis](http://github.com/mbostock/d3/wiki/SVG-Axes)
| Param | Type | Default |
| --- | --- | --- |
| [yAxis] | d3.svg.axis | d3.svg.axis().orient('left') |
**Example**
```js
// customize y axis tick format
chart.yAxis().tickFormat(function(v) {return v + '%';});
// customize y axis tick values
chart.yAxis().tickValues([0, 100, 200, 300]);
```
#### coordinateGridMixin.elasticY([elasticY]) ⇒ Boolean | [coordinateGridMixin](#dc.coordinateGridMixin)
Turn on/off elastic y axis behavior. If y axis elasticity is turned on, then the grid chart will
attempt to recalculate the y axis range whenever a redraw event is triggered.
**Kind**: instance method of [coordinateGridMixin](#dc.coordinateGridMixin)
| Param | Type | Default |
| --- | --- | --- |
| [elasticY] | Boolean | false |
#### coordinateGridMixin.renderHorizontalGridLines([renderHorizontalGridLines]) ⇒ Boolean | [coordinateGridMixin](#dc.coordinateGridMixin)
Turn on/off horizontal grid lines.
**Kind**: instance method of [coordinateGridMixin](#dc.coordinateGridMixin)
| Param | Type | Default |
| --- | --- | --- |
| [renderHorizontalGridLines] | Boolean | false |
#### coordinateGridMixin.renderVerticalGridLines([renderVerticalGridLines]) ⇒ Boolean | [coordinateGridMixin](#dc.coordinateGridMixin)
Turn on/off vertical grid lines.
**Kind**: instance method of [coordinateGridMixin](#dc.coordinateGridMixin)
| Param | Type | Default |
| --- | --- | --- |
| [renderVerticalGridLines] | Boolean | false |
#### coordinateGridMixin.xAxisMin() ⇒ \*
Calculates the minimum x value to display in the chart. Includes xAxisPadding if set.
**Kind**: instance method of [coordinateGridMixin](#dc.coordinateGridMixin)
#### coordinateGridMixin.xAxisMax() ⇒ \*
Calculates the maximum x value to display in the chart. Includes xAxisPadding if set.
**Kind**: instance method of [coordinateGridMixin](#dc.coordinateGridMixin)
#### coordinateGridMixin.yAxisMin() ⇒ \*
Calculates the minimum y value to display in the chart. Includes yAxisPadding if set.
**Kind**: instance method of [coordinateGridMixin](#dc.coordinateGridMixin)
#### coordinateGridMixin.yAxisMax() ⇒ \*
Calculates the maximum y value to display in the chart. Includes yAxisPadding if set.
**Kind**: instance method of [coordinateGridMixin](#dc.coordinateGridMixin)
#### coordinateGridMixin.yAxisPadding([padding]) ⇒ Number | [coordinateGridMixin](#dc.coordinateGridMixin)
Set or get y axis padding for the elastic y axis. The padding will be added to the top of the y
axis if elasticY is turned on; otherwise it is ignored.
padding can be an integer or percentage in string (e.g. '10%'). Padding can be applied to
number or date axes. When padding a date axis, an integer represents number of days being padded
and a percentage string will be treated the same as an integer.
**Kind**: instance method of [coordinateGridMixin](#dc.coordinateGridMixin)
| Param | Type | Default |
| --- | --- | --- |
| [padding] | Number | String | 0 |
#### coordinateGridMixin.round([round]) ⇒ function | [coordinateGridMixin](#dc.coordinateGridMixin)
Set or get the rounding function used to quantize the selection when brushing is enabled.
**Kind**: instance method of [coordinateGridMixin](#dc.coordinateGridMixin)
| Param | Type |
| --- | --- |
| [round] | function |
**Example**
```js
// set x unit round to by month, this will make sure range selection brush will
// select whole months
chart.round(d3.time.month.round);
```
#### coordinateGridMixin.clipPadding([padding]) ⇒ Number | [coordinateGridMixin](#dc.coordinateGridMixin)
Get or set the padding in pixels for the clip path. Once set padding will be applied evenly to
the top, left, right, and bottom when the clip path is generated. If set to zero, the clip area
will be exactly the chart body area minus the margins.
**Kind**: instance method of [coordinateGridMixin](#dc.coordinateGridMixin)
| Param | Type | Default |
| --- | --- | --- |
| [padding] | Number | 5 |
#### coordinateGridMixin.focus([range])
Zoom this chart to focus on the given range. The given range should be an array containing only
2 elements (`[start, end]`) defining a range in the x domain. If the range is not given or set
to null, then the zoom will be reset. _For focus to work elasticX has to be turned off;
otherwise focus will be ignored.
**Kind**: instance method of [coordinateGridMixin](#dc.coordinateGridMixin)
| Param | Type |
| --- | --- |
| [range] | Array.<Number> |
**Example**
```js
chart.on('renderlet', function(chart) {
// smooth the rendering through event throttling
dc.events.trigger(function(){
// focus some other chart to the range selected by user on this chart
someOtherChart.focus(chart.filter());
});
})
```
#### coordinateGridMixin.brushOn([brushOn]) ⇒ Boolean | [coordinateGridMixin](#dc.coordinateGridMixin)
Turn on/off the brush-based range filter. When brushing is on then user can drag the mouse
across a chart with a quantitative scale to perform range filtering based on the extent of the
brush, or click on the bars of an ordinal bar chart or slices of a pie chart to filter and
un-filter them. However turning on the brush filter will disable other interactive elements on
the chart such as highlighting, tool tips, and reference lines. Zooming will still be possible
if enabled, but only via scrolling (panning will be disabled.)
**Kind**: instance method of [coordinateGridMixin](#dc.coordinateGridMixin)
| Param | Type | Default |
| --- | --- | --- |
| [brushOn] | Boolean | true |
### dc.stackMixin ⇒ [stackMixin](#dc.stackMixin)
Stack Mixin is an mixin that provides cross-chart support of stackability using d3.layout.stack.
**Kind**: static mixin of [dc](#dc)
| Param | Type |
| --- | --- |
| _chart | Object |
* [.stackMixin](#dc.stackMixin) ⇒ [stackMixin](#dc.stackMixin)
* [.stack(group, [name], [accessor])](#dc.stackMixin+stack) ⇒ Array.<{group: crossfilter.group, name: String, accessor: function()}> | [stackMixin](#dc.stackMixin)
* [.hidableStacks([hidableStacks])](#dc.stackMixin+hidableStacks) ⇒ Boolean | [stackMixin](#dc.stackMixin)
* [.hideStack(stackName)](#dc.stackMixin+hideStack) ⇒ [stackMixin](#dc.stackMixin)
* [.showStack(stackName)](#dc.stackMixin+showStack) ⇒ [stackMixin](#dc.stackMixin)
* [.title([stackName], [titleAccessor])](#dc.stackMixin+title) ⇒ String | [stackMixin](#dc.stackMixin)
* [.stackLayout([stack])](#dc.stackMixin+stackLayout) ⇒ function | [stackMixin](#dc.stackMixin)
#### stackMixin.stack(group, [name], [accessor]) ⇒ Array.<{group: crossfilter.group, name: String, accessor: function()}> | [stackMixin](#dc.stackMixin)
Stack a new crossfilter group onto this chart with an optional custom value accessor. All stacks
in the same chart will share the same key accessor and therefore the same set of keys.
For example, in a stacked bar chart, the bars of each stack will be positioned using the same set
of keys on the x axis, while stacked vertically. If name is specified then it will be used to
generate the legend label.
**Kind**: instance method of [stackMixin](#dc.stackMixin)
**See**: [crossfilter.group](https://github.com/square/crossfilter/wiki/API-Reference#group-map-reduce)
| Param | Type |
| --- | --- |
| group | crossfilter.group |
| [name] | String |
| [accessor] | function |
**Example**
```js
// stack group using default accessor
chart.stack(valueSumGroup)
// stack group using custom accessor
.stack(avgByDayGroup, function(d){return d.value.avgByDay;});
```
#### stackMixin.hidableStacks([hidableStacks]) ⇒ Boolean | [stackMixin](#dc.stackMixin)
Allow named stacks to be hidden or shown by clicking on legend items.
This does not affect the behavior of hideStack or showStack.
**Kind**: instance method of [stackMixin](#dc.stackMixin)
| Param | Type | Default |
| --- | --- | --- |
| [hidableStacks] | Boolean | false |
#### stackMixin.hideStack(stackName) ⇒ [stackMixin](#dc.stackMixin)
Hide all stacks on the chart with the given name.
The chart must be re-rendered for this change to appear.
**Kind**: instance method of [stackMixin](#dc.stackMixin)
| Param | Type |
| --- | --- |
| stackName | String |
#### stackMixin.showStack(stackName) ⇒ [stackMixin](#dc.stackMixin)
Show all stacks on the chart with the given name.
The chart must be re-rendered for this change to appear.
**Kind**: instance method of [stackMixin](#dc.stackMixin)
| Param | Type |
| --- | --- |
| stackName | String |
#### stackMixin.title([stackName], [titleAccessor]) ⇒ String | [stackMixin](#dc.stackMixin)
Set or get the title function. Chart class will use this function to render svg title (usually interpreted by
browser as tooltips) for each child element in the chart, i.e. a slice in a pie chart or a bubble in a bubble chart.
Almost every chart supports title function however in grid coordinate chart you need to turn off brush in order to
use title otherwise the brush layer will block tooltip trigger.
If the first argument is a stack name, the title function will get or set the title for that stack. If stackName
is not provided, the first stack is implied.
**Kind**: instance method of [stackMixin](#dc.stackMixin)
| Param | Type |
| --- | --- |
| [stackName] | String |
| [titleAccessor] | function |
**Example**
```js
// set a title function on 'first stack'
chart.title('first stack', function(d) { return d.key + ': ' + d.value; });
// get a title function from 'second stack'
var secondTitleFunction = chart.title('second stack');
```
#### stackMixin.stackLayout([stack]) ⇒ function | [stackMixin](#dc.stackMixin)
Gets or sets the stack layout algorithm, which computes a baseline for each stack and
propagates it to the next
**Kind**: instance method of [stackMixin](#dc.stackMixin)
**See**: [d3.layout.stack](http://github.com/mbostock/d3/wiki/Stack-Layout)
| Param | Type | Default |
| --- | --- | --- |
| [stack] | function | d3.layout.stack |
### dc.capMixin ⇒ [capMixin](#dc.capMixin)
Cap is a mixin that groups small data elements below a _cap_ into an *others* grouping for both the
Row and Pie Charts.
The top ordered elements in the group up to the cap amount will be kept in the chart, and the rest
will be replaced with an *others* element, with value equal to the sum of the replaced values. The
keys of the elements below the cap limit are recorded in order to filter by those keys when the
others* element is clicked.
**Kind**: static mixin of [dc](#dc)
| Param | Type |
| --- | --- |
| _chart | Object |
* [.capMixin](#dc.capMixin) ⇒ [capMixin](#dc.capMixin)
* [.cap([count])](#dc.capMixin+cap) ⇒ Number | [capMixin](#dc.capMixin)
* [.othersLabel([label])](#dc.capMixin+othersLabel) ⇒ String | [capMixin](#dc.capMixin)
* [.othersGrouper([grouperFunction])](#dc.capMixin+othersGrouper) ⇒ function | [capMixin](#dc.capMixin)
#### capMixin.cap([count]) ⇒ Number | [capMixin](#dc.capMixin)
Get or set the count of elements to that will be included in the cap.
**Kind**: instance method of [capMixin](#dc.capMixin)
| Param | Type | Default |
| --- | --- | --- |
| [count] | Number | Infinity |
#### capMixin.othersLabel([label]) ⇒ String | [capMixin](#dc.capMixin)
Get or set the label for *Others* slice when slices cap is specified
**Kind**: instance method of [capMixin](#dc.capMixin)
| Param | Type | Default |
| --- | --- | --- |
| [label] | String | "Others" |
#### capMixin.othersGrouper([grouperFunction]) ⇒ function | [capMixin](#dc.capMixin)
Get or set the grouper function that will perform the insertion of data for the *Others* slice
if the slices cap is specified. If set to a falsy value, no others will be added. By default the
grouper function computes the sum of all values below the cap.
**Kind**: instance method of [capMixin](#dc.capMixin)
| Param | Type |
| --- | --- |
| [grouperFunction] | function |
**Example**
```js
// Default others grouper
chart.othersGrouper(function (topRows) {
var topRowsSum = d3.sum(topRows, _chart.valueAccessor()),
allRows = _chart.group().all(),
allRowsSum = d3.sum(allRows, _chart.valueAccessor()),
topKeys = topRows.map(_chart.keyAccessor()),
allKeys = allRows.map(_chart.keyAccessor()),
topSet = d3.set(topKeys),
others = allKeys.filter(function (d) {return !topSet.has(d);});
if (allRowsSum > topRowsSum) {
return topRows.concat([{'others': others, 'key': _othersLabel, 'value': allRowsSum - topRowsSum}]);
}
return topRows;
});
// Custom others grouper
chart.othersGrouper(function (data) {
// compute the value for others, presumably the sum of all values below the cap
var othersSum = yourComputeOthersValueLogic(data)
// the keys are needed to properly filter when the others element is clicked
var othersKeys = yourComputeOthersKeysArrayLogic(data);
// add the others row to the dataset
data.push({'key': 'Others', 'value': othersSum, 'others': othersKeys });
return data;
});
```
### dc.bubbleMixin ⇒ [bubbleMixin](#dc.bubbleMixin)
This Mixin provides reusable functionalities for any chart that needs to visualize data using bubbles.
**Kind**: static mixin of [dc](#dc)
**Mixes**: [colorMixin](#dc.colorMixin)
| Param | Type |
| --- | --- |
| _chart | Object |
* [.bubbleMixin](#dc.bubbleMixin) ⇒ [bubbleMixin](#dc.bubbleMixin)
* [.r([bubbleRadiusScale])](#dc.bubbleMixin+r) ⇒ d3.scale | [bubbleMixin](#dc.bubbleMixin)
* [.radiusValueAccessor([radiusValueAccessor])](#dc.bubbleMixin+radiusValueAccessor) ⇒ function | [bubbleMixin](#dc.bubbleMixin)
* [.minRadius([radius])](#dc.bubbleMixin+minRadius) ⇒ Number | [bubbleMixin](#dc.bubbleMixin)
* [.minRadiusWithLabel([radius])](#dc.bubbleMixin+minRadiusWithLabel) ⇒ Number | [bubbleMixin](#dc.bubbleMixin)
* [.maxBubbleRelativeSize([relativeSize])](#dc.bubbleMixin+maxBubbleRelativeSize) ⇒ Number | [bubbleMixin](#dc.bubbleMixin)
#### bubbleMixin.r([bubbleRadiusScale]) ⇒ d3.scale | [bubbleMixin](#dc.bubbleMixin)
Get or set the bubble radius scale. By default the bubble chart uses
[d3.scale.linear().domain([0, 100])](https://github.com/mbostock/d3/wiki/Quantitative-Scales#linear)
as its radius scale.
**Kind**: instance method of [bubbleMixin](#dc.bubbleMixin)
**See**: [d3.scale](http://github.com/mbostock/d3/wiki/Scales)
| Param | Type | Default |
| --- | --- | --- |
| [bubbleRadiusScale] | d3.scale | d3.scale.linear().domain([0, 100]) |
#### bubbleMixin.radiusValueAccessor([radiusValueAccessor]) ⇒ function | [bubbleMixin](#dc.bubbleMixin)
Get or set the radius value accessor function. If set, the radius value accessor function will
be used to retrieve a data value for each bubble. The data retrieved then will be mapped using
the r scale to the actual bubble radius. This allows you to encode a data dimension using bubble
size.
**Kind**: instance method of [bubbleMixin](#dc.bubbleMixin)
| Param | Type |
| --- | --- |
| [radiusValueAccessor] | function |
#### bubbleMixin.minRadius([radius]) ⇒ Number | [bubbleMixin](#dc.bubbleMixin)
Get or set the minimum radius. This will be used to initialize the radius scale's range.
**Kind**: instance method of [bubbleMixin](#dc.bubbleMixin)
| Param | Type | Default |
| --- | --- | --- |
| [radius] | Number | 10 |
#### bubbleMixin.minRadiusWithLabel([radius]) ⇒ Number | [bubbleMixin](#dc.bubbleMixin)
Get or set the minimum radius for label rendering. If a bubble's radius is less than this value
then no label will be rendered.
**Kind**: instance method of [bubbleMixin](#dc.bubbleMixin)
| Param | Type | Default |
| --- | --- | --- |
| [radius] | Number | 10 |
#### bubbleMixin.maxBubbleRelativeSize([relativeSize]) ⇒ Number | [bubbleMixin](#dc.bubbleMixin)
Get or set the maximum relative size of a bubble to the length of x axis. This value is useful
when the difference in radius between bubbles is too great.
**Kind**: instance method of [bubbleMixin](#dc.bubbleMixin)
| Param | Type | Default |
| --- | --- | --- |
| [relativeSize] | Number | 0.3 |
### dc.dateFormat : function
The default date format for dc.js
**Kind**: static property of [dc](#dc)
**Default**: d3.time.format('%m/%d/%Y')
### dc.chartRegistry : object
The dc.chartRegistry object maintains sets of all instantiated dc.js charts under named groups
and the default group.
A chart group often corresponds to a crossfilter instance. It specifies
the set of charts which should be updated when a filter changes on one of the charts or when the
global functions [filterAll](#dc.filterAll), [refocusAll](#dc.refocusAll),
[renderAll](#dc.renderAll), [redrawAll](#dc.redrawAll), or chart functions
[baseMixin.renderGroup](#dc.baseMixin+renderGroup),
[baseMixin.redrawGroup](#dc.baseMixin+redrawGroup) are called.
**Kind**: static namespace of [dc](#dc)
* [.chartRegistry](#dc.chartRegistry) : object
* [.has(chart)](#dc.chartRegistry.has) ⇒ Boolean
* [.register(chart, [group])](#dc.chartRegistry.register)
* [.deregister(chart, [group])](#dc.chartRegistry.deregister)
* [.clear(group)](#dc.chartRegistry.clear)
* [.list([group])](#dc.chartRegistry.list) ⇒ Array.<Object>
#### chartRegistry.has(chart) ⇒ Boolean
Determine if a given chart instance resides in any group in the registry.
**Kind**: static method of [chartRegistry](#dc.chartRegistry)
| Param | Type | Description |
| --- | --- | --- |
| chart | Object | dc.js chart instance |
#### chartRegistry.register(chart, [group])
Add given chart instance to the given group, creating the group if necessary.
If no group is provided, the default group `dc.constants.DEFAULT_CHART_GROUP` will be used.
**Kind**: static method of [chartRegistry](#dc.chartRegistry)
| Param | Type | Description |
| --- | --- | --- |
| chart | Object | dc.js chart instance |
| [group] | String | Group name |
#### chartRegistry.deregister(chart, [group])
Remove given chart instance from the given group, creating the group if necessary.
If no group is provided, the default group `dc.constants.DEFAULT_CHART_GROUP` will be used.
**Kind**: static method of [chartRegistry](#dc.chartRegistry)
| Param | Type | Description |
| --- | --- | --- |
| chart | Object | dc.js chart instance |
| [group] | String | Group name |
#### chartRegistry.clear(group)
Clear given group if one is provided, otherwise clears all groups.
**Kind**: static method of [chartRegistry](#dc.chartRegistry)
| Param | Type | Description |
| --- | --- | --- |
| group | String | Group name |
#### chartRegistry.list([group]) ⇒ Array.<Object>
Get an array of each chart instance in the given group.
If no group is provided, the charts in the default group are returned.
**Kind**: static method of [chartRegistry](#dc.chartRegistry)
| Param | Type | Description |
| --- | --- | --- |
| [group] | String | Group name |
### dc.units : object
**Kind**: static namespace of [dc](#dc)
* [.units](#dc.units) : object
* [.fp](#dc.units.fp) : object
* [.precision(precision)](#dc.units.fp.precision) ⇒ function
* [.integers(start, end)](#dc.units.integers) ⇒ Number
* [.ordinal(start, end, domain)](#dc.units.ordinal) ⇒ Array.<String>
#### units.fp : object
**Kind**: static namespace of [units](#dc.units)
##### fp.precision(precision) ⇒ function
This function generates an argument for the [Coordinate Grid Chart](#dc.coordinateGridMixin)
[.xUnits](#dc.coordinateGridMixin+xUnits) function specifying that the x values are floating-point
numbers with the given precision.
The returned function determines how many values at the given precision will fit into the range
supplied in its start and end parameters.
**Kind**: static method of [fp](#dc.units.fp)
**Returns**: function - start-end unit function
**See**: [coordinateGridMixin.xUnits](#dc.coordinateGridMixin+xUnits)
| Param | Type |
| --- | --- |
| precision | Number |
**Example**
```js
// specify values (and ticks) every 0.1 units
chart.xUnits(dc.units.fp.precision(0.1)
// there are 500 units between 0.5 and 1 if the precision is 0.001
var thousandths = dc.units.fp.precision(0.001);
thousandths(0.5, 1.0) // returns 500
```
#### units.integers(start, end) ⇒ Number
The default value for [.xUnits](#dc.coordinateGridMixin+xUnits) for the
[Coordinate Grid Chart](#dc.coordinateGridMixin) and should
be used when the x values are a sequence of integers.
It is a function that counts the number of integers in the range supplied in its start and end parameters.
**Kind**: static method of [units](#dc.units)
**See**: [coordinateGridMixin.xUnits](#dc.coordinateGridMixin+xUnits)
| Param | Type |
| --- | --- |
| start | Number |
| end | Number |
**Example**
```js
chart.xUnits(dc.units.integers) // already the default
```
#### units.ordinal(start, end, domain) ⇒ Array.<String>
This argument can be passed to the [.xUnits](#dc.coordinateGridMixin+xUnits) function of the to
specify ordinal units for the x axis. Usually this parameter is used in combination with passing
[d3.scale.ordinal](https://github.com/mbostock/d3/wiki/Ordinal-Scales) to
[.x](#dc.coordinateGridMixin+x).
It just returns the domain passed to it, which for ordinal charts is an array of all values.
**Kind**: static method of [units](#dc.units)
**See**
- [d3.scale.ordinal](https://github.com/mbostock/d3/wiki/Ordinal-Scales)
- [coordinateGridMixin.xUnits](#dc.coordinateGridMixin+xUnits)
- [coordinateGridMixin.x](#dc.coordinateGridMixin+x)
| Param | Type |
| --- | --- |
| start | \* |
| end | \* |
| domain | Array.<String> |
**Example**
```js
chart.xUnits(dc.units.ordinal)
.x(d3.scale.ordinal())
```
### dc.printers : object
**Kind**: static namespace of [dc](#dc)
* [.printers](#dc.printers) : object
* [.filters(filters)](#dc.printers.filters) ⇒ String
* [.filter(filter)](#dc.printers.filter) ⇒ String
#### printers.filters(filters) ⇒ String
Converts a list of filters into a readable string
**Kind**: static method of [printers](#dc.printers)
| Param | Type |
| --- | --- |
| filters | Array.<(dc.filters\|any)> |
#### printers.filter(filter) ⇒ String
Converts a filter into a readable string
**Kind**: static method of [printers](#dc.printers)
| Param | Type |
| --- | --- |
| filter | [filters](#dc.filters) | any | Array.<any> |
### dc.utils : object
**Kind**: static namespace of [dc](#dc)
* [.utils](#dc.utils) : object
* [.printSingleValue(filter)](#dc.utils.printSingleValue) ⇒ String
* [.add(l, r)](#dc.utils.add) ⇒ String | Date | Number
* [.subtract(l, r)](#dc.utils.subtract) ⇒ String | Date | Number
* [.isNumber(n)](#dc.utils.isNumber) ⇒ Boolean
* [.isFloat(n)](#dc.utils.isFloat) ⇒ Boolean
* [.isInteger(n)](#dc.utils.isInteger) ⇒ Boolean
* [.isNegligible(n)](#dc.utils.isNegligible) ⇒ Boolean
* [.clamp(val, min, max)](#dc.utils.clamp) ⇒ any
* [.uniqueId()](#dc.utils.uniqueId) ⇒ Number
* [.nameToId(name)](#dc.utils.nameToId) ⇒ String
* [.appendOrSelect(parent, selector, tag)](#dc.utils.appendOrSelect) ⇒ d3.selection
* [.safeNumber(n)](#dc.utils.safeNumber) ⇒ Number
#### utils.printSingleValue(filter) ⇒ String
Print a single value filter
**Kind**: static method of [utils](#dc.utils)
| Param | Type |
| --- | --- |
| filter | any |
#### utils.add(l, r) ⇒ String | Date | Number
Arbitrary add one value to another.
**Kind**: static method of [utils](#dc.utils)
**Todo**
- [ ] These assume than any string r is a percentage (whether or not it includes %).
They also generate strange results if l is a string.
| Param | Type |
| --- | --- |
| l | String | Date | Number |
| r | Number |
#### utils.subtract(l, r) ⇒ String | Date | Number
Arbitrary subtract one value from another.
**Kind**: static method of [utils](#dc.utils)
**Todo**
- [ ] These assume than any string r is a percentage (whether or not it includes %).
They also generate strange results if l is a string.
| Param | Type |
| --- | --- |
| l | String | Date | Number |
| r | Number |
#### utils.isNumber(n) ⇒ Boolean
Is the value a number?
**Kind**: static method of [utils](#dc.utils)
| Param | Type |
| --- | --- |
| n | any |
#### utils.isFloat(n) ⇒ Boolean
Is the value a float?
**Kind**: static method of [utils](#dc.utils)
| Param | Type |
| --- | --- |
| n | any |
#### utils.isInteger(n) ⇒ Boolean
Is the value an integer?
**Kind**: static method of [utils](#dc.utils)
| Param | Type |
| --- | --- |
| n | any |
#### utils.isNegligible(n) ⇒ Boolean
Is the value very close to zero?
**Kind**: static method of [utils](#dc.utils)
| Param | Type |
| --- | --- |
| n | any |
#### utils.clamp(val, min, max) ⇒ any
Ensure the value is no greater or less than the min/max values. If it is return the boundary value.
**Kind**: static method of [utils](#dc.utils)
| Param | Type |
| --- | --- |
| val | any |
| min | any |
| max | any |
#### utils.uniqueId() ⇒ Number
Using a simple static counter, provide a unique integer id.
**Kind**: static method of [utils](#dc.utils)
#### utils.nameToId(name) ⇒ String
Convert a name to an ID.
**Kind**: static method of [utils](#dc.utils)
| Param | Type |
| --- | --- |
| name | String |
#### utils.appendOrSelect(parent, selector, tag) ⇒ d3.selection
Append or select an item on a parent element
**Kind**: static method of [utils](#dc.utils)
| Param | Type |
| --- | --- |
| parent | d3.selection |
| selector | String |
| tag | String |
#### utils.safeNumber(n) ⇒ Number
Return the number if the value is a number; else 0.
**Kind**: static method of [utils](#dc.utils)
| Param | Type |
| --- | --- |
| n | Number | any |
### dc.filters : object
The dc.js filters are functions which are passed into crossfilter to chose which records will be
accumulated to produce values for the charts. In the crossfilter model, any filters applied on one
dimension will affect all the other dimensions but not that one. dc always applies a filter
function to the dimension; the function combines multiple filters and if any of them accept a
record, it is filtered in.
These filter constructors are used as appropriate by the various charts to implement brushing. We
mention below which chart uses which filter. In some cases, many instances of a filter will be added.
Each of the dc.js filters is an object with the following properties:
* `isFiltered` - a function that returns true if a value is within the filter
* `filterType` - a string identifying the filter, here the name of the constructor
Currently these filter objects are also arrays, but this is not a requirement. Custom filters
can be used as long as they have the properties above.
**Kind**: static namespace of [dc](#dc)
* [.filters](#dc.filters) : object
* [.RangedFilter](#dc.filters.RangedFilter)
* [new RangedFilter(low, high)](#new_dc.filters.RangedFilter_new)
* [.TwoDimensionalFilter](#dc.filters.TwoDimensionalFilter)
* [new TwoDimensionalFilter(filter)](#new_dc.filters.TwoDimensionalFilter_new)
* [.RangedTwoDimensionalFilter](#dc.filters.RangedTwoDimensionalFilter)
* [new RangedTwoDimensionalFilter(filter)](#new_dc.filters.RangedTwoDimensionalFilter_new)
#### filters.RangedFilter
**Kind**: static class of [filters](#dc.filters)
##### new RangedFilter(low, high)
RangedFilter is a filter which accepts keys between `low` and `high`. It is used to implement X
axis brushing for the [coordinate grid charts](#dc.coordinateGridMixin).
Its `filterType` is 'RangedFilter'
| Param | Type |
| --- | --- |
| low | Number |
| high | Number |
#### filters.TwoDimensionalFilter
**Kind**: static class of [filters](#dc.filters)
##### new TwoDimensionalFilter(filter)
TwoDimensionalFilter is a filter which accepts a single two-dimensional value. It is used by the
[heat map chart](#dc.heatMap) to include particular cells as they are clicked. (Rows and columns are
filtered by filtering all the cells in the row or column.)
Its `filterType` is 'TwoDimensionalFilter'
| Param | Type |
| --- | --- |
| filter | Array.<Number> |
#### filters.RangedTwoDimensionalFilter
**Kind**: static class of [filters](#dc.filters)
##### new RangedTwoDimensionalFilter(filter)
The RangedTwoDimensionalFilter allows filtering all values which fit within a rectangular
region. It is used by the [scatter plot](#dc.scatterPlot) to implement rectangular brushing.
It takes two two-dimensional points in the form `[[x1,y1],[x2,y2]]`, and normalizes them so that
`x1 <= x2` and `y1 <= y2`. It then returns a filter which accepts any points which are in the
rectangular range including the lower values but excluding the higher values.
If an array of two values are given to the RangedTwoDimensionalFilter, it interprets the values as
two x coordinates `x1` and `x2` and returns a filter which accepts any points for which `x1 <= x <
x2`.
Its `filterType` is 'RangedTwoDimensionalFilter'
| Param | Type |
| --- | --- |
| filter | Array.<Array.<Number>> |
### dc.registerChart(chart, [group])
Add given chart instance to the given group, creating the group if necessary.
If no group is provided, the default group `dc.constants.DEFAULT_CHART_GROUP` will be used.
**Kind**: static method of [dc](#dc)
| Param | Type | Description |
| --- | --- | --- |
| chart | Object | dc.js chart instance |
| [group] | String | Group name |
### dc.deregisterChart(chart, [group])
Remove given chart instance from the given group, creating the group if necessary.
If no group is provided, the default group `dc.constants.DEFAULT_CHART_GROUP` will be used.
**Kind**: static method of [dc](#dc)
| Param | Type | Description |
| --- | --- | --- |
| chart | Object | dc.js chart instance |
| [group] | String | Group name |
### dc.hasChart(chart) ⇒ Boolean
Determine if a given chart instance resides in any group in the registry.
**Kind**: static method of [dc](#dc)
| Param | Type | Description |
| --- | --- | --- |
| chart | Object | dc.js chart instance |
### dc.deregisterAllCharts(group)
Clear given group if one is provided, otherwise clears all groups.
**Kind**: static method of [dc](#dc)
| Param | Type | Description |
| --- | --- | --- |
| group | String | Group name |
### dc.filterAll([group])
Clear all filters on all charts within the given chart group. If the chart group is not given then
only charts that belong to the default chart group will be reset.
**Kind**: static method of [dc](#dc)
| Param | Type |
| --- | --- |
| [group] | String |
### dc.refocusAll([group])
Reset zoom level / focus on all charts that belong to the given chart group. If the chart group is
not given then only charts that belong to the default chart group will be reset.
**Kind**: static method of [dc](#dc)
| Param | Type |
| --- | --- |
| [group] | String |
### dc.renderAll([group])
Re-render all charts belong to the given chart group. If the chart group is not given then only
charts that belong to the default chart group will be re-rendered.
**Kind**: static method of [dc](#dc)
| Param | Type |
| --- | --- |
| [group] | String |
### dc.redrawAll([group])
Redraw all charts belong to the given chart group. If the chart group is not given then only charts
that belong to the default chart group will be re-drawn. Redraw is different from re-render since
when redrawing dc tries to update the graphic incrementally, using transitions, instead of starting
from scratch.
**Kind**: static method of [dc](#dc)
| Param | Type |
| --- | --- |
| [group] | String |
### dc.disableTransitions() ⇒ Boolean
If this boolean is set truthy, all transitions will be disabled, and changes to the charts will happen
immediately
**Kind**: static method of [dc](#dc)
**Default**: false
### dc.pluck(n, [f]) ⇒ function
Returns a function that given a string property name, can be used to pluck the property off an object. A function
can be passed as the second argument to also alter the data being returned. This can be a useful shorthand method to create
accessor functions.
**Kind**: static method of [dc](#dc)
| Param | Type |
| --- | --- |
| n | String |
| [f] | function |
**Example**
```js
var xPluck = dc.pluck('x');
var objA = {x: 1};
xPluck(objA) // 1
```
**Example**
```js
var xPosition = dc.pluck('x', function (x, i) {
// `this` is the original datum,
// `x` is the x property of the datum,
// `i` is the position in the array
return this.radius + x;
});
dc.selectAll('.circle').data(...).x(xPosition);
```