dc.js

Class: boxPlot

dc. boxPlot

new boxPlot(parent [, chartGroup])

A box plot is a chart that depicts numerical data via their quartile ranges.

Examples:

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:
Returns:
Type
dc.boxPlot
Example
// create a box plot under #chart-container1 element using the default global chart group
var boxPlot1 = dc.boxPlot('#chart-container1');
// create a box plot under #chart-container2 element using chart group A
var boxPlot2 = dc.boxPlot('#chart-container2', 'chartGroupA');

Methods

boldOutlier( [show])

Get or set whether outliers will be drawn bold.

Parameters:
Name Type Argument Default Description
show Boolean <optional>
 false
Source:
Returns:
Type
Boolean | dc.boxPlot
Example
// If outliers are rendered display as bold
chart.boldOutlier(true);

boxPadding( [padding])

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.

Parameters:
Name Type Argument Default Description
padding Number <optional>
 0.8
Source:
See:
Returns:
Type
Number | dc.boxPlot

boxWidth( [boxWidth])

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.

Parameters:
Name Type Argument Default Description
boxWidth Number | function <optional>
 0.5
Source:
Returns:
Type
Number | function | dc.boxPlot
Example
// Using numerical parameter
chart.boxWidth(10);
// Using function
chart.boxWidth((innerChartWidth, xUnits) { ... });

dataOpacity( [opacity])

Get or set the opacity when rendering data.

Parameters:
Name Type Argument Default Description
opacity Number <optional>
 0.3
Source:
Returns:
Type
Number | dc.boxPlot
Example
// If individual data points are rendered increase the opacity.
chart.dataOpacity(0.7);

dataWidthPortion( [percentage])

Get or set the portion of the width of the box to show data points.

Parameters:
Name Type Argument Default Description
percentage Number <optional>
 0.8
Source:
Returns:
Type
Number | dc.boxPlot
Example
// If individual data points are rendered increase the data box.
chart.dataWidthPortion(0.9);

outerPadding( [padding])

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.

Parameters:
Name Type Argument Default Description
padding Number <optional>
 0.5
Source:
Returns:
Type
Number | dc.boxPlot

renderDataPoints( [show])

Get or set whether individual data points will be rendered.

Parameters:
Name Type Argument Default Description
show Boolean <optional>
 false
Source:
Returns:
Type
Boolean | dc.boxPlot
Example
// Enable rendering of individual data points
chart.renderDataPoints(true);

showOutliers( [show])

Get or set whether outliers will be rendered.

Parameters:
Name Type Argument Default Description
show Boolean <optional>
 true
Source:
Returns:
Type
Boolean | dc.boxPlot
Example
// Disable rendering of outliers
chart.showOutliers(false);

tickFormat( [tickFormat])

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

Parameters:
Name Type Argument Description
tickFormat function <optional>
Source:
Returns:
Type
Number | function | dc.boxPlot
Example
// format ticks to 2 decimal places
chart.tickFormat(d3.format('.2f'));

yRangePadding( [yRangePadding])

Get or set the amount of padding to add, in pixel coordinates, to the top and bottom of the chart to accommodate box/whisker labels.

Parameters:
Name Type Argument Default Description
yRangePadding function <optional>
 8
Source:
Returns:
Type
Number | function | dc.boxPlot
Example
// allow more space for a bigger whisker font
chart.yRangePadding(12);