dc.js

Class: CompositeChart

CompositeChart

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.

new CompositeChart(parent [, chartGroup])

Create a Composite Chart.

Parameters:
Name Type Argument Description
parent String | node | d3.selection

Any valid d3 single selector specifying a dom block element such as a div; or a dom element or d3 selection.
chartGroup String <optional>

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.
Mixes In:
Source:
Example
// create a composite chart under #chart-container1 element using the default global chart group
var compositeChart1 = new CompositeChart('#chart-container1');
// create a composite chart under #chart-container2 element using chart group A
var compositeChart2 = new CompositeChart('#chart-container2', 'chartGroupA');

Classes

CompositeChart

Methods

alignYAxes( [alignYAxes])

Get or set alignment between left and right y axes. A line connecting '0' on both y axis will be parallel to x axis. This only has effect when elasticY is true.

Parameters:
Name Type Argument Default Description
alignYAxes Boolean <optional>
 false
Source:
Returns:
Type
Chart

childOptions( [childOptions])

Get or set chart-specific options for all child charts. This is equivalent to calling .options on each child chart.

Parameters:
Name Type Argument Description
childOptions Object <optional>
Source:
Returns:
Type
Object | CompositeChart

children()

Returns the child charts which are composed into the composite chart.

Source:
Returns:
Type
Array.<BaseMixin>

compose( [subChartArray])

Combine the given charts into one single composite coordinate grid chart.

Parameters:
Name Type Argument Description
subChartArray Array.<Chart> <optional>
Source:
Returns:
Type
CompositeChart
Example
moveChart.compose([
    // when creating sub-chart you need to pass in the parent chart
    new 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);
        }),
    new BarChart(moveChart)
        .group(volumeByMonthGroup)
        .centerBar(true)
]);

rightY( [yScale])

Get or set the y scale for the right axis. The right y scale is typically automatically generated by the chart implementation.

Parameters:
Name Type Argument Description
yScale d3.scale <optional>
Source:
See:
Returns:
Type
d3.scale | CompositeChart

rightYAxis( [rightYAxis])

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.axisRight therefore it supports any valid d3 axis manipulation.

Caution: The right y axis is usually generated internally by dc; resetting it may cause unexpected results. Note also that when used as a getter, this function is not chainable: it returns the axis, not the chart, so attempting to call chart functions after calling .yAxis() will fail.

Parameters:
Name Type Argument Description
rightYAxis d3.axisRight <optional>
Source:
See:
Returns:
Type
d3.axisRight | CompositeChart
Example
// customize y axis tick format
chart.rightYAxis().tickFormat(function (v) {return v + '%';});
// customize y axis tick values
chart.rightYAxis().tickValues([0, 100, 200, 300]);

rightYAxisLabel( [rightYAxisLabel] [, padding])

Set or get the right y axis label.

Parameters:
Name Type Argument Description
rightYAxisLabel String <optional>
padding Number <optional>
Source:
Returns:
Type
String | CompositeChart

shareColors( [shareColors])

Get or set color sharing for the chart. If set, the .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.

Parameters:
Name Type Argument Default Description
shareColors Boolean <optional>
 false
Source:
Returns:
Type
Boolean | CompositeChart

shareTitle( [shareTitle])

Get or set title sharing for the chart. If set, the .title() value from this chart will be shared with composed children.

Note: currently you must call this before compose or the child will still get the parent's title function!

Parameters:
Name Type Argument Default Description
shareTitle Boolean <optional>
 true
Source:
Returns:
Type
Boolean | CompositeChart

useRightAxisGridLines( [useRightAxisGridLines])

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.

Parameters:
Name Type Argument Default Description
useRightAxisGridLines Boolean <optional>
 false
Source:
Returns:
Type
Boolean | CompositeChart