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.
Create a Composite Chart.
Parameters: Name Type Argument Descriptionparent 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.
// 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');
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 DescriptionalignYAxes Boolean <optional>
Get or set chart-specific options for all child charts. This is equivalent to calling .options on each child chart.
Parameters: Name Type Argument DescriptionchildOptions Object <optional>
Returns the child charts which are composed into the composite chart.
Combine the given charts into one single composite coordinate grid chart.
Parameters: Name Type Argument DescriptionsubChartArray Array.<Chart> <optional>
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)
]);
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 DescriptionyScale d3.scale <optional>
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.
rightYAxis d3.axisRight <optional>
// customize y axis tick format
chart.rightYAxis().tickFormat(function (v) {return v + '%';});
// customize y axis tick values
chart.rightYAxis().tickValues([0, 100, 200, 300]);
Set or get the right y axis label.
Parameters: Name Type Argument DescriptionrightYAxisLabel String <optional>
padding Number <optional>
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 DescriptionshareColors Boolean <optional>
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!
shareTitle Boolean <optional>
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 DescriptionuseRightAxisGridLines Boolean <optional>
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4