Set or get x coordinate for legend widget.

Set or get y coordinate for legend widget.

Set or get gap between legend items.

Set or get legend item height.

Position legend horizontally instead of vertically.

Maximum width for horizontal legend.

legendItem width for horizontal legend.

Turn automatic width for legend items on or off. If true, itemWidth is ignored. This setting takes into account gap.

Whether the bar chart will render each bar centered around the data position on the x-axis.

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. See the d3 docs for a visual description of how the padding is applied.

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.

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.

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

chart.round(function(n) { return Math.floor(n) + 0.5; });

Get or set the spacing between boxes as a fraction of box size. Valid values are within 0-1. See the d3 docs for a visual description of how the padding is applied.

Get or set the outer padding on an ordinal box chart. This setting has no effect on non-ordinal charts or on charts with a custom .boxWidth. Will pad the width by padding * barWidth on each side of the chart.

Get or set the numerical width of the boxplot box. The width may also be a function taking as parameters the chart width excluding the right and left margins, as well as the number of x units.

// Using numerical parameter
chart.boxWidth(10);
// Using function
chart.boxWidth((innerChartWidth, xUnits) { ... });

Set the numerical format of the boxplot median, whiskers and quartile labels. Defaults to integer formatting.

// format ticks to 2 decimal places
chart.tickFormat(d3.format('.2f'));

Turn on or off the elastic bubble radius feature, or return the value of the flag. If this feature is turned on, then bubble radii will be automatically rescaled to fit the chart better.

Turn on or off the bubble sorting feature, or return the value of the flag. If enabled, bubbles will be sorted by their radius, with smaller bubbles in front.

mandatory

Set the underlying svg image element. Unlike other dc charts this chart will not generate a svg element; therefore the bubble overlay chart will not work if this function is not invoked. If the underlying image is a bitmap, then an empty svg will need to be created on top of the image.

// set up underlying svg element
chart.svg(d3.select('#chart svg'));

mandatory

Set up a data point on the overlay. The name of a data point should match a specific 'key' among data groups generated using keyAccessor. If a match is found (point name <-> data group key) then a bubble will be generated at the position specified by the function. x and y value specified here are relative to the underlying svg.

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.

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

Set or get the right y axis label.

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

moveChart.compose([
    // when creating sub-chart you need to pass in the parent chart
    dc.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);
        }),
    dc.barChart(moveChart)
        .group(volumeByMonthGroup)
        .centerBar(true)
]);

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

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.

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

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

Get or set alignment between left and right y axes. A line connecting '0' on both y axis will be parallel to x axis.

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 axis object therefore it supports any valid d3 axis manipulation. Caution: The y axis is usually generated internally by dc; resetting it may cause unexpected results.

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

Gets or sets an optional object specifying HTML templates to use depending how many items are selected. The text %total-count will replaced with the total number of records, and the text %filter-count will be replaced with the number of selected records.

• all: HTML template to use if all items are selected
• some: HTML template to use if not all items are selected

counter.html({
     some: '%filter-count out of %total-count records selected',
     all: 'All records selected. Click on charts to apply filters'
})

Gets or sets an optional function to format the filter count and total count.

counter.formatNumber(d3.format('.2g'))

Get or set the index of the beginning slice which determines which entries get displayed by the widget. Useful when implementing pagination.

Get or set the index of the end slice which determines which entries get displayed by the widget Useful when implementing pagination.

Get or set the grid size which determines the number of items displayed by the widget.

Get or set the function that formats an item. The data grid widget uses a function to generate dynamic html. Use your favourite templating engine or generate the string directly.

chart.html(function (d) { return '<div class='item '+data.exampleCategory+''>'+data.exampleString+'</div>';});

Get or set the function that formats a group label.

chart.htmlGroup (function (d) { return '<h2>'.d.key . 'with ' . d.values.length .' items</h2>'});

Get or set sort-by function. This function works as a value accessor at the item level and returns a particular field to be sorted.

chart.sortBy(function(d) {
    return d.date;
});

Get or set sort order function.

chart.order(d3.descending);

mandatory

Use this function to insert a new GeoJson map layer. This function can be invoked multiple times if you have multiple GeoJson data layers to render on top of each other. If you overlay multiple layers with the same name the new overlay will override the existing one.

