Line chart point styling properties
Point styling in line charts is controlled by: pointBackgroundColor (the fill color for points), pointBorderColor (the border color for points), pointBorderWidth (the width of the point border in pixels), pointHitRadius (the pixel size of the non-displayed point that reacts to mouse events), pointRadius (the radius of the point shape, if set to 0 the point is not rendered), pointRotation (the rotation of the point in degrees), and pointStyle (style of the point). If undefined, these values fallback first to the dataset options then to the associated elements.point.* options.
Line chart configuration namespaces
Line chart options can be applied at multiple scopes: data.datasets[index] for options for a specific dataset only, options.datasets.line for options for all line datasets, options.elements.line for options for all line elements, options.elements.point for options for all point elements, and options for options for the whole chart.
Line chart dataset properties table
Line chart datasets support these properties: backgroundColor (Color, scriptable, default 'rgba(0, 0, 0, 0.1)'), borderCapStyle (string, scriptable, default 'butt'), borderColor (Color, scriptable, default 'rgba(0, 0, 0, 0.1)'), borderDash (number[], scriptable, default []), borderDashOffset (number, scriptable, default 0.0), borderJoinStyle ('round'|'bevel'|'miter', scriptable, default 'miter'), borderWidth (number, scriptable, default 3), clip (number|object|false, default undefined), cubicInterpolationMode (string, scriptable, default 'default'), data (object|object[]|number[]|string[], required), drawActiveElementsOnTop (boolean, scriptable and indexable, default true), fill (boolean|string, scriptable, default false), hoverBackgroundColor (Color, scriptable, default undefined), hoverBorderCapStyle (string, scriptable, default undefined), hoverBorderColor (Color, scriptable, default undefined), hoverBorderDash (number[], scriptable, default undefined), hoverBorderDashOffset (number, scriptable, default undefined), hoverBorderJoinStyle ('round'|'bevel'|'miter', scriptable, default undefined), hoverBorderWidth (number, scriptable, default undefined), indexAxis (string, default 'x'), label (string, default ''), order (number, default 0), pointBackgroundColor (Color, scriptable and indexable, default 'rgba(0, 0, 0, 0.1)'), pointBorderColor (Color, scriptable and indexable, default 'rgba(0, 0, 0, 0.1)'), pointBorderWidth (number, scriptable and indexable, default 1), pointHitRadius (number, scriptable and indexable, default 1), pointHoverBackgroundColor (Color, scriptable and indexable, default undefined), pointHoverBorderColor (Color, scriptable and indexable, default undefined), pointHoverBorderWidth (number, scriptable and indexable, default 1), pointHoverRadius (number, scriptable and indexable, default 4), pointRadius (number, scriptable and indexable, default 3), pointRotation (number, scriptable and indexable, default 0), pointStyle (pointStyle, scriptable and indexable, default 'circle'), segment (object, default undefined), showLine (boolean, default true), spanGaps (boolean|number, default undefined), stack (string, default 'line'), stepped (boolean|string, default false), tension (number, default 0), xAxisID (string, default first x axis), yAxisID (string, default first y axis).
Line chart purpose and use case
A line chart is a way of plotting data points on a line. It is often used to show trend data or the comparison of two data sets.
Line chart internal data format
The internal data format for line charts is {x, y}.
Line chart basic example
Basic line chart example with configuration: const labels = Utils.months({count: 7}); const data = { labels: labels, datasets: [{ label: 'My First Dataset', data: [65, 59, 80, 81, 56, 55, 40], fill: false, borderColor: 'rgb(75, 192, 192)', tension: 0.1 }] }; const config = { type: 'line', data: data, };
Vertical line chart with indexAxis
A vertical line chart is created by setting indexAxis to 'y' in the options object. The default is 'x' which shows horizontal lines. When using vertical line charts, configuration options specified on the x-axis in a horizontal line chart are applied to the y-axis in a vertical line chart.
Stacked area chart configuration
Line charts can be configured into stacked area charts by setting stacked: true on the y-axis. Example configuration: const stackedLine = new Chart(ctx, { type: 'line', data: data, options: { scales: { y: { stacked: true } } } });
Set global line chart options
Global line chart settings are stored in Chart.overrides.line. Changing global options only affects charts created after the change; existing charts are not changed. For example, to configure all line charts with spanGaps = true: Chart.overrides.line.spanGaps = true;
Line chart general properties
General line chart dataset properties: clip (how to clip relative to chartArea; positive value allows overflow, negative value clips that many pixels inside chartArea, 0 clips at chartArea; can also be configured per side as clip: {left: 5, top: false, right: -2, bottom: 0}), drawActiveElementsOnTop (draw the active points of a dataset over the other points), indexAxis ('x' for horizontal lines and 'y' for vertical lines), label (the label for the dataset which appears in the legend and tooltips), order (the drawing order of dataset, also affects order for stacking, tooltip and legend), stack (the ID of the group to which this dataset belongs to for stacking), xAxisID (the ID of the x-axis to plot this dataset on), yAxisID (the ID of the y-axis to plot this dataset on).
Stepped line interpolation modes
The stepped property supports: false (no step interpolation, default), true (step-before interpolation, equivalent to 'before'), 'before' (step-before interpolation), 'after' (step-after interpolation), and 'middle' (step-middle interpolation). When stepped is set to anything other than false, the tension property is ignored.
Line segment styling with scriptable options
Line segment styles can be overridden by scriptable options in the segment object. All border* and backgroundColor options are supported. Segment styles are resolved for each section of the line between each point. To style gaps, spanGaps must be enabled. Context for scriptable segments contains: type ('segment'), p0 (first point element), p1 (second point element), p0DataIndex (index of first point in data array), p1DataIndex (index of second point in data array), and datasetIndex (dataset index).
Cubic interpolation modes
Line charts support two cubic interpolation modes. 'default' uses a custom weighted cubic interpolation that produces pleasant curves for all types of datasets. 'monotone' is suited to y = f(x) datasets as it preserves monotonicity of the dataset and ensures local extremums stay at input data points. If left untouched (undefined), the global options.elements.line.cubicInterpolationMode property is used.
Line chart interaction properties for points
Point interaction properties control appearance on hover: pointHoverBackgroundColor (point background color when hovered), pointHoverBorderColor (point border color when hovered), pointHoverBorderWidth (border width of point when hovered), pointHoverRadius (the radius of the point when hovered).
Line chart line styling properties
Line styling in line charts is controlled by: backgroundColor (the line fill color), borderCapStyle (cap style of the line), borderColor (the line color), borderDash (length and spacing of dashes), borderDashOffset (offset for line dashes), borderJoinStyle (line joint style), borderWidth (the line width in pixels), fill (how to fill the area under the line), tension (Bezier curve tension of the line, set to 0 to draw straight lines, ignored if monotone cubic interpolation is used), showLine (if false, the line is not drawn for this dataset), and spanGaps (if true, lines will be drawn between points with no or null data; if false, points with null data create a break in the line; can also be a number specifying the maximum gap length to span). If undefined, values fallback to the associated elements.line.* options.
Enable spanGaps example
new Chart(ctx, {
type: 'line',
data: {
datasets: [{
spanGaps: true // enable for a single dataset
}]
},
options: {
spanGaps: true // enable for all datasets
}
});
Enable spanGaps for better line performance
Enabling `spanGaps` can improve performance with large data point counts by disabling line segmentation, which can be an unnecessary step. Set `spanGaps: true` in dataset options or in options to apply to all datasets.
Line automatic data decimation conditions
Line elements automatically decimate data during draw when `tension`, `stepped`, and `borderDash` are left set to their default values of `false`, `0`, and `[]` respectively. This improves rendering speed by skipping invisible line segments.
Leave Bézier curves disabled for better performance
Bézier curves are disabled by default in line charts. Keeping them disabled improves render times since drawing straight lines is more performant than drawing Bézier curves.
Decimate data for large datasets
When displaying many data points on a graph that is only a few hundred pixels wide, decimating data significantly improves performance by reducing memory and rendering overhead. The decimation plugin can be used with line charts to decimate data before rendering. Line charts can also perform automatic data decimation during draw, but manually decimating data before passing it in provides better performance.
Disable point drawing example
new Chart(ctx, {
type: 'line',
data: {
datasets: [{
pointRadius: 0 // disable for a single dataset
}]
},
options: {
datasets: {
line: {
pointRadius: 0 // disable for all 'line' datasets
}
},
elements: {
point: {
radius: 0 // default to disabled in all datasets
}
}
}
});
Disable point drawing in line charts
When there are many data points, disabling point rendering and drawing only lines can improve performance. Set `pointRadius: 0` at the dataset level, for all datasets of a type, or globally.
Disable line drawing example
new Chart(ctx, {
type: 'line',
data: {
datasets: [{
showLine: false // disable for a single dataset
}]
},
options: {
showLine: false // disable for all datasets
}
});
Disable line drawing in line charts
When there are many data points, disabling line rendering and drawing only points can improve performance. Set `showLine: false` in dataset options or in options to apply to all datasets.
Line chart minimum components
Line chart requires LineController, LineElement, PointElement, and default scales CategoryScale (x-axis) and LinearScale (y-axis).
Linear gradient example code for line chart
```js
let width, height, gradient;
function getGradient(ctx, chartArea) {
const chartWidth = chartArea.right - chartArea.left;
const chartHeight = chartArea.bottom - chartArea.top;
if (!gradient || width !== chartWidth || height !== chartHeight) {
width = chartWidth;
height = chartHeight;
gradient = ctx.createLinearGradient(0, chartArea.bottom, 0, chartArea.top);
gradient.addColorStop(0, Utils.CHART_COLORS.blue);
gradient.addColorStop(0.5, Utils.CHART_COLORS.yellow);
gradient.addColorStop(1, Utils.CHART_COLORS.red);
}
return gradient;
}
const data = {
labels: Utils.months({count: 7}),
datasets: [
{
label: 'Dataset 1',
data: Utils.numbers({count: 7, min: -100, max: 100}),
borderColor: function(context) {
const chart = context.chart;
const {ctx, chartArea} = chart;
if (!chartArea) {
return;
}
return getGradient(ctx, chartArea);
},
},
]
};
```
This example demonstrates creating and caching a vertical linear gradient that changes color from blue at the bottom to yellow in the middle to red at the top of a line chart.
Scriptable borderColor with linear gradient on line chart
The borderColor option in a line chart dataset can be set to a function that receives a context object containing the chart, ctx (canvas context), and chartArea. This allows dynamic computation of the border color. The example creates a linear gradient using ctx.createLinearGradient(x0, y0, x1, y1) where coordinates are in canvas pixels. The gradient is cached and only recreated when the chart dimensions change. The function should check if chartArea exists before using it, as it may be undefined on initial chart load.
Line chart with multiple datasets
A line chart can contain multiple datasets, each with its own label, data array, borderColor, backgroundColor, and tension properties. Datasets are defined in the datasets array of the chart data object.
Line chart fill boundary values
Line charts support fill boundary options that control how the area beneath the line is filled. The boundary values are 'start', 'end', and 'origin'. Setting fill to false disables filling entirely.
Line chart fill property options
The fill property on a line chart dataset can be set to false (no fill, the default), 'origin' (fill to zero or the origin), 'start' (fill to the start), or 'end' (fill to the end).
Line tension for smooth curves
Line chart smoothness is controlled by the elements.line.tension option. A tension value of 0 produces straight lines, while values like 0.4 produce curved lines.
Line chart with fill configuration example
Example of configuring a line chart with filled areas: datasets can include fill: true, borderColor, and backgroundColor properties. The filler plugin options are configured under options.plugins.filler with properties like drawTime and propagate.
Line chart with multiple datasets example
Example showing a line chart with 10 datasets (D0-D9) with different fill modes, colors, and visibility settings. Each dataset has borderColor and backgroundColor properties. The chart demonstrates fill options including fill: false, fill: true, fill with string values like '-1', '+2', 'end', fill with numeric dataset indices like 1 and 8, and fill as an object with conditional colors based on above/below conditions and a target value.
Line chart dataset fill option values
The fill option in a line chart dataset can be set to: false (no fill), true (fill to the previous dataset), 'end' (fill to the end/axis), a number like -1, 1, 2, 8 (fill to a specific dataset index, where negative numbers reference datasets before the current one and positive numbers reference datasets after), or an object with properties 'above', 'below', and 'target' for conditional fill colors and target values.
Line chart hidden dataset property
A dataset in a line chart can have a hidden property set to true to hide that dataset from rendering.
Line chart handling of NaN values
When a dataset contains NaN values, the line chart breaks at that point. In the interpolation modes example, a NaN value at position 6 causes the line to break between the data point at index 5 and the data point at index 7.
Line interpolation example with monotone, cubic, and linear modes
This example demonstrates three interpolation modes for line charts. The cubicInterpolationMode: 'monotone' dataset uses cubic interpolation that preserves monotonicity with tension: 0.4. The cubic mode dataset uses default cubic interpolation with tension: 0.4. The linear dataset uses the default linear interpolation. All three datasets display the same data points including a NaN value that breaks the line.
Line chart cubic interpolation modes
The cubicInterpolationMode property controls how line charts interpolate between data points. The 'monotone' mode produces smooth curves that respect monotonicity, while the default cubic mode produces smooth curves without this constraint. Linear interpolation is the default when tension is not set.
Line chart tension property for interpolation
The tension property on a line chart dataset controls the smoothness of cubic interpolation curves. A tension value of 0.4 produces noticeably curved lines between data points. Tension ranges from 0 (straight lines) to 1 (maximum curvature).
Line chart configuration structure
Line chart configuration requires type set to 'line', a data object containing labels and datasets arrays, and an options object. The options object can include responsive boolean, and a plugins object for legend and title configuration.
Randomize action handler for line chart datasets
The Randomize action modifies all datasets in a line chart by replacing their data arrays with new random values generated by Utils.numbers({count: chart.data.labels.length, min: -100, max: 100}), then calls chart.update() to refresh the visualization.
Add Data action handler for line charts
The Add Data action adds a new data point to all existing datasets and a new label. It updates chart.data.labels using Utils.months(), then pushes new values to each dataset's data array using Utils.rand(-100, 100), then calls chart.update().
Add Dataset action for line charts
The Add Dataset action creates a new dataset object with label, backgroundColor (using Utils.transparentize() for transparency), borderColor, and data array, then pushes it to chart.data.datasets and calls chart.update().
Remove Data action for line charts
The Remove Data action removes the last data point and label. It uses splice(-1, 1) to remove the last label, then pops the last value from each dataset's data array, then calls chart.update().
Remove Dataset action for line charts
The Remove Dataset action removes the last dataset from the chart by calling chart.data.datasets.pop(), then calls chart.update().
Line chart basic example with multiple datasets
A line chart example showing how to configure two datasets with labels, data values, border colors, and background colors. The chart uses Utils.numbers() to generate random data points between -100 and 100, and Utils.months() to generate month labels for the x-axis. Each dataset has a label, numeric data array, borderColor, and backgroundColor (using Utils.transparentize() for transparency).
Line chart point styling example with multiple styles
This example demonstrates how to dynamically change the pointStyle property of line chart datasets. It shows a line chart with 6 days of data, initializes points with circle style, pointRadius of 10, and pointHoverRadius of 15. The example includes interactive handlers that update the pointStyle to different values (circle, cross, crossRot, dash, line, rect, rectRounded, rectRot, star, triangle, or false) and call chart.update() to apply the changes.
Line chart pointStyle property available values
The pointStyle property for line chart datasets accepts the following string values: 'circle' (default), 'cross', 'crossRot', 'dash', 'line', 'rect', 'rectRounded', 'rectRot', 'star', 'triangle'. The value false can also be used to hide points.
Multi-axis line chart with separate y axes
A line chart can display multiple datasets with different y axes by assigning each dataset to a different yAxisID in its configuration. In the example, Dataset 1 is assigned to 'y' axis (left side) and Dataset 2 is assigned to 'y1' axis (right side). Each axis is configured separately in the scales object with its own position property.
Complete multi-axis line chart configuration example
const config = {
type: 'line',
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
datasets: [
{
label: 'Dataset 1',
data: [10, 20, 15, 25, 30, 20, 10],
borderColor: '#FF6384',
backgroundColor: 'rgba(255, 99, 132, 0.5)',
yAxisID: 'y',
},
{
label: 'Dataset 2',
data: [100, 200, 150, 250, 300, 200, 100],
borderColor: '#36A2EB',
backgroundColor: 'rgba(54, 162, 235, 0.5)',
yAxisID: 'y1',
}
]
},
options: {
responsive: true,
interaction: {
mode: 'index',
intersect: false,
},
plugins: {
title: {
display: true,
text: 'Chart.js Line Chart - Multi Axis'
}
},
scales: {
y: {
type: 'linear',
display: true,
position: 'left',
},
y1: {
type: 'linear',
display: true,
position: 'right',
grid: {
drawOnChartArea: false,
},
},
}
},
};
This example shows a complete multi-axis line chart with two datasets using separate y axes positioned on the left and right sides.
Dataset yAxisID property for multi-axis charts
Each dataset in a multi-axis chart must specify which y-axis it uses via the yAxisID property. The value should match the scale ID defined in the scales configuration object.
stepped line chart example
Example showing how to create a stepped line chart and toggle between different stepping modes. The dataset has stepped: true, and handlers update this property to false, true, 'before', 'after', or 'middle' to change interpolation behavior. The title plugin displays the current stepped value using ctx.chart.data.datasets[0].stepped.
stepped dataset option values for line charts
The stepped option for line chart datasets controls how the line interpolates between points. It accepts the following values: false (default, standard line interpolation), true (equivalent to 'before'), 'before' (horizontal line then vertical), 'after' (vertical line then horizontal), and 'middle' (horizontal line to midpoint then vertical).
Segment styling with scriptable options for line charts
Line chart segments can be styled using scriptable options in the segment configuration. The context parameter ctx provides access to p0 and p1 properties representing the start and end points of each segment, and parsed data. Helper functions can inspect ctx.p0.skip and ctx.p1.skip to detect gaps, and ctx.p0.parsed.y and ctx.p1.parsed.y to compare values for conditional styling.
Segment configuration example with skipped and down styling
The segment object accepts borderColor and borderDash properties that can use scriptable functions. A skipped helper function returns a value if either endpoint is skipped (gap in data), returning undefined otherwise. A down helper function returns a value if the segment goes downward (p0.parsed.y > p1.parsed.y), returning undefined otherwise. These can be combined: borderColor: ctx => skipped(ctx, 'rgb(0,0,0,0.2)') || down(ctx, 'rgb(192,75,75)') applies one color to gaps and another to downward segments.
Using spanGaps to render lines across NaN values in line charts
When spanGaps is set to true in the dataset configuration, line segments will be drawn across NaN or skipped data points. Without spanGaps, gaps in the data create breaks in the line. The segment.borderDash option can be used to visually distinguish these spanning segments, for example with a dashed pattern.
backgroundColor and borderColor for line charts
Line chart datasets use backgroundColor to define the fill color under the line and borderColor to define the color of the line itself. These properties work together to style the appearance of line elements.
borderDash property for dashed line styling
The borderDash property accepts an array of numbers that define the pattern of dashes and gaps in a line. In the example, borderDash: [5, 5] creates a line with 5-pixel dashes separated by 5-pixel gaps.
fill property controls line chart fill
The fill property is a boolean that controls whether the area under a line is filled with color. When fill: true, the backgroundColor is used to fill the area under the line. When fill: false, only the line itself is drawn without fill.
Line chart styling example with multiple datasets
A line chart can display multiple datasets with different styling options in a single chart. Example shows creating three line datasets with different properties: one unfilled with solid line, one dashed line, and one filled line. Each dataset has its own label, backgroundColor, borderColor, and styling properties like borderDash and fill.