dc.js Class: lineChart (original) (raw)

dc. lineChart

new lineChart(parent [, chartGroup])

Parameters:
Name Type Argument Description
parent String|node d3.selection dc.compositeChart
chartGroup String 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.lineChart

Example

// create a line chart under #chart-container1 element using the default global chart group var chart1 = dc.lineChart('#chart-container1'); // create a line chart under #chart-container2 element using chart group A var chart2 = dc.lineChart('#chart-container2', 'chartGroupA'); // create a sub-chart under a composite parent chart var chart3 = dc.lineChart(compositeChart);

Methods

curve( [curve])

Parameters:
Name Type Argument Default Description
curve d3.curve d3.curveLinear

Source:

See:

Returns:

Type

d3.curve|dc.lineChart

Example

// default chart .curve(d3.curveLinear); // Add tension to curves that support it chart .curve(d3.curveCardinal.tension(0.5)); // You can use some specialized variation like // https://en.wikipedia.org/wiki/Centripetal_Catmull%E2%80%93Rom_spline chart .curve(d3.curveCatmullRom.alpha(0.5));

dashStyle( [dashStyle])

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

Parameters:
Name Type Argument Default Description
dashStyle Array. []

Source:

See:

Returns:

Type

Array.|dc.lineChart

Example

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

defined( [defined])

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 toline.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. Seethis GitHub commentfor more details and an example.

Parameters:
Name Type Argument Description
defined function

Source:

See:

Returns:

Type

function|dc.lineChart

dotRadius( [dotRadius])

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

Parameters:
Name Type Argument Default Description
dotRadius Number 5

Source:

Returns:

Type

Number|dc.lineChart

interpolate( [interpolate])

Gets or sets the interpolator to use for lines drawn, by string name, allowing e.g. step functions, splines, and cubic interpolation.

Possible values are: 'linear', 'linear-closed', 'step', 'step-before', 'step-after', 'basis', 'basis-open', 'basis-closed', 'bundle', 'cardinal', 'cardinal-open', 'cardinal-closed', and 'monotone'.

This function exists for backward compatibility. Use dc.lineChart#curvewhich is generic and provides more options. Value set through .curve takes precedence over .interpolate and .tension.

Parameters:
Name Type Argument Default Description
interpolate d3.curve d3.curveLinear

Deprecated:

Source:

See:

Returns:

Type

d3.curve|dc.lineChart

renderArea( [renderArea])

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.

Parameters:
Name Type Argument Default Description
renderArea Boolean false

Source:

Returns:

Type

Boolean|dc.lineChart

renderDataPoints( [options])

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.

Parameters:
Name Type Argument Default Description
options Object {fillOpacity: 0.8, strokeOpacity: 0.0, radius: 2}

Source:

Returns:

Type

Object|dc.lineChart

Example

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

tension( [tension])

Gets or sets the tension to use for lines drawn, in the range 0 to 1.

Passed to the d3 curve functionif it provides a .tension function. Example:curveCardinal.tension.

This function exists for backward compatibility. Use dc.lineChart#curvewhich is generic and provides more options. Value set through .curve takes precedence over .interpolate and .tension.

Parameters:
Name Type Argument Default Description
tension Number 0

Deprecated:

Source:

See:

Returns:

Type

Number|dc.lineChart

xyTipsOn( [xyTipsOn])

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 chartbrush is on

Parameters:
Name Type Argument Default Description
xyTipsOn Boolean false

Source:

Returns:

Type

Boolean|dc.lineChart