Class 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.

Hierarchy

Constructors

  • Create a Composite Chart.

    TODO update example

    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');

    Parameters

    Returns CompositeChart

Properties

Standard Methods

  • Parameters

    • lyAxisMin: any
    • lyAxisMax: any
    • ryAxisMin: any
    • ryAxisMax: any

    Returns {
        lyAxisMax: number;
        lyAxisMin: number;
        ryAxisMax: number;
        ryAxisMin: number;
    }

    • lyAxisMax: number
    • lyAxisMin: number
    • ryAxisMax: number
    • ryAxisMin: number
  • Parameters

    • left: boolean
    • right: boolean

    Returns any

  • Parameters

    • child: any
    • i: any

    Returns void

  • Returns Selection<SVGGElement, any, SVGGElement, any>

  • Returns any[]

  • Returns any[]

  • Parameters

    • charts: any

    Returns any

  • Parameters

    • charts: any

    Returns any

  • Parameters

    • ranges: any

    Returns void

  • Parameters

    • ranges: any

    Returns void

  • Returns void

  • Returns void

  • Returns any

  • Returns any

  • Returns any

  • Returns any

  • 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.

    Returns boolean

  • Parameters

    • alignYAxes: boolean

    Returns CompositeChart

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

    Returns any

  • Parameters

    • childOptions: any

    Returns CompositeChart

  • Overrides the color selection algorithm, replacing it with a simple function.

    Normally colors will be determined by calling the colorAccessor to get a value, and then passing that value through the colorScale.

    But sometimes it is difficult to get a color scale to produce the desired effect. The colorCalculator takes the datum and index and returns a color directly.

    Returns ColorAccessor

  • Parameters

    Returns any

  • 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 colorScale.

    Returns string[]

  • Parameters

    • domain: string[]

    Returns any

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

    TODO update example

    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)
    ]);

    Parameters

    Returns CompositeChart

  • Parameters

    • brushSelection: any

    Returns void

  • Parameters

    • rect: {
          height: number;
          width: number;
      }
      • height: number
      • width: number

    Returns void

  • Current height of the chart.

    To explicitly set height, please set height as part of the chart configuration.

    If not set explicitly the size will be as per the anchor HTML element subject to a minimum as set in minHeight. In that case it will keep automatically resizing as well.

    See

    Returns number

  • Attach a Legend widget to this chart. The legend widget will automatically draw legend labels based on the color setting and names associated with each group.

    Example

    chart.legend(new Legend().x(400).y(10).itemHeight(13).gap(5))
    

    Returns any

  • Parameters

    • legend: any

    Returns CompositeChart

  • Parameters

    • d: any

    Returns void

  • Parameters

    • d: any

    Returns void

  • Returns void

  • List of items that will show as legends. The charts implement this method.

    Returns any[]

  • Convenience method to set the color scale to an Hcl interpolated linear scale with range r.

    Parameters

    • r: [string, string]

    Returns any

  • Get or set the margins for a particular coordinate grid chart instance. The margins is stored as an associative Javascript array.

    Example

    let leftMargin = chart.margins().left; // 30 by default
    chart.margins().left = 50;
    leftMargin = chart.margins().left; // now 50

    Returns Margins

  • Parameters

    Returns CompositeChart

  • Returns void

  • 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; 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).

    Typically you would invoke redrawGroup which will redraw all charts within the chartGroup.

    Returns CompositeChart

  • 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.

    Typically you would invoke renderGroup which will redraw all charts within the chartGroup.

    Returns CompositeChart

  • 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 with a 'renderlet' prefix. Generates a random key for the renderlet, which makes it hard to remove.

    Deprecated

    chart.renderlet has been deprecated. Please use chart.on("renderlet.", renderletFunction)

    Example

    // 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());
    });

    TODO move to compat

    Parameters

    • renderletFunction: any

    Returns CompositeChart

  • 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() or .y(), and has no effect on elastic scales.)

    Returns 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.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.

    See

    https://github.com/d3/d3-axis/blob/master/README.md#axisRight

    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]);

    Returns Axis<any>

  • Parameters

    • rightYAxis: Axis<any>

    Returns CompositeChart

  • Set or get the right y axis label.

    Returns string

  • Parameters

    • rightYAxisLabel: string
    • Optional padding: number

    Returns 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.

    Returns any

  • Parameters

    • useRightAxisGridLines: any

    Returns CompositeChart

  • Current width of the chart.

    To explicitly set width, please set width as part of the chart configuration.

    If not set explicitly the size will be as per the anchor HTML element subject to a minimum as set in minWidth. In that case it will keep automatically resizing as well.

    See

    Returns number

  • Execute the callback without transitions. Internally it sets transitionDuration to 0 and restores it after the callback().

    Parameters

    • callback: any

    Returns void

  • 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 accommodate the text height.

    Returns string

  • Parameters

    • labelText: string
    • Optional padding: number

    Returns CompositeChart

  • Calculates the maximum x value to display in the chart. Includes xAxisPadding if set.

    Returns any

  • Calculates the minimum x value to display in the chart. Includes xAxisPadding if set.

    Returns any

  • 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 padding is set to 12 to accommodate the text height.

    Returns string

  • Parameters

    • labelText: string
    • Optional padding: number

    Returns CompositeChart

  • Calculates the maximum y value to display in the chart. Includes yAxisPadding if set.

    Returns number

  • Calculates the minimum y value to display in the chart. Includes yAxisPadding if set.

    Returns number

