UNPKG

dc

Version:

A multi-dimensional charting library built to work natively with crossfilter and rendered using d3.js

641 lines (551 loc) 262 kB
<a name="dc"></a> ## dc : <code>object</code> 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.1.8 **Example** ```js // Example chaining chart.width(300) .height(300) .filter('sunday'); ``` * [dc](#dc) : <code>object</code> * [.pieChart](#dc.pieChart) * [new pieChart(parent, [chartGroup])](#new_dc.pieChart_new) * [.slicesCap([cap])](#dc.pieChart+slicesCap) ⇒ <code>Number</code> &#124; <code>[pieChart](#dc.pieChart)</code> * [.externalRadiusPadding([externalRadiusPadding])](#dc.pieChart+externalRadiusPadding) ⇒ <code>Number</code> &#124; <code>[pieChart](#dc.pieChart)</code> * [.innerRadius([innerRadius])](#dc.pieChart+innerRadius) ⇒ <code>Number</code> &#124; <code>[pieChart](#dc.pieChart)</code> * [.radius([radius])](#dc.pieChart+radius) ⇒ <code>Number</code> &#124; <code>[pieChart](#dc.pieChart)</code> * [.cx([cx])](#dc.pieChart+cx) ⇒ <code>Number</code> &#124; <code>[pieChart](#dc.pieChart)</code> * [.cy([cy])](#dc.pieChart+cy) ⇒ <code>Number</code> &#124; <code>[pieChart](#dc.pieChart)</code> * [.minAngleForLabel([minAngleForLabel])](#dc.pieChart+minAngleForLabel) ⇒ <code>Number</code> &#124; <code>[pieChart](#dc.pieChart)</code> * [.emptyTitle([title])](#dc.pieChart+emptyTitle) ⇒ <code>String</code> &#124; <code>[pieChart](#dc.pieChart)</code> * [.externalLabels([externalLabelRadius])](#dc.pieChart+externalLabels) ⇒ <code>Number</code> &#124; <code>[pieChart](#dc.pieChart)</code> * [.drawPaths([drawPaths])](#dc.pieChart+drawPaths) ⇒ <code>Boolean</code> &#124; <code>[pieChart](#dc.pieChart)</code> * [.barChart](#dc.barChart) * [new barChart(parent, [chartGroup])](#new_dc.barChart_new) * [.centerBar([centerBar])](#dc.barChart+centerBar) ⇒ <code>Boolean</code> &#124; <code>[barChart](#dc.barChart)</code> * [.barPadding([barPadding])](#dc.barChart+barPadding) ⇒ <code>Number</code> &#124; <code>[barChart](#dc.barChart)</code> * [.outerPadding([padding])](#dc.barChart+outerPadding) ⇒ <code>Number</code> &#124; <code>[barChart](#dc.barChart)</code> * [.gap([gap])](#dc.barChart+gap) ⇒ <code>Number</code> &#124; <code>[barChart](#dc.barChart)</code> * [.alwaysUseRounding([alwaysUseRounding])](#dc.barChart+alwaysUseRounding) ⇒ <code>Boolean</code> &#124; <code>[barChart](#dc.barChart)</code> * [.lineChart](#dc.lineChart) * [new lineChart(parent, [chartGroup])](#new_dc.lineChart_new) * [.interpolate([interpolate])](#dc.lineChart+interpolate) ⇒ <code>String</code> &#124; <code>[lineChart](#dc.lineChart)</code> * [.tension([tension])](#dc.lineChart+tension) ⇒ <code>Number</code> &#124; <code>[lineChart](#dc.lineChart)</code> * [.defined([defined])](#dc.lineChart+defined) ⇒ <code>function</code> &#124; <code>[lineChart](#dc.lineChart)</code> * [.dashStyle([dashStyle])](#dc.lineChart+dashStyle) ⇒ <code>Array.&lt;Number&gt;</code> &#124; <code>[lineChart](#dc.lineChart)</code> * [.renderArea([renderArea])](#dc.lineChart+renderArea) ⇒ <code>Boolean</code> &#124; <code>[lineChart](#dc.lineChart)</code> * [.xyTipsOn([xyTipsOn])](#dc.lineChart+xyTipsOn) ⇒ <code>Boolean</code> &#124; <code>[lineChart](#dc.lineChart)</code> * [.dotRadius([dotRadius])](#dc.lineChart+dotRadius) ⇒ <code>Number</code> &#124; <code>[lineChart](#dc.lineChart)</code> * [.renderDataPoints([options])](#dc.lineChart+renderDataPoints) ⇒ <code>Object</code> &#124; <code>[lineChart](#dc.lineChart)</code> * [.dataCount](#dc.dataCount) * [new dataCount(parent, [chartGroup])](#new_dc.dataCount_new) * [.html([options])](#dc.dataCount+html) ⇒ <code>Object</code> &#124; <code>[dataCount](#dc.dataCount)</code> * [.formatNumber([formatter])](#dc.dataCount+formatNumber) ⇒ <code>function</code> &#124; <code>[dataCount](#dc.dataCount)</code> * [.dataTable](#dc.dataTable) * [new dataTable(parent, [chartGroup])](#new_dc.dataTable_new) * [.group(groupFunction)](#dc.dataTable+group) ⇒ <code>function</code> &#124; <code>[dataTable](#dc.dataTable)</code> * [.size([size])](#dc.dataTable+size) ⇒ <code>Number</code> &#124; <code>[dataTable](#dc.dataTable)</code> * [.beginSlice([beginSlice])](#dc.dataTable+beginSlice) ⇒ <code>Number</code> &#124; <code>[dataTable](#dc.dataTable)</code> * [.endSlice([endSlice])](#dc.dataTable+endSlice) ⇒ <code>Number</code> &#124; <code>[dataTable](#dc.dataTable)</code> * [.columns([columns])](#dc.dataTable+columns) ⇒ <code>Array.&lt;function()&gt;</code> * [.sortBy([sortBy])](#dc.dataTable+sortBy) ⇒ <code>function</code> &#124; <code>[dataTable](#dc.dataTable)</code> * [.order([order])](#dc.dataTable+order) ⇒ <code>function</code> &#124; <code>[dataTable](#dc.dataTable)</code> * [.showGroups([showGroups])](#dc.dataTable+showGroups) ⇒ <code>Boolean</code> &#124; <code>[dataTable](#dc.dataTable)</code> * [.dataGrid](#dc.dataGrid) * [new dataGrid(parent, [chartGroup])](#new_dc.dataGrid_new) * [.group(groupFunction)](#dc.dataGrid+group) ⇒ <code>function</code> &#124; <code>[dataTable](#dc.dataTable)</code> * [.beginSlice([beginSlice])](#dc.dataGrid+beginSlice) ⇒ <code>Number</code> &#124; <code>[dataGrid](#dc.dataGrid)</code> * [.endSlice([endSlice])](#dc.dataGrid+endSlice) ⇒ <code>Number</code> &#124; <code>[dataGrid](#dc.dataGrid)</code> * [.size([size])](#dc.dataGrid+size) ⇒ <code>Number</code> &#124; <code>[dataGrid](#dc.dataGrid)</code> * [.html([html])](#dc.dataGrid+html) ⇒ <code>function</code> &#124; <code>[dataGrid](#dc.dataGrid)</code> * [.htmlGroup([htmlGroup])](#dc.dataGrid+htmlGroup) ⇒ <code>function</code> &#124; <code>[dataGrid](#dc.dataGrid)</code> * [.sortBy([sortByFunction])](#dc.dataGrid+sortBy) ⇒ <code>function</code> &#124; <code>[dataGrid](#dc.dataGrid)</code> * [.order([order])](#dc.dataGrid+order) ⇒ <code>function</code> &#124; <code>[dataGrid](#dc.dataGrid)</code> * [.bubbleChart](#dc.bubbleChart) * [new bubbleChart(parent, [chartGroup])](#new_dc.bubbleChart_new) * [.elasticRadius([elasticRadius])](#dc.bubbleChart+elasticRadius) ⇒ <code>Boolean</code> &#124; <code>[bubbleChart](#dc.bubbleChart)</code> * [.sortBubbleSize([sortBubbleSize])](#dc.bubbleChart+sortBubbleSize) ⇒ <code>Boolean</code> &#124; <code>[bubbleChart](#dc.bubbleChart)</code> * [.compositeChart](#dc.compositeChart) * [new compositeChart(parent, [chartGroup])](#new_dc.compositeChart_new) * [.useRightAxisGridLines([useRightAxisGridLines])](#dc.compositeChart+useRightAxisGridLines) ⇒ <code>Boolean</code> &#124; <code>[compositeChart](#dc.compositeChart)</code> * [.childOptions([childOptions])](#dc.compositeChart+childOptions) ⇒ <code>Object</code> &#124; <code>[compositeChart](#dc.compositeChart)</code> * [.rightYAxisLabel([rightYAxisLabel], [padding])](#dc.compositeChart+rightYAxisLabel) ⇒ <code>String</code> &#124; <code>[compositeChart](#dc.compositeChart)</code> * [.compose([subChartArray])](#dc.compositeChart+compose) ⇒ <code>[compositeChart](#dc.compositeChart)</code> * [.children()](#dc.compositeChart+children) ⇒ <code>[Array.&lt;baseMixin&gt;](#dc.baseMixin)</code> * [.shareColors([shareColors])](#dc.compositeChart+shareColors) ⇒ <code>Boolean</code> &#124; <code>[compositeChart](#dc.compositeChart)</code> * [.shareTitle([shareTitle])](#dc.compositeChart+shareTitle) ⇒ <code>Boolean</code> &#124; <code>[compositeChart](#dc.compositeChart)</code> * [.rightY([yScale])](#dc.compositeChart+rightY) ⇒ <code>d3.scale</code> &#124; <code>[compositeChart](#dc.compositeChart)</code> * [.alignYAxes([alignYAxes])](#dc.compositeChart+alignYAxes) ⇒ <code>Chart</code> * [.rightYAxis([rightYAxis])](#dc.compositeChart+rightYAxis) ⇒ <code>d3.svg.axis</code> &#124; <code>[compositeChart](#dc.compositeChart)</code> * [.seriesChart](#dc.seriesChart) * [new seriesChart(parent, [chartGroup])](#new_dc.seriesChart_new) * [.chart([chartFunction])](#dc.seriesChart+chart) ⇒ <code>function</code> &#124; <code>[seriesChart](#dc.seriesChart)</code> * [.seriesAccessor([accessor])](#dc.seriesChart+seriesAccessor) ⇒ <code>function</code> &#124; <code>[seriesChart](#dc.seriesChart)</code> * [.seriesSort([sortFunction])](#dc.seriesChart+seriesSort) ⇒ <code>function</code> &#124; <code>[seriesChart](#dc.seriesChart)</code> * [.valueSort([sortFunction])](#dc.seriesChart+valueSort) ⇒ <code>function</code> &#124; <code>[seriesChart](#dc.seriesChart)</code> * [.geoChoroplethChart](#dc.geoChoroplethChart) * [new geoChoroplethChart(parent, [chartGroup])](#new_dc.geoChoroplethChart_new) * [.overlayGeoJson(json, name, keyAccessor)](#dc.geoChoroplethChart+overlayGeoJson) ⇒ <code>[geoChoroplethChart](#dc.geoChoroplethChart)</code> * [.projection([projection])](#dc.geoChoroplethChart+projection) ⇒ <code>[geoChoroplethChart](#dc.geoChoroplethChart)</code> * [.geoJsons()](#dc.geoChoroplethChart+geoJsons) ⇒ <code>Array.&lt;{name:String, data: Object, accessor: function()}&gt;</code> * [.geoPath()](#dc.geoChoroplethChart+geoPath) ⇒ <code>d3.geo.path</code> * [.removeGeoJson(name)](#dc.geoChoroplethChart+removeGeoJson) ⇒ <code>[geoChoroplethChart](#dc.geoChoroplethChart)</code> * [.bubbleOverlay](#dc.bubbleOverlay) * [new bubbleOverlay(parent, [chartGroup])](#new_dc.bubbleOverlay_new) * [.svg([imageElement])](#dc.bubbleOverlay+svg) ⇒ <code>[bubbleOverlay](#dc.bubbleOverlay)</code> * [.point(name, x, y)](#dc.bubbleOverlay+point) ⇒ <code>[bubbleOverlay](#dc.bubbleOverlay)</code> * [.rowChart](#dc.rowChart) * [new rowChart(parent, [chartGroup])](#new_dc.rowChart_new) * [.x([scale])](#dc.rowChart+x) ⇒ <code>d3.scale</code> &#124; <code>[rowChart](#dc.rowChart)</code> * [.renderTitleLabel([renderTitleLabel])](#dc.rowChart+renderTitleLabel) ⇒ <code>Boolean</code> &#124; <code>[rowChart](#dc.rowChart)</code> * [.xAxis()](#dc.rowChart+xAxis) ⇒ <code>d3.svg.axis</code> * [.fixedBarHeight([fixedBarHeight])](#dc.rowChart+fixedBarHeight) ⇒ <code>Boolean</code> &#124; <code>Number</code> &#124; <code>[rowChart](#dc.rowChart)</code> * [.gap([gap])](#dc.rowChart+gap) ⇒ <code>Number</code> &#124; <code>[rowChart](#dc.rowChart)</code> * [.elasticX([elasticX])](#dc.rowChart+elasticX) ⇒ <code>Boolean</code> &#124; <code>[rowChart](#dc.rowChart)</code> * [.labelOffsetX([labelOffsetX])](#dc.rowChart+labelOffsetX) ⇒ <code>Number</code> &#124; <code>[rowChart](#dc.rowChart)</code> * [.labelOffsetY([labelOffsety])](#dc.rowChart+labelOffsetY) ⇒ <code>Number</code> &#124; <code>[rowChart](#dc.rowChart)</code> * [.titleLabelOffsetX([titleLabelOffsetX])](#dc.rowChart+titleLabelOffsetX) ⇒ <code>Number</code> &#124; <code>[rowChart](#dc.rowChart)</code> * [.legend](#dc.legend) * [new legend()](#new_dc.legend_new) * [.x([x])](#dc.legend+x) ⇒ <code>Number</code> &#124; <code>[legend](#dc.legend)</code> * [.y([y])](#dc.legend+y) ⇒ <code>Number</code> &#124; <code>[legend](#dc.legend)</code> * [.gap([gap])](#dc.legend+gap) ⇒ <code>Number</code> &#124; <code>[legend](#dc.legend)</code> * [.itemHeight([itemHeight])](#dc.legend+itemHeight) ⇒ <code>Number</code> &#124; <code>[legend](#dc.legend)</code> * [.horizontal([horizontal])](#dc.legend+horizontal) ⇒ <code>Boolean</code> &#124; <code>[legend](#dc.legend)</code> * [.legendWidth([legendWidth])](#dc.legend+legendWidth) ⇒ <code>Number</code> &#124; <code>[legend](#dc.legend)</code> * [.itemWidth([itemWidth])](#dc.legend+itemWidth) ⇒ <code>Number</code> &#124; <code>[legend](#dc.legend)</code> * [.autoItemWidth([autoItemWidth])](#dc.legend+autoItemWidth) ⇒ <code>Boolean</code> &#124; <code>[legend](#dc.legend)</code> * [.legendText([legendText])](#dc.legend+legendText) ⇒ <code>function</code> &#124; <code>[legend](#dc.legend)</code> * [.maxItems([maxItems])](#dc.legend+maxItems) ⇒ <code>[legend](#dc.legend)</code> * [.scatterPlot](#dc.scatterPlot) * [new scatterPlot(parent, [chartGroup])](#new_dc.scatterPlot_new) * [.emptyColor](#dc.scatterPlot+emptyColor) ⇒ <code>String</code> &#124; <code>[scatterPlot](#dc.scatterPlot)</code> * [.emptyOpacity](#dc.scatterPlot+emptyOpacity) ⇒ <code>Number</code> &#124; <code>[scatterPlot](#dc.scatterPlot)</code> * [.nonemptyOpacity](#dc.scatterPlot+nonemptyOpacity) ⇒ <code>Number</code> &#124; <code>[scatterPlot](#dc.scatterPlot)</code> * [.existenceAccessor([accessor])](#dc.scatterPlot+existenceAccessor) ⇒ <code>function</code> &#124; <code>[scatterPlot](#dc.scatterPlot)</code> * [.symbol([type])](#dc.scatterPlot+symbol) ⇒ <code>String</code> &#124; <code>function</code> &#124; <code>[scatterPlot](#dc.scatterPlot)</code> * [.customSymbol([customSymbol])](#dc.scatterPlot+customSymbol) ⇒ <code>String</code> &#124; <code>function</code> &#124; <code>[scatterPlot](#dc.scatterPlot)</code> * [.symbolSize([symbolSize])](#dc.scatterPlot+symbolSize) ⇒ <code>Number</code> &#124; <code>[scatterPlot](#dc.scatterPlot)</code> * [.highlightedSize([highlightedSize])](#dc.scatterPlot+highlightedSize) ⇒ <code>Number</code> &#124; <code>[scatterPlot](#dc.scatterPlot)</code> * [.excludedSize([excludedSize])](#dc.scatterPlot+excludedSize) ⇒ <code>Number</code> &#124; <code>[scatterPlot](#dc.scatterPlot)</code> * [.excludedColor([excludedColor])](#dc.scatterPlot+excludedColor) ⇒ <code>Number</code> &#124; <code>[scatterPlot](#dc.scatterPlot)</code> * [.excludedOpacity([excludedOpacity])](#dc.scatterPlot+excludedOpacity) ⇒ <code>Number</code> &#124; <code>[scatterPlot](#dc.scatterPlot)</code> * [.emptySize([emptySize])](#dc.scatterPlot+emptySize) ⇒ <code>Number</code> &#124; <code>[scatterPlot](#dc.scatterPlot)</code> * [.numberDisplay](#dc.numberDisplay) * [new numberDisplay(parent, [chartGroup])](#new_dc.numberDisplay_new) * [.html([html])](#dc.numberDisplay+html) ⇒ <code>Object</code> &#124; <code>[numberDisplay](#dc.numberDisplay)</code> * [.value()](#dc.numberDisplay+value) ⇒ <code>Number</code> * [.formatNumber([formatter])](#dc.numberDisplay+formatNumber) ⇒ <code>function</code> &#124; <code>[numberDisplay](#dc.numberDisplay)</code> * [.heatMap](#dc.heatMap) * [new heatMap(parent, [chartGroup])](#new_dc.heatMap_new) * [.colsLabel([labelFunction])](#dc.heatMap+colsLabel) ⇒ <code>function</code> &#124; <code>[heatMap](#dc.heatMap)</code> * [.rowsLabel([labelFunction])](#dc.heatMap+rowsLabel) ⇒ <code>function</code> &#124; <code>[heatMap](#dc.heatMap)</code> * [.rows([rows])](#dc.heatMap+rows) ⇒ <code>Array.&lt;(String\|Number)&gt;</code> &#124; <code>[heatMap](#dc.heatMap)</code> * [.cols([cols])](#dc.heatMap+cols) ⇒ <code>Array.&lt;(String\|Number)&gt;</code> &#124; <code>[heatMap](#dc.heatMap)</code> * [.boxOnClick([handler])](#dc.heatMap+boxOnClick) ⇒ <code>function</code> &#124; <code>[heatMap](#dc.heatMap)</code> * [.xAxisOnClick([handler])](#dc.heatMap+xAxisOnClick) ⇒ <code>function</code> &#124; <code>[heatMap](#dc.heatMap)</code> * [.yAxisOnClick([handler])](#dc.heatMap+yAxisOnClick) ⇒ <code>function</code> &#124; <code>[heatMap](#dc.heatMap)</code> * [.xBorderRadius([xBorderRadius])](#dc.heatMap+xBorderRadius) ⇒ <code>Number</code> &#124; <code>[heatMap](#dc.heatMap)</code> * [.yBorderRadius([yBorderRadius])](#dc.heatMap+yBorderRadius) ⇒ <code>Number</code> &#124; <code>[heatMap](#dc.heatMap)</code> * [.boxPlot](#dc.boxPlot) * [new boxPlot(parent, [chartGroup])](#new_dc.boxPlot_new) * [.boxPadding([padding])](#dc.boxPlot+boxPadding) ⇒ <code>Number</code> &#124; <code>[boxPlot](#dc.boxPlot)</code> * [.outerPadding([padding])](#dc.boxPlot+outerPadding) ⇒ <code>Number</code> &#124; <code>[boxPlot](#dc.boxPlot)</code> * [.boxWidth([boxWidth])](#dc.boxPlot+boxWidth) ⇒ <code>Number</code> &#124; <code>function</code> &#124; <code>[boxPlot](#dc.boxPlot)</code> * [.tickFormat([tickFormat])](#dc.boxPlot+tickFormat) ⇒ <code>Number</code> &#124; <code>function</code> &#124; <code>[boxPlot](#dc.boxPlot)</code> * [.selectMenu](#dc.selectMenu) * [new selectMenu(parent, [chartGroup])](#new_dc.selectMenu_new) * [.order](#dc.selectMenu+order) * [.promptText](#dc.selectMenu+promptText) * [.filterDisplayed](#dc.selectMenu+filterDisplayed) * [.multiple](#dc.selectMenu+multiple) * [.promptValue](#dc.selectMenu+promptValue) * [.numberItems](#dc.selectMenu+numberItems) * [.baseMixin](#dc.baseMixin) ⇒ <code>[baseMixin](#dc.baseMixin)</code> * [.height([height])](#dc.baseMixin+height) ⇒ <code>Number</code> &#124; <code>[baseMixin](#dc.baseMixin)</code> * [.width([width])](#dc.baseMixin+width) ⇒ <code>Number</code> &#124; <code>[baseMixin](#dc.baseMixin)</code> * [.minWidth([minWidth])](#dc.baseMixin+minWidth) ⇒ <code>Number</code> &#124; <code>[baseMixin](#dc.baseMixin)</code> * [.minHeight([minHeight])](#dc.baseMixin+minHeight) ⇒ <code>Number</code> &#124; <code>[baseMixin](#dc.baseMixin)</code> * [.useViewBoxResizing([useViewBoxResizing])](#dc.baseMixin+useViewBoxResizing) ⇒ <code>Boolean</code> &#124; <code>[baseMixin](#dc.baseMixin)</code> * [.dimension([dimension])](#dc.baseMixin+dimension) ⇒ <code>crossfilter.dimension</code> &#124; <code>[baseMixin](#dc.baseMixin)</code> * [.data([callback])](#dc.baseMixin+data) ⇒ <code>\*</code> &#124; <code>[baseMixin](#dc.baseMixin)</code> * [.group([group], [name])](#dc.baseMixin+group) ⇒ <code>crossfilter.group</code> &#124; <code>[baseMixin](#dc.baseMixin)</code> * [.ordering([orderFunction])](#dc.baseMixin+ordering) ⇒ <code>function</code> &#124; <code>[baseMixin](#dc.baseMixin)</code> * [.filterAll()](#dc.baseMixin+filterAll) ⇒ <code>[baseMixin](#dc.baseMixin)</code> * [.select()](#dc.baseMixin+select) ⇒ <code>d3.selection</code> * [.selectAll()](#dc.baseMixin+selectAll) ⇒ <code>d3.selection</code> * [.anchor([parent], [chartGroup])](#dc.baseMixin+anchor) ⇒ <code>String</code> &#124; <code>node</code> &#124; <code>d3.selection</code> &#124; <code>[baseMixin](#dc.baseMixin)</code> * [.anchorName()](#dc.baseMixin+anchorName) ⇒ <code>String</code> * [.root([rootElement])](#dc.baseMixin+root) ⇒ <code>HTMLElement</code> &#124; <code>[baseMixin](#dc.baseMixin)</code> * [.svg([svgElement])](#dc.baseMixin+svg) ⇒ <code>SVGElement</code> &#124; <code>d3.selection</code> &#124; <code>[baseMixin](#dc.baseMixin)</code> * [.resetSvg()](#dc.baseMixin+resetSvg) ⇒ <code>SVGElement</code> * [.filterPrinter([filterPrinterFunction])](#dc.baseMixin+filterPrinter) ⇒ <code>function</code> &#124; <code>[baseMixin](#dc.baseMixin)</code> * [.controlsUseVisibility([controlsUseVisibility])](#dc.baseMixin+controlsUseVisibility) ⇒ <code>Boolean</code> &#124; <code>[baseMixin](#dc.baseMixin)</code> * [.turnOnControls()](#dc.baseMixin+turnOnControls) ⇒ <code>[baseMixin](#dc.baseMixin)</code> * [.turnOffControls()](#dc.baseMixin+turnOffControls) ⇒ <code>[baseMixin](#dc.baseMixin)</code> * [.transitionDuration([duration])](#dc.baseMixin+transitionDuration) ⇒ <code>Number</code> &#124; <code>[baseMixin](#dc.baseMixin)</code> * [.transitionDelay([delay])](#dc.baseMixin+transitionDelay) ⇒ <code>Number</code> &#124; <code>[baseMixin](#dc.baseMixin)</code> * [.render()](#dc.baseMixin+render) ⇒ <code>[baseMixin](#dc.baseMixin)</code> * [.redraw()](#dc.baseMixin+redraw) ⇒ <code>[baseMixin](#dc.baseMixin)</code> * [.commitHandler()](#dc.baseMixin+commitHandler) ⇒ <code>[baseMixin](#dc.baseMixin)</code> * [.redrawGroup()](#dc.baseMixin+redrawGroup) ⇒ <code>[baseMixin](#dc.baseMixin)</code> * [.renderGroup()](#dc.baseMixin+renderGroup) ⇒ <code>[baseMixin](#dc.baseMixin)</code> * [.hasFilterHandler([hasFilterHandler])](#dc.baseMixin+hasFilterHandler) ⇒ <code>function</code> &#124; <code>[baseMixin](#dc.baseMixin)</code> * [.hasFilter([filter])](#dc.baseMixin+hasFilter) ⇒ <code>Boolean</code> * [.removeFilterHandler([removeFilterHandler])](#dc.baseMixin+removeFilterHandler) ⇒ <code>function</code> &#124; <code>[baseMixin](#dc.baseMixin)</code> * [.addFilterHandler([addFilterHandler])](#dc.baseMixin+addFilterHandler) ⇒ <code>function</code> &#124; <code>[baseMixin](#dc.baseMixin)</code> * [.resetFilterHandler([resetFilterHandler])](#dc.baseMixin+resetFilterHandler) ⇒ <code>[baseMixin](#dc.baseMixin)</code> * [.replaceFilter([filter])](#dc.baseMixin+replaceFilter) ⇒ <code>[baseMixin](#dc.baseMixin)</code> * [.filter([filter])](#dc.baseMixin+filter) ⇒ <code>[baseMixin](#dc.baseMixin)</code> * [.filters()](#dc.baseMixin+filters) ⇒ <code>Array.&lt;\*&gt;</code> * [.onClick(datum)](#dc.baseMixin+onClick) * [.filterHandler([filterHandler])](#dc.baseMixin+filterHandler) ⇒ <code>function</code> &#124; <code>[baseMixin](#dc.baseMixin)</code> * [.keyAccessor([keyAccessor])](#dc.baseMixin+keyAccessor) ⇒ <code>function</code> &#124; <code>[baseMixin](#dc.baseMixin)</code> * [.valueAccessor([valueAccessor])](#dc.baseMixin+valueAccessor) ⇒ <code>function</code> &#124; <code>[baseMixin](#dc.baseMixin)</code> * [.label([labelFunction], [enableLabels])](#dc.baseMixin+label) ⇒ <code>function</code> &#124; <code>[baseMixin](#dc.baseMixin)</code> * [.renderLabel([renderLabel])](#dc.baseMixin+renderLabel) ⇒ <code>Boolean</code> &#124; <code>[baseMixin](#dc.baseMixin)</code> * [.title([titleFunction])](#dc.baseMixin+title) ⇒ <code>function</code> &#124; <code>[baseMixin](#dc.baseMixin)</code> * [.renderTitle([renderTitle])](#dc.baseMixin+renderTitle) ⇒ <code>Boolean</code> &#124; <code>[baseMixin](#dc.baseMixin)</code> * ~~[.renderlet(renderletFunction)](#dc.baseMixin+renderlet) ⇒ <code>[baseMixin](#dc.baseMixin)</code>~~ * [.chartGroup([chartGroup])](#dc.baseMixin+chartGroup) ⇒ <code>String</code> &#124; <code>[baseMixin](#dc.baseMixin)</code> * [.expireCache()](#dc.baseMixin+expireCache) ⇒ <code>[baseMixin](#dc.baseMixin)</code> * [.legend([legend])](#dc.baseMixin+legend) ⇒ <code>[legend](#dc.legend)</code> &#124; <code>[baseMixin](#dc.baseMixin)</code> * [.chartID()](#dc.baseMixin+chartID) ⇒ <code>String</code> * [.options(opts)](#dc.baseMixin+options) ⇒ <code>[baseMixin](#dc.baseMixin)</code> * [.on(event, listener)](#dc.baseMixin+on) ⇒ <code>[baseMixin](#dc.baseMixin)</code> * [.marginMixin](#dc.marginMixin) ⇒ <code>[marginMixin](#dc.marginMixin)</code> * [.margins([margins])](#dc.marginMixin+margins) ⇒ <code>Object</code> &#124; <code>[marginMixin](#dc.marginMixin)</code> * [.colorMixin](#dc.colorMixin) ⇒ <code>[colorMixin](#dc.colorMixin)</code> * [.colors([colorScale])](#dc.colorMixin+colors) ⇒ <code>d3.scale</code> &#124; <code>[colorMixin](#dc.colorMixin)</code> * [.ordinalColors(r)](#dc.colorMixin+ordinalColors) ⇒ <code>[colorMixin](#dc.colorMixin)</code> * [.linearColors(r)](#dc.colorMixin+linearColors) ⇒ <code>[colorMixin](#dc.colorMixin)</code> * [.colorAccessor([colorAccessor])](#dc.colorMixin+colorAccessor) ⇒ <code>function</code> &#124; <code>[colorMixin](#dc.colorMixin)</code> * [.colorDomain([domain])](#dc.colorMixin+colorDomain) ⇒ <code>Array.&lt;String&gt;</code> &#124; <code>[colorMixin](#dc.colorMixin)</code> * [.calculateColorDomain()](#dc.colorMixin+calculateColorDomain) ⇒ <code>[colorMixin](#dc.colorMixin)</code> * [.getColor(d, [i])](#dc.colorMixin+getColor) ⇒ <code>String</code> * [.colorCalculator([colorCalculator])](#dc.colorMixin+colorCalculator) ⇒ <code>function</code> &#124; <code>[colorMixin](#dc.colorMixin)</code> * [.coordinateGridMixin](#dc.coordinateGridMixin) ⇒ <code>[coordinateGridMixin](#dc.coordinateGridMixin)</code> * [.rescale()](#dc.coordinateGridMixin+rescale) ⇒ <code>[coordinateGridMixin](#dc.coordinateGridMixin)</code> * [.rangeChart([rangeChart])](#dc.coordinateGridMixin+rangeChart) ⇒ <code>[coordinateGridMixin](#dc.coordinateGridMixin)</code> * [.zoomScale([extent])](#dc.coordinateGridMixin+zoomScale) ⇒ <code>Array.&lt;(Number\|Date)&gt;</code> &#124; <code>[coordinateGridMixin](#dc.coordinateGridMixin)</code> * [.zoomOutRestrict([zoomOutRestrict])](#dc.coordinateGridMixin+zoomOutRestrict) ⇒ <code>Boolean</code> &#124; <code>[coordinateGridMixin](#dc.coordinateGridMixin)</code> * [.g([gElement])](#dc.coordinateGridMixin+g) ⇒ <code>SVGElement</code> &#124; <code>[coordinateGridMixin](#dc.coordinateGridMixin)</code> * [.mouseZoomable([mouseZoomable])](#dc.coordinateGridMixin+mouseZoomable) ⇒ <code>Boolean</code> &#124; <code>[coordinateGridMixin](#dc.coordinateGridMixin)</code> * [.chartBodyG([chartBodyG])](#dc.coordinateGridMixin+chartBodyG) ⇒ <code>SVGElement</code> * [.x([xScale])](#dc.coordinateGridMixin+x) ⇒ <code>d3.scale</code> &#124; <code>[coordinateGridMixin](#dc.coordinateGridMixin)</code> * [.xUnits([xUnits])](#dc.coordinateGridMixin+xUnits) ⇒ <code>function</code> &#124; <code>[coordinateGridMixin](#dc.coordinateGridMixin)</code> * [.xAxis([xAxis])](#dc.coordinateGridMixin+xAxis) ⇒ <code>d3.svg.axis</code> &#124; <code>[coordinateGridMixin](#dc.coordinateGridMixin)</code> * [.elasticX([elasticX])](#dc.coordinateGridMixin+elasticX) ⇒ <code>Boolean</code> &#124; <code>[coordinateGridMixin](#dc.coordinateGridMixin)</code> * [.xAxisPadding([padding])](#dc.coordinateGridMixin+xAxisPadding) ⇒ <code>Number</code> &#124; <code>String</code> &#124; <code>[coordinateGridMixin](#dc.coordinateGridMixin)</code> * [.xAxisPaddingUnit([unit])](#dc.coordinateGridMixin+xAxisPaddingUnit) ⇒ <code>String</code> &#124; <code>[coordinateGridMixin](#dc.coordinateGridMixin)</code> * [.xUnitCount()](#dc.coordinateGridMixin+xUnitCount) ⇒ <code>Number</code> * [.useRightYAxis([useRightYAxis])](#dc.coordinateGridMixin+useRightYAxis) ⇒ <code>Boolean</code> &#124; <code>[coordinateGridMixin](#dc.coordinateGridMixin)</code> * [.isOrdinal()](#dc.coordinateGridMixin+isOrdinal) ⇒ <code>Boolean</code> * [.xAxisLabel([labelText], [padding])](#dc.coordinateGridMixin+xAxisLabel) ⇒ <code>String</code> * [.yAxisLabel([labelText], [padding])](#dc.coordinateGridMixin+yAxisLabel) ⇒ <code>String</code> &#124; <code>[coordinateGridMixin](#dc.coordinateGridMixin)</code> * [.y([yScale])](#dc.coordinateGridMixin+y) ⇒ <code>d3.scale</code> &#124; <code>[coordinateGridMixin](#dc.coordinateGridMixin)</code> * [.yAxis([yAxis])](#dc.coordinateGridMixin+yAxis) ⇒ <code>d3.svg.axis</code> &#124; <code>[coordinateGridMixin](#dc.coordinateGridMixin)</code> * [.elasticY([elasticY])](#dc.coordinateGridMixin+elasticY) ⇒ <code>Boolean</code> &#124; <code>[coordinateGridMixin](#dc.coordinateGridMixin)</code> * [.renderHorizontalGridLines([renderHorizontalGridLines])](#dc.coordinateGridMixin+renderHorizontalGridLines) ⇒ <code>Boolean</code> &#124; <code>[coordinateGridMixin](#dc.coordinateGridMixin)</code> * [.renderVerticalGridLines([renderVerticalGridLines])](#dc.coordinateGridMixin+renderVerticalGridLines) ⇒ <code>Boolean</code> &#124; <code>[coordinateGridMixin](#dc.coordinateGridMixin)</code> * [.xAxisMin()](#dc.coordinateGridMixin+xAxisMin) ⇒ <code>\*</code> * [.xAxisMax()](#dc.coordinateGridMixin+xAxisMax) ⇒ <code>\*</code> * [.yAxisMin()](#dc.coordinateGridMixin+yAxisMin) ⇒ <code>\*</code> * [.yAxisMax()](#dc.coordinateGridMixin+yAxisMax) ⇒ <code>\*</code> * [.yAxisPadding([padding])](#dc.coordinateGridMixin+yAxisPadding) ⇒ <code>Number</code> &#124; <code>[coordinateGridMixin](#dc.coordinateGridMixin)</code> * [.round([round])](#dc.coordinateGridMixin+round) ⇒ <code>function</code> &#124; <code>[coordinateGridMixin](#dc.coordinateGridMixin)</code> * [.clipPadding([padding])](#dc.coordinateGridMixin+clipPadding) ⇒ <code>Number</code> &#124; <code>[coordinateGridMixin](#dc.coordinateGridMixin)</code> * [.focus([range])](#dc.coordinateGridMixin+focus) * [.brushOn([brushOn])](#dc.coordinateGridMixin+brushOn) ⇒ <code>Boolean</code> &#124; <code>[coordinateGridMixin](#dc.coordinateGridMixin)</code> * [.stackMixin](#dc.stackMixin) ⇒ <code>[stackMixin](#dc.stackMixin)</code> * [.stack(group, [name], [accessor])](#dc.stackMixin+stack) ⇒ <code>Array.&lt;{group: crossfilter.group, name: String, accessor: function()}&gt;</code> &#124; <code>[stackMixin](#dc.stackMixin)</code> * [.hidableStacks([hidableStacks])](#dc.stackMixin+hidableStacks) ⇒ <code>Boolean</code> &#124; <code>[stackMixin](#dc.stackMixin)</code> * [.hideStack(stackName)](#dc.stackMixin+hideStack) ⇒ <code>[stackMixin](#dc.stackMixin)</code> * [.showStack(stackName)](#dc.stackMixin+showStack) ⇒ <code>[stackMixin](#dc.stackMixin)</code> * [.title([stackName], [titleAccessor])](#dc.stackMixin+title) ⇒ <code>String</code> &#124; <code>[stackMixin](#dc.stackMixin)</code> * [.stackLayout([stack])](#dc.stackMixin+stackLayout) ⇒ <code>function</code> &#124; <code>[stackMixin](#dc.stackMixin)</code> * [.evadeDomainFilter([evadeDomainFilter])](#dc.stackMixin+evadeDomainFilter) ⇒ <code>Boolean</code> &#124; <code>[stackMixin](#dc.stackMixin)</code> * [.capMixin](#dc.capMixin) ⇒ <code>[capMixin](#dc.capMixin)</code> * [.cap([count])](#dc.capMixin+cap) ⇒ <code>Number</code> &#124; <code>[capMixin](#dc.capMixin)</code> * [.takeFront([takeFront])](#dc.capMixin+takeFront) ⇒ <code>Boolean</code> &#124; <code>[capMixin](#dc.capMixin)</code> * [.othersLabel([label])](#dc.capMixin+othersLabel) ⇒ <code>String</code> &#124; <code>[capMixin](#dc.capMixin)</code> * [.othersGrouper([grouperFunction])](#dc.capMixin+othersGrouper) ⇒ <code>function</code> &#124; <code>[capMixin](#dc.capMixin)</code> * [.bubbleMixin](#dc.bubbleMixin) ⇒ <code>[bubbleMixin](#dc.bubbleMixin)</code> * [.r([bubbleRadiusScale])](#dc.bubbleMixin+r) ⇒ <code>d3.scale</code> &#124; <code>[bubbleMixin](#dc.bubbleMixin)</code> * [.radiusValueAccessor([radiusValueAccessor])](#dc.bubbleMixin+radiusValueAccessor) ⇒ <code>function</code> &#124; <code>[bubbleMixin](#dc.bubbleMixin)</code> * [.minRadius([radius])](#dc.bubbleMixin+minRadius) ⇒ <code>Number</code> &#124; <code>[bubbleMixin](#dc.bubbleMixin)</code> * [.minRadiusWithLabel([radius])](#dc.bubbleMixin+minRadiusWithLabel) ⇒ <code>Number</code> &#124; <code>[bubbleMixin](#dc.bubbleMixin)</code> * [.maxBubbleRelativeSize([relativeSize])](#dc.bubbleMixin+maxBubbleRelativeSize) ⇒ <code>Number</code> &#124; <code>[bubbleMixin](#dc.bubbleMixin)</code> * [.disableTransitions](#dc.disableTransitions) : <code>Boolean</code> * [.dateFormat](#dc.dateFormat) : <code>function</code> * [.chartRegistry](#dc.chartRegistry) : <code>object</code> * [.has(chart)](#dc.chartRegistry.has) ⇒ <code>Boolean</code> * [.register(chart, [group])](#dc.chartRegistry.register) * [.deregister(chart, [group])](#dc.chartRegistry.deregister) * [.clear(group)](#dc.chartRegistry.clear) * [.list([group])](#dc.chartRegistry.list) ⇒ <code>Array.&lt;Object&gt;</code> * [.units](#dc.units) : <code>object</code> * [.fp](#dc.units.fp) : <code>object</code> * [.precision(precision)](#dc.units.fp.precision) ⇒ <code>function</code> * [.integers(start, end)](#dc.units.integers) ⇒ <code>Number</code> * [.ordinal(start, end, domain)](#dc.units.ordinal) ⇒ <code>Array.&lt;String&gt;</code> * [.printers](#dc.printers) : <code>object</code> * [.filters(filters)](#dc.printers.filters) ⇒ <code>String</code> * [.filter(filter)](#dc.printers.filter) ⇒ <code>String</code> * [.utils](#dc.utils) : <code>object</code> * [.printSingleValue(filter)](#dc.utils.printSingleValue) ⇒ <code>String</code> * [.add(l, r, [t])](#dc.utils.add) ⇒ <code>String</code> &#124; <code>Date</code> &#124; <code>Number</code> * [.subtract(l, r, [t])](#dc.utils.subtract) ⇒ <code>String</code> &#124; <code>Date</code> &#124; <code>Number</code> * [.isNumber(n)](#dc.utils.isNumber) ⇒ <code>Boolean</code> * [.isFloat(n)](#dc.utils.isFloat) ⇒ <code>Boolean</code> * [.isInteger(n)](#dc.utils.isInteger) ⇒ <code>Boolean</code> * [.isNegligible(n)](#dc.utils.isNegligible) ⇒ <code>Boolean</code> * [.clamp(val, min, max)](#dc.utils.clamp) ⇒ <code>any</code> * [.uniqueId()](#dc.utils.uniqueId) ⇒ <code>Number</code> * [.nameToId(name)](#dc.utils.nameToId) ⇒ <code>String</code> * [.appendOrSelect(parent, selector, tag)](#dc.utils.appendOrSelect) ⇒ <code>d3.selection</code> * [.safeNumber(n)](#dc.utils.safeNumber) ⇒ <code>Number</code> * [.filters](#dc.filters) : <code>object</code> * [.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) ⇒ <code>Boolean</code> * [.deregisterAllCharts(group)](#dc.deregisterAllCharts) * [.filterAll([group])](#dc.filterAll) * [.refocusAll([group])](#dc.refocusAll) * [.renderAll([group])](#dc.renderAll) * [.redrawAll([group])](#dc.redrawAll) * [.transition(selection, [duration], [delay], [name])](#dc.transition) ⇒ <code>d3.transition</code> &#124; <code>d3.selection</code> * [.pluck(n, [f])](#dc.pluck) ⇒ <code>function</code> <a name="dc.pieChart"></a> ### dc.pieChart **Kind**: static class of <code>[dc](#dc)</code> **Mixes**: <code>[capMixin](#dc.capMixin)</code>, <code>[colorMixin](#dc.colorMixin)</code>, <code>[baseMixin](#dc.baseMixin)</code> * [.pieChart](#dc.pieChart) * [new pieChart(parent, [chartGroup])](#new_dc.pieChart_new) * [.slicesCap([cap])](#dc.pieChart+slicesCap) ⇒ <code>Number</code> &#124; <code>[pieChart](#dc.pieChart)</code> * [.externalRadiusPadding([externalRadiusPadding])](#dc.pieChart+externalRadiusPadding) ⇒ <code>Number</code> &#124; <code>[pieChart](#dc.pieChart)</code> * [.innerRadius([innerRadius])](#dc.pieChart+innerRadius) ⇒ <code>Number</code> &#124; <code>[pieChart](#dc.pieChart)</code> * [.radius([radius])](#dc.pieChart+radius) ⇒ <code>Number</code> &#124; <code>[pieChart](#dc.pieChart)</code> * [.cx([cx])](#dc.pieChart+cx) ⇒ <code>Number</code> &#124; <code>[pieChart](#dc.pieChart)</code> * [.cy([cy])](#dc.pieChart+cy) ⇒ <code>Number</code> &#124; <code>[pieChart](#dc.pieChart)</code> * [.minAngleForLabel([minAngleForLabel])](#dc.pieChart+minAngleForLabel) ⇒ <code>Number</code> &#124; <code>[pieChart](#dc.pieChart)</code> * [.emptyTitle([title])](#dc.pieChart+emptyTitle) ⇒ <code>String</code> &#124; <code>[pieChart](#dc.pieChart)</code> * [.externalLabels([externalLabelRadius])](#dc.pieChart+externalLabels) ⇒ <code>Number</code> &#124; <code>[pieChart](#dc.pieChart)</code> * [.drawPaths([drawPaths])](#dc.pieChart+drawPaths) ⇒ <code>Boolean</code> &#124; <code>[pieChart](#dc.pieChart)</code> <a name="new_dc.pieChart_new"></a> #### 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 | <code>String</code> &#124; <code>node</code> &#124; <code>d3.selection</code> | Any valid [d3 single selector](https://github.com/d3/d3-3.x-api-reference/blob/master/Selections.md#selecting-elements) specifying a dom block element such as a div; or a dom element or d3 selection. | | [chartGroup] | <code>String</code> | 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'); ``` <a name="dc.pieChart+slicesCap"></a> #### pieChart.slicesCap([cap]) ⇒ <code>Number</code> &#124; <code>[pieChart](#dc.pieChart)</code> 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 <code>[pieChart](#dc.pieChart)</code> | Param | Type | | --- | --- | | [cap] | <code>Number</code> | <a name="dc.pieChart+externalRadiusPadding"></a> #### pieChart.externalRadiusPadding([externalRadiusPadding]) ⇒ <code>Number</code> &#124; <code>[pieChart](#dc.pieChart)</code> 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 <code>[pieChart](#dc.pieChart)</code> | Param | Type | Default | | --- | --- | --- | | [externalRadiusPadding] | <code>Number</code> | <code>0</code> | <a name="dc.pieChart+innerRadius"></a> #### pieChart.innerRadius([innerRadius]) ⇒ <code>Number</code> &#124; <code>[pieChart](#dc.pieChart)</code> 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 <code>[pieChart](#dc.pieChart)</code> | Param | Type | Default | | --- | --- | --- | | [innerRadius] | <code>Number</code> | <code>0</code> | <a name="dc.pieChart+radius"></a> #### pieChart.radius([radius]) ⇒ <code>Number</code> &#124; <code>[pieChart](#dc.pieChart)</code> 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 <code>[pieChart](#dc.pieChart)</code> | Param | Type | | --- | --- | | [radius] | <code>Number</code> | <a name="dc.pieChart+cx"></a> #### pieChart.cx([cx]) ⇒ <code>Number</code> &#124; <code>[pieChart](#dc.pieChart)</code> Get or set center x coordinate position. Default is center of svg. **Kind**: instance method of <code>[pieChart](#dc.pieChart)</code> | Param | Type | | --- | --- | | [cx] | <code>Number</code> | <a name="dc.pieChart+cy"></a> #### pieChart.cy([cy]) ⇒ <code>Number</code> &#124; <code>[pieChart](#dc.pieChart)</code> Get or set center y coordinate position. Default is center of svg. **Kind**: instance method of <code>[pieChart](#dc.pieChart)</code> | Param | Type | | --- | --- | | [cy] | <code>Number</code> | <a name="dc.pieChart+minAngleForLabel"></a> #### pieChart.minAngleForLabel([minAngleForLabel]) ⇒ <code>Number</code> &#124; <code>[pieChart](#dc.pieChart)</code> 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 <code>[pieChart](#dc.pieChart)</code> | Param | Type | Default | | --- | --- | --- | | [minAngleForLabel] | <code>Number</code> | <code>0.5</code> | <a name="dc.pieChart+emptyTitle"></a> #### pieChart.emptyTitle([title]) ⇒ <code>String</code> &#124; <code>[pieChart](#dc.pieChart)</code> Title to use for the only slice when there is no data. **Kind**: instance method of <code>[pieChart](#dc.pieChart)</code> | Param | Type | | --- | --- | | [title] | <code>String</code> | <a name="dc.pieChart+externalLabels"></a> #### pieChart.externalLabels([externalLabelRadius]) ⇒ <code>Number</code> &#124; <code>[pieChart](#dc.pieChart)</code> Position slice labels offset from the outer edge of the chart. The argument specifies the extra radius to be added for slice labels. **Kind**: instance method of <code>[pieChart](#dc.pieChart)</code> | Param | Type | | --- | --- | | [externalLabelRadius] | <code>Number</code> | <a name="dc.pieChart+drawPaths"></a> #### pieChart.drawPaths([drawPaths]) ⇒ <code>Boolean</code> &#124; <code>[pieChart](#dc.pieChart)</code> Get or set whether to draw lines from pie slices to their labels. **Kind**: instance method of <code>[pieChart](#dc.pieChart)</code> | Param | Type | | --- | --- | | [drawPaths] | <code>Boolean</code> | <a name="dc.barChart"></a> ### dc.barChart **Kind**: static class of <code>[dc](#dc)</code> **Mixes**: <code>[stackMixin](#dc.stackMixin)</code>, <code>[coordinateGridMixin](#dc.coordinateGridMixin)</code> * [.barChart](#dc.barChart) * [new barChart(parent, [chartGroup])](#new_dc.barChart_new) * [.centerBar([centerBar])](#dc.barChart+centerBar) ⇒ <code>Boolean</code> &#124; <code>[barChart](#dc.barChart)</code> * [.barPadding([barPadding])](#dc.barChart+barPadding) ⇒ <code>Number</code> &#124; <code>[barChart](#dc.barChart)</code> * [.outerPadding([padding])](#dc.barChart+outerPadding) ⇒ <code>Number</code> &#124; <code>[barChart](#dc.barChart)</code> * [.gap([gap])](#dc.barChart+gap) ⇒ <code>Number</code> &#124; <code>[barChart](#dc.barChart)</code> * [.alwaysUseRounding([alwaysUseRounding])](#dc.barChart+alwaysUseRounding) ⇒ <code>Boolean</code> &#124; <code>[barChart](#dc.barChart)</code> <a name="new_dc.barChart_new"></a> #### 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 | <code>String</code> &#124; <code>node</code> &#124; <code>d3.selection</code> &#124; <code>[compositeChart](#dc.compositeChart)</code> | Any valid [d3 single selector](https://github.com/d3/d3-3.x-api-reference/blob/master/Selections.md#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] | <code>String</code> | 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); ``` <a name="dc.barChart+centerBar"></a> #### barChart.centerBar([centerBar]) ⇒ <code>Boolean</code> &#124; <code>[barChart](#dc.barChart)</code> Whether the bar chart will render each bar centered around the data position on the x-axis. **Kind**: instance method of <code>[barChart](#dc.barChart)</code> | Param | Type | Default | | --- | --- | --- | | [centerBar] | <code>Boolean</code> | <code>false</code> | <a name="dc.barChart+barPadding"></a> #### barChart.barPadding([barPadding]) ⇒ <code>Number</code> &#124; <code>[barChart](#dc.barChart)</code> 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/d3/d3-3.x-api-reference/blob/master/Ordinal-Scales.md#ordinal_rangeBands) for a visual description of how the padding is applied. **Kind**: instance method of <code>[barChart](#dc.barChart)</code> | Param | Type | Default | | --- | --- | --- | | [barPadding] | <code>Number</code> | <code>0</code> | <a name="dc.barChart+outerPadding"></a> #### barChart.outerPadding([padding]) ⇒ <code>Number</code> &#124; <code>[barChart](#dc.barChart)</code> 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 <code>[barChart](#dc.barChart)</code> | Param | Type | Default | | --- | --- | --- | | [padding] | <code>Number</code> | <code>0.5</code> | <a name="dc.barChart+gap"></a> #### barChart.gap([gap]) ⇒ <code>Number</code> &#124; <code>[barChart](#dc.barChart)</code> 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 <code>[barChart](#dc.barChart)</code> | Param | Type | Default | | --- | --- | --- | | [gap] | <code>Number</code> | <code>2</code> | <a name="dc.barChart+alwaysUseRounding"></a> #### barChart.alwaysUseRounding([alwaysUseRounding]) ⇒ <code>Boolean</code> &#124; <code>[barChart](#dc.barChart)</code> 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 <code>[barChart](#dc.barChart)</code> | Param | Type | Default | | --- | --- | --- | | [alwaysUseRounding] | <code>Boolean</code> | <code>false</code> | **Example** ```js chart.round(function(n) { return Math.floor(n) + 0.5; }); ``` <a name="dc.lineChart"></a> ### dc.lineChart **Kind**: static class of <code>[dc](#dc)</code> **Mixes**: <code>[stackMixin](#dc.stackMixin)</code>, <code>[coordinateGridMixin](#dc.coordinateGridMixin)</code> * [.lineChart](#dc.lineChart) * [new lineChart(parent, [chartGroup])](#new_dc.lineChart_new) * [.interpolate([interpolate])](#dc.lineChart+interpolate) ⇒ <code>String</code> &#124; <code>[lineChart](#dc.lineChart)</code> * [.tension([tension])](#dc.lineChart+tension) ⇒ <code>Number</code> &#124; <code>[lineChart](#dc.lineChart)</code> * [.defined([defined])](#dc.lineChart+defined) ⇒ <code>function</code> &#124; <code>[lineChart](#dc.lineChart)</code> * [.dashStyle([dashStyle])](#dc.lineChart+dashStyle) ⇒ <code>Array.&lt;Number&gt;</code> &#124; <code>[lineChart](#dc.lineChart)</code> * [.renderArea([renderArea])](#dc.lineChart+renderArea) ⇒ <code>Boolean</code> &#124; <code>[lineChart](#dc.lineChart)</code> * [.xyTipsOn([xyTipsOn])](#dc.lineChart+xyTipsOn) ⇒ <code>Boolean</code> &#124; <code>[lineChart](#dc.lineChart)</code> * [.dotRadius([dotRadius])](#dc.lineChart+dotRadius) ⇒ <code>Number</code> &#124; <code>[lineChart](#dc.lineChart)</code> * [.renderDataPoints([options])](#dc.lineChart+renderDataPoints) ⇒ <code>Object</code> &#124; <code>[lineChart](#dc.lineChart)</code> <a name="new_dc.lineChart_new"></a> #### 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 | <code>String</code> &#124; <code>node</code> &#124; <code>d3.selection</code> &#124; <code>[compositeChart](#dc.compositeChart)</code> | Any valid [d3 single selector](https://github.com/d3/d3-3.x-api-reference/blob/master/Selections.md#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] | <code>String</code> | 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 th