Charts with X/Y coordinate axes that support brushing, zooming, and interactive coordinate-based filtering. These charts extend CoordinateGridMixin and provide sophisticated interaction capabilities.
Concrete bar chart/histogram implementation with stacking support.
/**
* Create a Bar Chart
* @param {String|node|d3.selection|CompositeChart} parent - DOM selector, element, or parent chart
* @param {String} [chartGroup] - Chart group name for coordinated interactions
*/
class BarChart extends StackMixin {
constructor(parent: string | Element | d3.Selection | CompositeChart, chartGroup?: string);
/** Set/get gap between bars in pixels */
gap(gap?: number): number | BarChart;
/** Set/get whether to center bars on ticks */
centerBar(centerBar?: boolean): boolean | BarChart;
/** Set/get whether to always use rounding for bar positioning */
alwaysUseRounding(useRounding?: boolean): boolean | BarChart;
/** Set/get outer padding on an ordinal bar chart */
outerPadding(padding?: number): number | BarChart;
/** Set/get spacing between bars as a fraction of bar size (0-1) */
barPadding(padding?: number): number | BarChart;
/** Handle click events on bars */
onClick(d: any): void;
/** Fade deselected areas based on brush selection */
fadeDeselectedArea(brushSelection: [number, number]): void;
/** Extend brush selection with rounding if enabled */
extendBrush(brushSelection: [number, number]): [number, number];
/** Highlight legend items */
legendHighlight(d: any): void;
/** Reset legend highlighting */
legendReset(): void;
/** Get maximum X axis value with resolution adjustment */
xAxisMax(): number;
}
/** Factory function for creating BarChart instances */
function barChart(parent: string | Element | d3.Selection, chartGroup?: string): BarChart;Usage Example:
import { BarChart } from 'dc';
const chart = new BarChart('#bar-chart')
.width(400)
.height(200)
.dimension(dateDimension)
.group(dateGroup)
.x(d3.scaleTime().domain(d3.extent(data, d => d.date)))
.gap(2)
.centerBar(true);
chart.render();Line chart implementation supporting area charts, interpolation, and multiple line series.
/**
* Create a Line Chart
* @param {String|node|d3.selection|CompositeChart} parent - DOM selector, element, or parent chart
* @param {String} [chartGroup] - Chart group name for coordinated interactions
*/
class LineChart extends StackMixin {
constructor(parent: string | Element | d3.Selection | CompositeChart, chartGroup?: string);
/** Set/get line interpolation method */
interpolate(interpolation?: string | Function): string | Function | LineChart;
/** Set/get line tension for curved interpolation */
tension(tension?: number): number | LineChart;
/** Set/get whether to render as area chart */
renderArea(renderArea?: boolean): boolean | LineChart;
/** Set/get whether to render data points */
renderDataPoints(render?: boolean): boolean | LineChart;
/** Set/get data point radius */
dotRadius(radius?: number): number | LineChart;
/** Set/get whether chart is dashable */
dashStyle(dashArray?: number[]): number[] | LineChart;
}
/** Factory function for creating LineChart instances */
function lineChart(parent: string | Element | d3.Selection, chartGroup?: string): LineChart;Scatter plot implementation with customizable symbols and sizing.
/**
* Create a Scatter Plot
* @param {String|node|d3.selection} parent - DOM selector, element, or d3 selection
* @param {String} [chartGroup] - Chart group name for coordinated interactions
*/
class ScatterPlot extends CoordinateGridMixin {
constructor(parent: string | Element | d3.Selection, chartGroup?: string);
/** Set/get symbol type for scatter points */
symbol(symbolType?: d3.Symbol): d3.Symbol | ScatterPlot;
/** Set/get size of scatter symbols */
symbolSize(size?: number): number | ScatterPlot;
/** Set/get whether to exclude brushing */
excludedOpacity(opacity?: number): number | ScatterPlot;
/** Set/get whether to exclude brushing */
includedOpacity(opacity?: number): number | ScatterPlot;
/** Set/get highlight function for brushing */
highlightedSize(size?: number): number | ScatterPlot;
/** Set/get hidden size for filtered points */
hiddenSize(size?: number): number | ScatterPlot;
}
/** Factory function for creating ScatterPlot instances */
function scatterPlot(parent: string | Element | d3.Selection, chartGroup?: string): ScatterPlot;Bubble chart implementation with size encoding for three-dimensional data visualization.
/**
* Create a Bubble Chart
* @param {String|node|d3.selection} parent - DOM selector, element, or d3 selection
* @param {String} [chartGroup] - Chart group name for coordinated interactions
*/
class BubbleChart extends BubbleMixin {
constructor(parent: string | Element | d3.Selection, chartGroup?: string);
/** Set/get elastic Y axis */
elasticY(elastic?: boolean): boolean | BubbleChart;
/** Set/get elastic X axis */
elasticX(elastic?: boolean): boolean | BubbleChart;
}
/** Factory function for creating BubbleChart instances */
function bubbleChart(parent: string | Element | d3.Selection, chartGroup?: string): BubbleChart;Container chart that can host multiple sub-charts on the same coordinate system.
/**
* Create a Composite Chart
* @param {String|node|d3.selection} parent - DOM selector, element, or d3 selection
* @param {String} [chartGroup] - Chart group name for coordinated interactions
*/
class CompositeChart extends CoordinateGridMixin {
constructor(parent: string | Element | d3.Selection, chartGroup?: string);
/** Set/get array of sub-charts to compose */
compose(subCharts?: BaseMixin[]): BaseMixin[] | CompositeChart;
/** Set/get sub-charts sharing Y axis */
shareColors(share?: boolean): boolean | CompositeChart;
/** Set/get right Y axis for dual-axis charts */
rightY(scale?: d3.Scale): d3.Scale | CompositeChart;
/** Set/get right Y axis label */
rightYAxisLabel(label?: string): string | CompositeChart;
/** Set/get child chart margins */
childOptions(options?: object): object | CompositeChart;
}
/** Factory function for creating CompositeChart instances */
function compositeChart(parent: string | Element | d3.Selection, chartGroup?: string): CompositeChart;Usage Example:
import { CompositeChart, LineChart, BarChart } from 'dc';
const composite = new CompositeChart('#composite-chart')
.width(800)
.height(400)
.dimension(dateDimension)
.x(d3.scaleTime().domain(dateExtent))
.compose([
new LineChart(composite)
.group(lineGroup)
.colors('blue'),
new BarChart(composite)
.group(barGroup)
.colors('red')
]);
composite.render();Multi-series chart for displaying multiple data series with shared axes.
/**
* Create a Series Chart
* @param {String|node|d3.selection} parent - DOM selector, element, or d3 selection
* @param {String} [chartGroup] - Chart group name for coordinated interactions
*/
class SeriesChart extends CoordinateGridMixin {
constructor(parent: string | Element | d3.Selection, chartGroup?: string);
/** Set/get series accessor function */
seriesAccessor(accessor?: Function): Function | SeriesChart;
/** Set/get key accessor for series */
keyAccessor(accessor?: Function): Function | SeriesChart;
/** Set/get value accessor for series */
valueAccessor(accessor?: Function): Function | SeriesChart;
/** Set/get chart function for rendering series */
chart(chartConstructor?: Function): Function | SeriesChart;
}
/** Factory function for creating SeriesChart instances */
function seriesChart(parent: string | Element | d3.Selection, chartGroup?: string): SeriesChart;Box and whisker plot implementation for statistical data visualization.
/**
* Create a Box Plot
* @param {String|node|d3.selection} parent - DOM selector, element, or d3 selection
* @param {String} [chartGroup] - Chart group name for coordinated interactions
*/
class BoxPlot extends CoordinateGridMixin {
constructor(parent: string | Element | d3.Selection, chartGroup?: string);
/** Set/get box width */
boxWidth(width?: number | Function): number | Function | BoxPlot;
/** Set/get outlier size */
outlierSize(size?: number): number | BoxPlot;
/** Set/get whisker width */
whiskerIqrFactor(factor?: number): number | BoxPlot;
/** Set/get whether to show outliers */
showOutliers(show?: boolean): boolean | BoxPlot;
/** Set/get data group with statistical calculations */
group(group?: any): any | BoxPlot;
}
/** Factory function for creating BoxPlot instances */
function boxPlot(parent: string | Element | d3.Selection, chartGroup?: string): BoxPlot;All coordinate grid charts inherit these methods from CoordinateGridMixin:
interface CoordinateGridChartMethods {
/** Set/get X scale */
x(scale?: d3.Scale): d3.Scale | CoordinateGridChart;
/** Set/get Y scale */
y(scale?: d3.Scale): d3.Scale | CoordinateGridChart;
/** Set/get X axis units */
xUnits(units?: Function): Function | CoordinateGridChart;
/** Set/get X axis units count */
xUnitsCount(count?: number): number | CoordinateGridChart;
/** Set/get elastic Y axis */
elasticY(elastic?: boolean): boolean | CoordinateGridChart;
/** Set/get elastic X axis */
elasticX(elastic?: boolean): boolean | CoordinateGridChart;
/** Set/get brush on X axis */
brushOn(brushOn?: boolean): boolean | CoordinateGridChart;
/** Set/get parent chart for brush events */
parentBrushOn(brushOn?: boolean): boolean | CoordinateGridChart;
/** Enable/disable zoom */
zoomScale(scale?: d3.Scale): d3.Scale | CoordinateGridChart;
/** Focus on specific domain */
focus(range?: [any, any]): CoordinateGridChart;
/** Remove focus/zoom */
refocus(): CoordinateGridChart;
/** Set/get zoom out restriction */
zoomOutRestrict(restrict?: boolean): boolean | CoordinateGridChart;
}interface StackMixin extends CoordinateGridMixin {
stack(group: any, name?: string, accessor?: Function): StackMixin;
hidableStacks(hidable?: boolean): boolean | StackMixin;
hideStack(name: string): StackMixin;
showStack(name: string): StackMixin;
stackLayout(layout?: d3.Stack): d3.Stack | StackMixin;
}
interface BubbleMixin extends CoordinateGridMixin {
r(scale?: d3.Scale): d3.Scale | BubbleMixin;
radiusValueAccessor(accessor?: Function): Function | BubbleMixin;
minRadius(radius?: number): number | BubbleMixin;
maxRadius(radius?: number): number | BubbleMixin;
}