dc.js

Class: LineChart

LineChart

Concrete line/area chart implementation.

Examples:

new LineChart(parent [, chartGroup])

Create a Line Chart.

Parameters:
Name Type Argument Description
parent String | node | d3.selection | CompositeChart

Any valid d3 single selector specifying a dom block element such as a div; or a dom element or d3 selection. If the line chart is a sub-chart in a Composite Chart then pass in the parent composite chart instance instead.
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 line chart under #chart-container1 element using the default global chart group
var chart1 = new LineChart('#chart-container1');
// create a line chart under #chart-container2 element using chart group A
var chart2 = new LineChart('#chart-container2', 'chartGroupA');
// create a sub-chart under a composite parent chart
var chart3 = new LineChart(compositeChart);

Classes

LineChart

Methods

curve( [curve])

Gets or sets the curve factory to use for lines and areas drawn, allowing e.g. step functions, splines, and cubic interpolation. Typically you would use one of the interpolator functions provided by d3 curves.

Replaces the use of LineChart#interpolate and LineChart#tension in dc.js < 3.0

This is passed to line.curve and area.curve.

Parameters:
Name Type Argument Default Description
curve d3.curve <optional>
 d3.curveLinear
Source:
See:
Returns:
Type
d3.curve | 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.<Number> <optional>
 []
Source:
See:
Returns:
Type
Array.<Number> | 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 to 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 this GitHub comment for more details and an example.

Parameters:
Name Type Argument Description
defined function <optional>
Source:
See:
Returns:
Type
function | 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 <optional>
 5
Source:
Returns:
Type
Number | 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 LineChart#curve which 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 <optional>
 d3.curveLinear
Deprecated:
Source:
See:
Returns:
Type
d3.curve | 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 <optional>
 false
Source:
Returns:
Type
Boolean | 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 <optional>
 {fillOpacity: 0.8, strokeOpacity: 0.0, radius: 2}
Source:
Returns:
Type
Object | 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 function if it provides a .tension function. Example: curveCardinal.tension.

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

Parameters:
Name Type Argument Default Description
tension Number <optional>
 0
Deprecated:
Source:
See:
Returns:
Type
Number | 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 chart brush is on

Parameters:
Name Type Argument Default Description
xyTipsOn Boolean <optional>
 false
Source:
Returns:
Type
Boolean | LineChart