// insert a layer for rendering US states
chart.overlayGeoJson(statesJson.features, 'state', function(d) {
     return d.properties.name;
})

Set custom geo projection function. See the available d3 geo projection functions.

Returns all GeoJson layers currently registered with this chart. The returned array is a reference to this chart's internal data structure, so any modification to this array will also modify this chart's internal registration.

Returns the d3.geo.path object used to render the projection and features. Can be useful for figuring out the bounding box of the feature set and thus a way to calculate scale and translation for the projection.

Remove a GeoJson layer from this chart by name

Set or get the column label function. The chart class uses this function to render column labels on the X axis. It is passed the column name.

// the default label function just returns the name
chart.colsLabel(function(d) { return d; });

Set or get the row label function. The chart class uses this function to render row labels on the Y axis. It is passed the row name.

// the default label function just returns the name
chart.rowsLabel(function(d) { return d; });

Gets or sets the values used to create the rows of the heatmap, as an array. By default, all the values will be fetched from the data using the value accessor, and they will be sorted in ascending order.

Gets or sets the keys used to create the columns of the heatmap, as an array. By default, all the values will be fetched from the data using the key accessor, and they will be sorted in ascending order.

Gets or sets the handler that fires when an individual cell is clicked in the heatmap. By default, filtering of the cell will be toggled.

// default box on click handler
chart.boxOnClick(function (d) {
    var filter = d.key;
    events.trigger(function () {
        _chart.filter(filter);
        _chart.redrawGroup();
    });
});

Gets or sets the handler that fires when a column tick is clicked in the x axis. By default, if any cells in the column are unselected, the whole column will be selected, otherwise the whole column will be unselected.

Gets or sets the handler that fires when a row tick is clicked in the y axis. By default, if any cells in the row are unselected, the whole row will be selected, otherwise the whole row will be unselected.

Gets or sets the X border radius. Set to 0 to get full rectangles.

Gets or sets the Y border radius. Set to 0 to get full rectangles.

Gets or sets the interpolator to use for lines drawn, by string name, allowing e.g. step functions, splines, and cubic interpolation. This is passed to d3.svg.line.interpolate and d3.svg.area.interpolate, where you can find a complete list of valid arguments

Gets or sets the tension to use for lines drawn, in the range 0 to 1. This parameter further customizes the interpolation behavior. It is passed to d3.svg.line.tension and d3.svg.area.tension.

Gets or sets a function that will determine discontinuities in the line which should be skipped: the path will be broken into separate subpaths if some points are undefined. This function is passed to d3.svg.line.defined

Note: crossfilter will sometimes coerce nulls to 0, so you may need to carefully write custom reduce functions to get this to work, depending on your data. See https://github.com/dc-js/dc.js/issues/615#issuecomment-49089248

Set the line's d3 dashstyle. This value becomes the 'stroke-dasharray' of line. Defaults to empty array (solid line).

// create a Dash Dot Dot Dot
chart.dashStyle([3,1,1,1]);

Get or set render area flag. If the flag is set to true then the chart will render the area beneath each line and the line chart effectively becomes an area chart.

Turn on/off the mouseover behavior of an individual data point which renders a circle and x/y axis dashed lines back to each respective axis. This is ignored if the chart brush is on

Get or set the radius (in px) for dots displayed on the data points.

Always show individual dots for each datapoint. If options is falsy, it disables data point rendering.

If no options are provided, the current options values are instead returned.

chart.renderDataPoints({radius: 2, fillOpacity: 0.8, strokeOpacity: 0.8})

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.

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.

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.

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.

Get or set center x coordinate position. Default is center of svg.

Get or set center y coordinate position. Default is center of svg.

Get or set the minimal slice angle for label rendering. Any slice with a smaller angle will not display a slice label.

Title to use for the only slice when there is no data.

Position slice labels offset from the outer edge of the chart

The given argument sets the radial offset.

Get or set whether to draw lines from pie slices to their labels.

Gets or sets the x scale. The x scale can be any d3 quantitive scale

Turn on/off Title label rendering (values) using SVG style of text-anchor 'end'

Get the x axis for the row chart instance. Note: not settable for row charts. See the d3 axis object documention for more information.

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