Intermediate Methods

  • Returns the DOM id for the chart's anchored location.

    Returns string

  • Set the domain by determining the min and max values as retrieved by .colorAccessor over the chart's dataset.

    This is useful only for certain type of color scales. In particular it will not work with ordinalColors.

    Returns any

  • Returns the internal numeric ID of the chart.

    Returns string

  • Effective height of the chart excluding margins (in pixels).

    Returns number

  • Effective width of the chart excluding margins (in pixels).

    Returns number

  • Filter the chart by the given parameter, or return the current filter if no input parameter is given.

    Starting version 5, filtering is provided by DataProvider.

    See

    filter.

    Returns any

  • Parameters

    • filter: any

    Returns CompositeChart

  • 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.

    Starting version 5, filtering is provided by DataProvider.

    See

    filters.

    Returns any[]

  • 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.

    To avoid ping-pong volley of events between a pair of range and focus charts please set noRaiseEvents to true. In that case it will update this chart but will not fire zoom event and not try to update back the associated range chart. If you are calling it manually - typically you will leave it to false (the default).

    Starting with v5, this method is unlikely to be invoked directly. A chart that needs to be focused should have autoFocus set. Such charts will focus when a filter is applied.

    A mouseZoomable chart focuses itself when zoomed.

    Example

    chart.focus([5, 10]);
    // reset focus
    chart.focus(null);

    See

    Parameters

    Returns void

  • Check whether any active filter or a specific filter is associated with particular chart instance. This function is not chainable.

    Starting version 5, filtering is provided by DataProvider.

    See

    hasFilter.

    Parameters

    • Optional filter: any

    Returns boolean

  • Returns true if the chart is using ordinal xUnits (UnitsOrdinal, or false otherwise. Most charts behave differently with ordinal data and use the result of this method to trigger the appropriate logic.

    Returns boolean

  • 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 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.

    See

    d3.dispatch.on

    Example

    .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){...})

    Parameters

    • event: any
    • listener: any

    Returns CompositeChart

  • Replace the chart filter. This is equivalent to calling chart.filter(null).filter(filter) but more efficient because the filter is only applied once.

    Starting version 5, filtering is provided by DataProvider.

    See

    resetFilters.

    Parameters

    • filter: any

    Returns CompositeChart

  • 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.

    This is typically used in augmenting/modifying a chart.

    TODO link to example

    See

    d3.select

    Example

    // Has the same effect as d3.select('#chart-id').select(selector)
    chart.select(selector)

    Type Parameters

    • DescElement extends BaseType

    Parameters

    • sel: any

      CSS selector string

    Returns any

  • 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.

    This is typically used in augmenting/modifying a chart.

    TODO link to example

    See

    d3.selectAll

    Example

    // Has the same effect as d3.select('#chart-id').selectAll(selector)
    chart.selectAll(selector)

    Type Parameters

    • DescElement extends BaseType

    • OldDatum

    Parameters

    • sel: any

      CSS selector string

    Returns any

  • 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.

    See

    turnOffControls

    Returns CompositeChart

  • 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 bottom axis object; therefore it supports any valid d3 axisBottom manipulation.

    Caution: The x 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 .xAxis() will fail.

    See

    d3.axisBottom

    Example

    // customize x axis tick format
    chart.xAxis().tickFormat(function(v) {return v + '%';});
    // customize x axis tick values
    chart.xAxis().tickValues([0, 100, 200, 300]);

    Returns Axis<any>

  • Parameters

    • xAxis: Axis<any>

    Returns CompositeChart

  • Returns the number of units displayed on the x axis. If the x axis is ordinal (xUnits is UnitsOrdinal), this is the number of items in the domain of the x scale. Otherwise, the x unit count is calculated using the xUnits function.

    Returns number

  • Set or get the y axis used by the coordinate grid chart instance. This function is most useful when y axis customization is required. Depending on useRightYAxis the y axis in dc.js is an instance of either d3.axisLeft or d3.axisRight; therefore it supports any valid d3 axis manipulation.

    Caution: The 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. In addition, depending on whether you are going to use the axis on left or right you need to appropriately pass d3.axisLeft or d3.axisRight

    See

    d3.axis

    Example

    // customize y axis tick format
    chart.yAxis().tickFormat(function(v) {return v + '%';});
    // customize y axis tick values
    chart.yAxis().tickValues([0, 100, 200, 300]);

    Returns Axis<any>

  • Parameters

    • yAxis: Axis<any>

    Returns CompositeChart

