dc.js

Class: RowChart

RowChart

Concrete row chart implementation.

Examples:

new RowChart(parent [, chartGroup])

Create a Row 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 row chart under #chart-container1 element using the default global chart group
var chart1 = new RowChart('#chart-container1');
// create a row chart under #chart-container2 element using chart group A
var chart2 = new RowChart('#chart-container2', 'chartGroupA');

Classes

RowChart

Methods

elasticX( [elasticX])

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

Parameters:
Name Type Argument Description
elasticX Boolean <optional>
Source:
Returns:
Type
Boolean | RowChart

fixedBarHeight( [fixedBarHeight])

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

Parameters:
Name Type Argument Default Description
fixedBarHeight Boolean | Number <optional>
 false
Source:
Returns:
Type
Boolean | Number | RowChart
Example
chart.fixedBarHeight( chartheight - (count + 1) * gap / count);

gap( [gap])

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

Parameters:
Name Type Argument Default Description
gap Number <optional>
 5
Source:
Returns:
Type
Number | RowChart

labelOffsetX( [labelOffsetX])

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

Parameters:
Name Type Argument Default Description
labelOffsetX Number <optional>
 10
Source:
Returns:
Type
Number | RowChart

labelOffsetY( [labelOffsety])

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

Parameters:
Name Type Argument Default Description
labelOffsety Number <optional>
 15
Source:
Returns:
Type
Number | RowChart

renderTitleLabel( [renderTitleLabel])

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

Parameters:
Name Type Argument Default Description
renderTitleLabel Boolean <optional>
 false
Source:
Returns:
Type
Boolean | RowChart

titleLabelOffsetX( [titleLabelOffsetX])

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

Parameters:
Name Type Argument Default Description
titleLabelOffsetX Number <optional>
 2
Source:
Returns:
Type
Number | RowChart

x( [scale])

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

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

xAxis( [xAxis])

Get or sets the x axis for the row chart instance. See the d3.axis documention for more information.

Parameters:
Name Type Argument Description
xAxis d3.axis <optional>
Source:
Returns:
Type
d3.axis | RowChart
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]);
// use a top-oriented axis. Note: position of the axis and grid lines will need to
// be set manually, see https://dc-js.github.io/dc.js/examples/row-top-axis.html
chart.xAxis(d3.axisTop())