Get or set the fixed bar height. Default is [false] which will auto-scale bars. For example, if you want to fix the height for a specific number of bars (useful in TopN charts) you could fix height as follows (where count = total number of bars in your TopN and gap is your vertical gap space).

chart.fixedBarHeight( chartheight - (count + 1) * gap / count);

Get or set the vertical gap space between rows on a particular row chart instance

Get or set the elasticity on x axis. If this attribute is set to true, then the x axis will rescle to auto-fit the data range when filtered.

Get or set the x offset (horizontal space to the top left corner of a row) for labels on a particular row chart.

Get or set the y offset (vertical space to the top left corner of a row) for labels on a particular row chart.

Get of set the x offset (horizontal space between right edge of row and right edge or text.

Get or set the existence accessor. If a point exists, it is drawn with symbolSize radius and opacity 1; if it does not exist, it is drawn with hiddenSize radius and opacity 0. By default, the existence accessor checks if the reduced value is truthy.

// default accessor
chart.existenceAccessor(function (d) { return d.value; });

Get or set the symbol type used for each point. By default the symbol is a circle. Type can be a constant or an accessor.

// Circle type
chart.symbol('circle');
// Square type
chart.symbol('square');

Set or get radius for symbols.

Set or get radius for highlighted symbols.

Set or get radius for symbols when the group is empty.

RangedFilter is a filter which accepts keys between low and high. It is used to implement X axis brushing for the coordinate grid charts.

Its filterType is 'RangedFilter'

Set or get the height attribute of a chart. The height is applied to the SVGElement generated by the chart when rendered (or re-rendered). If a value is given, then it will be used to calculate the new height and the chart returned for method chaining. The value can either be a numeric, a function, or falsy. If no value is specified then the value of the current height attribute will be returned.

By default, without an explicit height being given, the chart will select the width of its anchor element. If that isn't possible it defaults to 200 (provided by the minHeight property). Setting the value falsy will return the chart to the default behavior.

// Default height
chart.height(function (element) {
    var height = element && element.getBoundingClientRect && element.getBoundingClientRect().height;
    return (height && height > chart.minHeight()) ? height : chart.minHeight();
});

chart.height(250); // Set the chart's height to 250px;
chart.height(function(anchor) { return doSomethingWith(anchor); }); // set the chart's height with a function
chart.height(null); // reset the height to the default auto calculation

Set or get the width attribute of a chart.

// Default width
chart.width(function (element) {
    var width = element && element.getBoundingClientRect && element.getBoundingClientRect().width;
    return (width && width > chart.minWidth()) ? width : chart.minWidth();
});

Set or get the minimum width attribute of a chart. This only has effect when used with the default width function.

Set or get the minimum height attribute of a chart. This only has effect when used with the default height function.

mandatory

Set or get the dimension attribute of a chart. In dc, a dimension can be any valid crossfilter dimension.

If a value is given, then it will be used as the new dimension. If no value is specified then the current dimension will be returned.

var index = crossfilter([]);
var dimension = index.dimension(dc.pluck('key'));
chart.dimension(dimension);

mandatory

Set or get the dimension attribute of a chart. In dc, a dimension can be any valid crossfilter dimension.

If a value is given, then it will be used as the new dimension. If no value is specified then the current dimension will be returned.

var index = crossfilter([]);
var dimension = index.dimension(dc.pluck('key'));
chart.dimension(dimension);

Set the data callback or retrieve the chart's data set. The data callback is passed the chart's group and by default will return group.all. This behavior may be modified to, for instance, return only the top 5 groups.

// Default data function
chart.data(function (group) { return group.all(); });

chart.data(function (group) { return group.top(5); });

mandatory

Set or get the group attribute of a chart. In dc a group is a crossfilter group. Usually the group should be created from the particular dimension associated with the same chart. If a value is given, then it will be used as the new group.

If no value specified then the current group will be returned. If name is specified then it will be used to generate legend label.

var index = crossfilter([]);
var dimension = index.dimension(dc.pluck('key'));
chart.dimension(dimension);
chart.group(dimension.group(crossfilter.reduceSum()));

mandatory

Set or get the group attribute of a chart. In dc a group is a crossfilter group. Usually the group should be created from the particular dimension associated with the same chart. If a value is given, then it will be used as the new group.

If no value specified then the current group will be returned. If name is specified then it will be used to generate legend label.

var index = crossfilter([]);
var dimension = index.dimension(dc.pluck('key'));
chart.dimension(dimension);
chart.group(dimension.group(crossfilter.reduceSum()));

Get or set an accessor to order ordinal dimensions. This uses crossfilter.quicksort.by as the sort.

// Default ordering accessor
_chart.ordering(dc.pluck('key'));

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.

// Similar to:
d3.select('#chart-id').select(selector);

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.

// Similar to:
d3.select('#chart-id').selectAll(selector);

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. Optionally registers the chart within the chartGroup. This class is called internally on chart initialization, but be called again to relocate the chart. However, it will orphan any previously created SVGElements.

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

Returns the root element where a chart resides. Usually it will be the parent div element where the SVGElement was created. You can also pass in a new root element however this is usually handled by dc internally. Resetting the root element on a chart outside of dc internals may have unexpected consequences.

Returns the top SVGElement for this specific chart. You can also pass in a new SVGElement, however this is usually handled by dc internally. Resetting the SVGElement on a chart outside of dc internals may have unexpected consequences.

Remove the chart's SVGElements from the dom and recreate the container SVGElement.

Set or get the filter printer function. The filter printer function is used to generate human friendly text for filter value(s) associated with the chart instance. By default dc charts use a default filter printer printers.filter that provides simple printing support for both single value and ranged filters.

If set, use the visibility attribute instead of the display attribute for showing/hiding chart reset and filter controls, for less disruption to the layout.

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.

Turn off optional control elements within the root element.

Set or get the animation transition duration (in milliseconds) for this chart instance.

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.

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 (in particular dc.redrawAll; 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.

Gets/sets the commit handler. If the chart has a commit handler, the handler will be called when the chart's filters have changed, in order to send the filter data asynchronously to a server.

Unlike other functions in dc.js, the commit handler is asynchronous. It takes two arguments: a flag indicating whether this is a render (true) or a redraw (false), and a callback to be triggered once the commit is filtered. The callback has the standard node.js continuation signature with error first and result second.

Redraws all charts in the same group as this chart, typically in reaction to a filter change. If the chart has a commitHandler, it will be executed and waited for.

Renders all charts in the same group as this chart. If the chart has a commitHandler, it will be executed and waited for

Set or get the has filter handler. The has filter handler is a function that checks to see if the chart's current filters include a specific filter. Using a custom has filter handler allows you to change the way filters are checked for and replaced.

// default has filter handler
chart.hasFilterHandler(function (filters, filter) {
    if (filter === null || typeof(filter) === 'undefined') {
        return filters.length > 0;
    }
    return filters.some(function (f) {
        return filter <= f && filter >= f;
    });
});

// custom filter handler (no-op)
chart.hasFilterHandler(function(filters, filter) {
    return false;
});

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

Set or get the remove filter handler. The remove filter handler is a function that removes a filter from the chart's current filters. Using a custom remove filter handler allows you to change how filters are removed or perform additional work when removing a filter, e.g. when using a filter server other than crossfilter.

Any changes should modify the filters array argument and return that array.

// default remove filter handler
chart.removeFilterHandler(function (filters, filter) {
    for (var i = 0; i < filters.length; i++) {
        if (filters[i] <= filter && filters[i] >= filter) {
            filters.splice(i, 1);
            break;
        }
    }
    return filters;
});

// custom filter handler (no-op)
chart.removeFilterHandler(function(filters, filter) {
    return filters;
});

Set or get the add filter handler. The add filter handler is a function that adds a filter to the chart's filter list. Using a custom add filter handler allows you to change the way filters are added or perform additional work when adding a filter, e.g. when using a filter server other than crossfilter.

Any changes should modify the filters array argument and return that array.

// default add filter handler
chart.addFilterHandler(function (filters, filter) {
    filters.push(filter);
    return filters;
});

// custom filter handler (no-op)
chart.addFilterHandler(function(filters, filter) {
    return filters;
});

Set or get the reset filter handler. The reset filter handler is a function that resets the chart's filter list by returning a new list. Using a custom reset filter handler allows you to change the way filters are reset, or perform additional work when resetting the filters, e.g. when using a filter server other than crossfilter.

This function should return an array.

// default remove filter handler
function (filters) {
    return [];
}

// custom filter handler (no-op)
chart.resetFilterHandler(function(filters) {
    return filters;
});

Filter the chart by the given value or return the current filter if the input parameter is missing. If the passed filter is not currently in the chart's filters, it is added to the filters by the addFilterHandler. If a filter exists already within the chart's filters, it will be removed by the removeFilterHandler. If a null value was passed at the filter, this denotes that the filters should be reset, and is performed by the resetFilterHandler.

Once the filters array has been updated, the filters are applied to the crossfilter.dimension, using the filterHandler.

// filter by a single string
chart.filter('Sunday');
// filter by a single age
chart.filter(18);

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.

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.

Set or get the filter handler. The filter handler is a function that performs the filter action on a specific dimension. Using a custom filter handler allows you to perform additional logic before or after filtering.

// default filter handler
chart.filterHandler(function (dimension, filters) {
    dimension.filter(Symbol.for("clear"));
    if (filters.length === 0) {
        dimension.filter(Symbol.for("clear"));
    } else {
        dimension.filterFunction(function (d) {
            for (var i = 0; i < filters.length; i++) {
                var filter = filters[i];
                if (filter.isFiltered && filter.isFiltered(d)) {
                    return true;
                } else if (filter <= d && filter >= d) {
                    return true;
                }
            }
            return false;
        });
    }
    return filters;
});

// custom filter handler
chart.filterHandler(function(dimension, filter){
    var newFilter = filter + 10;
    dimension.filter(newFilter);
    return newFilter; // set the actual filter value to the new value
});

Set or get the key accessor function. The key accessor function is used to retrieve the key value from the crossfilter group. Key values are used differently in different charts, for example keys correspond to slices in a pie chart and x axis positions in a grid coordinate chart.

// default key accessor
chart.keyAccessor(function(d) { return d.key; });
// custom key accessor for a multi-value crossfilter reduction
chart.keyAccessor(function(p) { return p.value.absGain; });

Set or get the value accessor function. The value accessor function is used to retrieve the value from the crossfilter group. Group values are used differently in different charts, for example values correspond to slice sizes in a pie chart and y axis positions in a grid coordinate chart.

// default value accessor
chart.valueAccessor(function(d) { return d.value; });
// custom value accessor for a multi-value crossfilter reduction
chart.valueAccessor(function(p) { return p.value.percentageGain; });

Set or get the label function. The chart class will use this function to render labels for each child element in the chart, e.g. slices in a pie chart or bubbles in a bubble chart. Not every chart supports the label function, for example line chart does not use this function at all. By default, enables labels; pass false for the second parameter if this is not desired.

// default label function just return the key
chart.label(function(d) { return d.key; });
// label function has access to the standard d3 data binding and can get quite complicated
chart.label(function(d) { return d.data.key + '(' + Math.floor(d.data.value / all.value() * 100) + '%)'; });

Turn on/off label rendering

Set or get the title function. The chart class will use this function to render the SVGElement title (usually interpreted by browser as tooltips) for each child element in the chart, e.g. a slice in a pie chart or a bubble in a bubble chart. Almost every chart supports the title function; however in grid coordinate charts you need to turn off the brush in order to see titles, because otherwise the brush layer will block tooltip triggering.

// default title function just return the key
chart.title(function(d) { return d.key + ': ' + d.value; });
// title function has access to the standard d3 data binding and can get quite complicated
chart.title(function(p) {
   return p.key.getFullYear()
       + '\n'
       + 'Index Gain: ' + numberFormat(p.value.absGain) + '\n'
       + 'Index Gain in Percentage: ' + numberFormat(p.value.percentageGain) + '%\n'
       + 'Fluctuation / Index Ratio: ' + numberFormat(p.value.fluctuationPercentage) + '%';
});

Turn on/off title rendering, or return the state of the render title flag if no arguments are given.

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.

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

Get or set the chart group to which this chart belongs. Chart groups are rendered or redrawn together since it is expected they share the same underlying crossfilter data set.

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

MAPDC-extension function Destroy all leftover parts of the chart.

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

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

Returns the internal numeric ID of the chart.

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.

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

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.

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

Clear all filters associated with this chart

The same can be achieved by calling chart.filter(Symbol.for("clear")).

Filters chart on click. Determines if filter is inverse and passes that information to _chart.filter. Calls _chart.redrawGroup at the end.

chart.handleFilterClick(d3.event, filter);

Get or set the bubble radius scale. By default the bubble chart uses d3.scale.linear().domain([0, 100]) as its radius scale.

Get or set the radius value accessor function. If set, the radius value accessor function will be used to retrieve a data value for each bubble. The data retrieved then will be mapped using the r scale to the actual bubble radius. This allows you to encode a data dimension using bubble size.

Get or set the minimum radius. This will be used to initialize the radius scale's range.

Get or set the minimum radius for label rendering. If a bubble's radius is less than this value then no label will be rendered.

Get or set the maximum relative size of a bubble to the length of x axis. This value is useful when the difference in radius between bubbles is too great.

Get or set the count of elements to that will be included in the cap.

Get or set the label for Others slice when slices cap is specified

Get or set the grouper function that will perform the insertion of data for the Others slice if the slices cap is specified. If set to a falsy value, no others will be added. By default the grouper function computes the sum of all values below the cap.

// Default others grouper
chart.othersGrouper(function (topRows) {
   var topRowsSum = d3.sum(topRows, _chart.valueAccessor()),
       allRows = _chart.group().all(),
       allRowsSum = d3.sum(allRows, _chart.valueAccessor()),
       topKeys = topRows.map(_chart.keyAccessor()),
       allKeys = allRows.map(_chart.keyAccessor()),
       topSet = d3.set(topKeys),
       others = allKeys.filter(function (d) {return !topSet.has(d);});
   if (allRowsSum > topRowsSum) {
       return topRows.concat([{'others': others, 'key': _othersLabel, 'value': allRowsSum - topRowsSum}]);
   }
   return topRows;
});
// Custom others grouper
chart.othersGrouper(function (data) {
    // compute the value for others, presumably the sum of all values below the cap
    var othersSum  = yourComputeOthersValueLogic(data)

    // the keys are needed to properly filter when the others element is clicked
    var othersKeys = yourComputeOthersKeysArrayLogic(data);

    // add the others row to the dataset
    data.push({'key': 'Others', 'value': othersSum, 'others': othersKeys });

    return data;
});

Retrieve current color scale or set a new color scale. This methods accepts any function that operates like a d3 scale.

// alternate categorical scale
chart.colors(d3.scale.category20b());
// ordinal scale
chart.colors(d3.scale.ordinal().range(['red','green','blue']));
// convenience method, the same as above
chart.ordinalColors(['red','green','blue']);
// set a linear scale
chart.linearColors(["#4575b4", "#ffffbf", "#a50026"]);

Convenience method to set the color scale to d3.scale.ordinal with range r.

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

Set or the get color accessor function. This function will be used to map a data point in a crossfilter group to a color value on the color scale. The default function uses the key accessor.

// default index based color accessor
.colorAccessor(function (d, i){return i;})
// color accessor for a multi-value crossfilter reduction
.colorAccessor(function (d){return d.value.absGain;})

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

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

Get the color for the datum d and counter i. This is used internally by charts to retrieve a color.

Get the color for the datum d and counter i. This is used internally by charts to retrieve a color.

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

Get or set the range selection chart associated with this instance. Setting the range selection chart using this function will automatically update its selection brush when the current chart zooms in. In return the given range chart will also automatically attach this chart as its focus chart hence zoom in when range brush updates.

Get or set the scale extent for mouse zooms.

Get or set the zoom restriction for the chart. If true limits the zoom to origional domain of the chart.

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.

Set or get mouse zoom capability flag (default: false). When turned on the chart will be zoomable using the mouse wheel. If the range selector chart is attached zooming will also update the range selection brush on the associated range selector chart.

Retrieve the svg group for the chart body.

mandatory

Get or set the x scale. The x scale can be any d3 quantitive scale or ordinal scale.

// set x to a linear scale
chart.x(d3.scale.linear().domain([-2500, 2500]))
// set x to a time scale to generate histogram
chart.x(d3.time.scale().domain([new Date(1985, 0, 1), new Date(2012, 11, 31)]))

Set or get the xUnits function. The coordinate grid chart uses the xUnits function to calculate the number of data projections on x axis such as the number of bars for a bar chart or the number of dots for a line chart. This function is expected to return a Javascript array of all data points on x axis, or the number of points on the axis. d3 time range functions d3.time.days, d3.time.months, and d3.time.years are all valid xUnits function. dc.js also provides a few units function, see the Utilities section for a list of built-in units functions. The default xUnits function is dc.units.integers.

// set x units to count days
chart.xUnits(d3.time.days);
// set x units to count months
chart.xUnits(d3.time.months);

// A custom xUnits function can be used as long as it follows the following interface:
// units in integer
function(start, end, xDomain) {
     // simply calculates how many integers in the domain
     return Math.abs(end - start);
};

// fixed units
function(start, end, xDomain) {
     // be aware using fixed units will disable the focus/zoom ability on the chart
     return 1000;

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 axis object; therefore it supports any valid d3 axis manipulation. Caution: The x axis is usually generated internally by dc; resetting it may cause unexpected results.

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

Turn on/off elastic x axis behavior. If x axis elasticity is turned on, then the grid chart will attempt to recalculate the x axis range whenever a redraw event is triggered.

Set or get x axis padding for the elastic x axis. The padding will be added to both end of the x axis if elasticX is turned on; otherwise it is ignored.

padding can be an integer or percentage in string (e.g. '10%'). Padding can be applied to number or date x axes. When padding a date axis, an integer represents number of days being padded and a percentage string will be treated the same as an integer.

Returns the number of units displayed on the x axis using the unit measure configured by .xUnits.

Gets or sets whether the chart should be drawn with a right axis instead of a left axis. When used with a chart in a composite chart, allows both left and right Y axes to be shown on a chart.

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

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

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 padded is set to 12 to accomodate the text height.

Get or set the y scale. The y scale is typically automatically determined by the chart implementation.

Set or get the y axis used by the coordinate grid chart instance. This function is most useful when y axis customization is required. The y axis in dc.js is simply an instance of a d3 axis object; therefore it supports any valid d3 axis manipulation. Caution: The y axis is usually generated internally by dc; resetting it may cause unexpected results.

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

Turn on/off elastic y axis behavior. If y axis elasticity is turned on, then the grid chart will attempt to recalculate the y axis range whenever a redraw event is triggered.

Turn on/off horizontal grid lines.

Turn on/off vertical grid lines.

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

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

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

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

Set or get y axis padding for the elastic y axis. The padding will be added to the top of the y axis if elasticY is turned on; otherwise it is ignored.

padding can be an integer or percentage in string (e.g. '10%'). Padding can be applied to number or date axes. When padding a date axis, an integer represents number of days being padded and a percentage string will be treated the same as an integer.

Set or get the rounding function used to quantize the selection when brushing is enabled.

// set x unit round to by month, this will make sure range selection brush will
// select whole months
chart.round(d3.time.month.round);

Get or set the padding in pixels for the clip path. Once set padding will be applied evenly to the top, left, right, and bottom when the clip path is generated. If set to zero, the clip area will be exactly the chart body area minus the margins.

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.

chart.on('renderlet', function(chart) {
    // smooth the rendering through event throttling
    events.trigger(function(){
         // focus some other chart to the range selected by user on this chart
         someOtherChart.focus(chart.filter());
    });
})

Turn on/off the brush-based range filter. When brushing is on then user can drag the mouse across a chart with a quantitative scale to perform range filtering based on the extent of the brush, or click on the bars of an ordinal bar chart or slices of a pie chart to filter and un-filter them. However turning on the brush filter will disable other interactive elements on the chart such as highlighting, tool tips, and reference lines. Zooming will still be possible if enabled, but only via scrolling (panning will be disabled.)

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

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.

Set or get the xUnits function. The coordinate grid chart uses the xUnits function to calculate the number of data projections on x axis such as the number of bars for a bar chart or the number of dots for a line chart. This function is expected to return a Javascript array of all data points on x axis, or the number of points on the axis. d3 time range functions d3.time.days, d3.time.months, and d3.time.years are all valid xUnits function. dc.js also provides a few units function, see the Utilities section for a list of built-in units functions. The default xUnits function is units.integers.

// set x units to count days
chart.xUnits(d3.time.days)
// set x units to count months
chart.xUnits(d3.time.months)

// A custom xUnits function can be used as long as it follows the following interface:
// units in integer
function(start, end, xDomain) {
     // simply calculates how many integers in the domain
     return Math.abs(end - start)
}

// fixed units
function(start, end, xDomain) {
     // be aware using fixed units will disable the focus/zoom ability on the chart
     return 1000
}

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 axis object; therefore it supports any valid d3 axis manipulation. Caution: The x axis is usually generated internally by dc resetting it may cause unexpected results.

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

Turn on/off elastic x axis behavior. If x axis elasticity is turned on, then the grid chart will attempt to recalculate the x axis range whenever a redraw event is triggered.

Set or get x axis padding for the elastic x axis. The padding will be added to both end of the x axis if elasticX is turned on; otherwise it is ignored.

padding can be an integer or percentage in string (e.g. "10%"). Padding can be applied to number or date x axes. When padding a date axis, an integer represents number of days being padded and a percentage string will be treated the same as an integer.

Returns the number of units displayed on the x axis using the unit measure configured by .xUnits.

Gets or sets whether the chart should be drawn with a right axis instead of a left axis. When used with a chart in a composite chart, allows both left and right Y axes to be shown on a chart.

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

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

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 padded is set to 12 to accomodate the text height.

Set or get the y axis used by the coordinate grid chart instance. This function is most useful when y axis customization is required. The y axis in dc.js is simply an instance of a d3 axis object; therefore it supports any valid d3 axis manipulation. Caution: The y axis is usually generated internally by dc resetting it may cause unexpected results.

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

Turn on/off elastic y axis behavior. If y axis elasticity is turned on, then the grid chart will attempt to recalculate the y axis range whenever a redraw event is triggered.

Turn on/off horizontal grid lines.

Turn on/off vertical grid lines.

Set or get y axis padding for the elastic y axis. The padding will be added to the top of the y axis if elasticY is turned on; otherwise it is ignored.

padding can be an integer or percentage in string (e.g. "10%"). Padding can be applied to number or date axes. When padding a date axis, an integer represents number of days being padded and a percentage string will be treated the same as an integer.

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

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

Stack a new crossfilter group onto this chart with an optional custom value accessor. All stacks in the same chart will share the same key accessor and therefore the same set of keys.

For example, in a stacked bar chart, the bars of each stack will be positioned using the same set of keys on the x axis, while stacked vertically. If name is specified then it will be used to generate the legend label.

// stack group using default accessor
chart.stack(valueSumGroup)
// stack group using custom accessor
.stack(avgByDayGroup, function(d){return d.value.avgByDay;});

Allow named stacks to be hidden or shown by clicking on legend items. This does not affect the behavior of hideStack or showStack.

Hide all stacks on the chart with the given name. The chart must be re-rendered for this change to appear.

Show all stacks on the chart with the given name. The chart must be re-rendered for this change to appear.

Set or get the title function. Chart class will use this function to render svg title (usually interpreted by browser as tooltips) for each child element in the chart, i.e. a slice in a pie chart or a bubble in a bubble chart. Almost every chart supports title function however in grid coordinate chart you need to turn off brush in order to use title otherwise the brush layer will block tooltip trigger.

If the first argument is a stack name, the title function will get or set the title for that stack. If stackName is not provided, the first stack is implied.

// set a title function on 'first stack'
chart.title('first stack', function(d) { return d.key + ': ' + d.value; });
// get a title function from 'second stack'
var secondTitleFunction = chart.title('second stack');

Gets or sets the stack layout algorithm, which computes a baseline for each stack and propagates it to the next

This function generates an argument for the Coordinate Grid Chart .xUnits function specifying that the x values are floating-point numbers with the given precision. The returned function determines how many values at the given precision will fit into the range supplied in its start and end parameters.

// specify values (and ticks) every 0.1 units
chart.xUnits(units.fp.precision(0.1)
// there are 500 units between 0.5 and 1 if the precision is 0.001
var thousandths = units.fp.precision(0.001);
thousandths(0.5, 1.0) // returns 500