Ninja Methods

  • Set the root SVGElement to either be an existing chart's root; or any valid d3 single selector specifying a dom block element such as a div; or a dom element or d3 selection.

    This is internally managed. Invoking it directly may have unintended consequences.

    Returns string | Element

  • Parameters

    • parent: any

    Returns CompositeChart

  • Get or set the brush. Brush must be an instance of d3 brushes https://github.com/d3/d3-brush/blob/master/README.md You will use this only if you are writing a new chart type that supports brushing.

    Caution: dc creates and manages brushes internally. Go through and understand the source code if you want to pass a new brush object. Even if you are only using the getter, the brush object may not behave the way you expect.

    Returns any

  • Parameters

    • _: any

    Returns CompositeChart

  • Return charts data, typically group.all(). Some charts override this method. The derived classes may even use different return type.

    Returns any

  • Return charts data, typically group.all(). Some charts override this method. The derived classes may even use different return type.

    Returns CFGrouping[]

  • An opportunity to cleanup.

    Returns void

  • 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 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.

    TODO determine if it can be removed, does not seem to be used

    Returns CompositeChart

  • 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.

    Returns Selection<SVGGElement, any, SVGGElement, any>

  • Parameters

    • gElement: Selection<SVGGElement, any, SVGGElement, any>

    Returns CompositeChart

  • 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.

    This function can be replaced in order to change the click behavior (but first look at

    Example

    const oldHandler = chart.onClick;
    chart.onClick = function(datum) {
    // use datum.
    }

    Parameters

    • datum: any
    • Optional i: number

    Returns void

  • This is called to determine size of the chart based on the bounding rectangle. The default implementation ensures that the chart is at least as big as the minimums defined by minWidth and minHeight.

    Parameters

    Returns SizeT

  • 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. TODO: With concept of conf, this is less relevant now, consider moving it to compat.

    Example

    chart.options({dimension: myDimension, group: myGroup});
    

    Parameters

    • opts: any

    Returns CompositeChart

  • Returns the root element where a chart resides. Usually it will be the parent div element where the SVGElement was created.

    Resetting the root element on a chart outside of dc internals may have unexpected consequences.

    See

    HTMLElement

    Returns Selection<Element, any, any, any>

  • Parameters

    • rootElement: Selection<Element, any, any, any>

    Returns CompositeChart

  • Returns the top SVGElement for this specific chart.

    Usually generating an SVG Element is handled handled by dc internally. The BubbleOverlay, however, needs an SVG Element to be passed explicitly.

    Resetting the SVGElement on a chart outside of dc internals may have unexpected consequences.

    See

    SVGElement

    Returns Selection<SVGElement, any, any, any>

  • Parameters

    • svgElement: any

    Returns CompositeChart

Generated using TypeDoc