2021-03-30 16:32:39 +02:00
# Line Chart
2019-12-07 01:47:00 +01:00
2017-03-21 01:36:54 +01:00
A line chart is a way of plotting data points on a line. Often, it is used to show trend data, or the comparison of two data sets.
2021-03-30 16:32:39 +02:00
```js chart-editor
// < block:setup:1 >
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
}]
};
// < / block:setup >
// < block:config:0 >
const config = {
type: 'line',
data: data,
};
// < / block:config >
module.exports = {
actions: [],
config: config,
};
```
2017-04-02 03:22:06 +02:00
2021-04-04 00:08:20 +02:00
## Dataset Properties
2019-12-07 01:47:00 +01:00
2021-04-04 00:08:20 +02:00
Namespaces:
2017-03-21 01:36:54 +01:00
2021-04-04 00:08:20 +02:00
* `data.datasets[index]` - options for this dataset only
* `options.datasets.line` - options for all line datasets
* `options.elements.line` - options for all [line elements ](../configuration/elements.md#line-configuration )
* `options.elements.point` - options for all [point elements ](../configuration/elements.md#point-configuration )
* `options` - options for the whole chart
2017-03-21 01:36:54 +01:00
The line chart allows a number of properties to be specified for each dataset. These are used to set display properties for a specific dataset. For example, the colour of a line is generally set this way.
2019-01-29 13:34:16 +01:00
| Name | Type | [Scriptable ](../general/options.md#scriptable-options ) | [Indexable ](../general/options.md#indexable-options ) | Default
2019-01-15 09:24:12 +01:00
| ---- | ---- | :----: | :----: | ----
2019-03-21 09:06:39 +01:00
| [`backgroundColor` ](#line-styling ) | [`Color` ](../general/colors.md ) | Yes | - | `'rgba(0, 0, 0, 0.1)'`
| [`borderCapStyle` ](#line-styling ) | `string` | Yes | - | `'butt'`
| [`borderColor` ](#line-styling ) | [`Color` ](../general/colors.md ) | Yes | - | `'rgba(0, 0, 0, 0.1)'`
| [`borderDash` ](#line-styling ) | `number[]` | Yes | - | `[]`
| [`borderDashOffset` ](#line-styling ) | `number` | Yes | - | `0.0`
| [`borderJoinStyle` ](#line-styling ) | `string` | Yes | - | `'miter'`
| [`borderWidth` ](#line-styling ) | `number` | Yes | - | `3`
2020-07-17 22:24:06 +02:00
| [`clip` ](#general ) | `number` \|`object` | - | - | `undefined`
2019-04-08 09:42:06 +02:00
| [`cubicInterpolationMode` ](#cubicinterpolationmode ) | `string` | Yes | - | `'default'`
2021-04-09 00:02:12 +02:00
| [`data` ](#data-structure ) | `object` \|`object[]` \| `number[]` \|`string[]` | - | - | **required**
2020-11-28 21:07:46 +01:00
| [`fill` ](#line-styling ) | `boolean` \|`string` | Yes | - | `false`
2019-10-25 19:22:37 +02:00
| [`hoverBackgroundColor` ](#line-styling ) | [`Color` ](../general/colors.md ) | Yes | - | `undefined`
| [`hoverBorderCapStyle` ](#line-styling ) | `string` | Yes | - | `undefined`
| [`hoverBorderColor` ](#line-styling ) | [`Color` ](../general/colors.md ) | Yes | - | `undefined`
| [`hoverBorderDash` ](#line-styling ) | `number[]` | Yes | - | `undefined`
| [`hoverBorderDashOffset` ](#line-styling ) | `number` | Yes | - | `undefined`
| [`hoverBorderJoinStyle` ](#line-styling ) | `string` | Yes | - | `undefined`
| [`hoverBorderWidth` ](#line-styling ) | `number` | Yes | - | `undefined`
2021-01-18 15:15:30 +01:00
| [`indexAxis` ](#general ) | `string` | - | - | `'x'`
2019-01-29 13:34:16 +01:00
| [`label` ](#general ) | `string` | - | - | `''`
2019-10-23 01:14:54 +02:00
| [`order` ](#general ) | `number` | - | - | `0`
2019-01-29 13:34:16 +01:00
| [`pointBackgroundColor` ](#point-styling ) | `Color` | Yes | Yes | `'rgba(0, 0, 0, 0.1)'`
| [`pointBorderColor` ](#point-styling ) | `Color` | Yes | Yes | `'rgba(0, 0, 0, 0.1)'`
| [`pointBorderWidth` ](#point-styling ) | `number` | Yes | Yes | `1`
| [`pointHitRadius` ](#point-styling ) | `number` | Yes | Yes | `1`
2019-01-15 09:24:12 +01:00
| [`pointHoverBackgroundColor` ](#interactions ) | `Color` | Yes | Yes | `undefined`
| [`pointHoverBorderColor` ](#interactions ) | `Color` | Yes | Yes | `undefined`
2019-01-29 13:34:16 +01:00
| [`pointHoverBorderWidth` ](#interactions ) | `number` | Yes | Yes | `1`
| [`pointHoverRadius` ](#interactions ) | `number` | Yes | Yes | `4`
| [`pointRadius` ](#point-styling ) | `number` | Yes | Yes | `3`
| [`pointRotation` ](#point-styling ) | `number` | Yes | Yes | `0`
2020-07-17 22:24:06 +02:00
| [`pointStyle` ](#point-styling ) | `string` \|`Image` | Yes | Yes | `'circle'`
2021-04-09 00:02:12 +02:00
| [`segment` ](#segment ) | `object` | - | - | `undefined`
2021-01-30 22:22:01 +01:00
| [`showLine` ](#line-styling ) | `boolean` | - | - | `true`
2020-07-17 22:24:06 +02:00
| [`spanGaps` ](#line-styling ) | `boolean` \|`number` | - | - | `undefined`
2021-04-04 00:08:20 +02:00
| [`stack` ](#general ) | `string` | - | - | `'line'` |
2020-07-17 22:24:06 +02:00
| [`stepped` ](#stepped ) | `boolean` \|`string` | - | - | `false`
2021-04-09 00:02:12 +02:00
| [`tension` ](#line-styling ) | `number` | - | - | `0`
2019-01-29 13:34:16 +01:00
| [`xAxisID` ](#general ) | `string` | - | - | first x axis
| [`yAxisID` ](#general ) | `string` | - | - | first y axis
2019-01-15 09:24:12 +01:00
2021-04-04 00:08:20 +02:00
All these values, if `undefined` , fallback to the scopes described in [option resolution ](../general/options )
2019-01-15 09:24:12 +01:00
### General
| Name | Description
| ---- | ----
2019-11-10 23:41:01 +01:00
| `clip` | How to clip relative to chartArea. Positive value allows overflow, negative value clips that many pixels inside chartArea. `0` = clip at chartArea. Clipping can also be configured per side: `clip: {left: 5, top: false, right: -2, bottom: 0}`
2021-01-18 15:15:30 +01:00
| `indexAxis` | The base axis of the dataset. `'x'` for horizontal lines and `'y'` for vertical lines.
2019-01-15 09:24:12 +01:00
| `label` | The label for the dataset which appears in the legend and tooltips.
2020-10-13 00:06:07 +02:00
| `order` | The drawing order of dataset. Also affects order for stacking, tooltip, and legend.
2021-04-04 00:08:20 +02:00
| `stack` | The ID of the group to which this dataset belongs to (when stacked, each group will be a separate stack). [more ](#stacked-area-charts )
2020-10-13 00:06:07 +02:00
| `xAxisID` | The ID of the x-axis to plot this dataset on.
| `yAxisID` | The ID of the y-axis to plot this dataset on.
2019-01-15 09:24:12 +01:00
### Point Styling
The style of each point can be controlled with the following properties:
| Name | Description
| ---- | ----
| `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.
2019-02-08 07:06:17 +01:00
| `pointStyle` | Style of the point. [more... ](../configuration/elements.md#point-styles )
2019-01-15 09:24:12 +01:00
2019-01-29 13:34:16 +01:00
All these values, if `undefined` , fallback first to the dataset options then to the associated [`elements.point.*` ](../configuration/elements.md#point-configuration ) options.
2019-01-15 09:24:12 +01:00
### Line Styling
The style of the line can be controlled with the following properties:
| Name | Description
| ---- | ----
| `backgroundColor` | The line fill color.
| `borderCapStyle` | Cap style of the line. See [MDN ](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineCap ).
| `borderColor` | The line color.
| `borderDash` | Length and spacing of dashes. See [MDN ](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash ).
| `borderDashOffset` | Offset for line dashes. See [MDN ](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset ).
| `borderJoinStyle` | Line joint style. See [MDN ](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin ).
| `borderWidth` | The line width (in pixels).
| `fill` | How to fill the area under the line. See [area charts ](area.md ).
2020-10-31 13:54:14 +01:00
| `tension` | Bezier curve tension of the line. Set to 0 to draw straightlines. This option is ignored if monotone cubic interpolation is used.
2019-01-15 09:24:12 +01:00
| `showLine` | If false, the line is not drawn for this dataset.
2021-02-25 00:20:11 +01:00
| `spanGaps` | If true, lines will be drawn between points with no or null data. If false, points with `null` data will create a break in the line. Can also be a number specifying the maximum gap length to span. The unit of the value depends on the scale used.
2019-01-15 09:24:12 +01:00
2019-01-29 13:34:16 +01:00
If the value is `undefined` , `showLine` and `spanGaps` fallback to the associated [chart configuration options ](#configuration-options ). The rest of the values fallback to the associated [`elements.line.*` ](../configuration/elements.md#line-configuration ) options.
2019-01-15 09:24:12 +01:00
### Interactions
The interaction with each point can be controlled with the following properties:
| Name | Description
| ---- | -----------
| `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.
2017-03-21 01:36:54 +01:00
### cubicInterpolationMode
2019-12-07 01:47:00 +01:00
2018-11-02 08:46:06 +01:00
The following interpolation modes are supported.
2019-12-07 01:47:00 +01:00
2019-01-29 13:34:16 +01:00
* `'default'`
* `'monotone'`
2017-03-21 01:36:54 +01:00
2019-01-29 13:34:16 +01:00
The `'default'` algorithm uses a custom weighted cubic interpolation, which produces pleasant curves for all types of datasets.
2017-03-21 01:36:54 +01:00
2020-10-13 00:06:07 +02:00
The `'monotone'` algorithm is more suited to `y = f(x)` datasets: it preserves monotonicity (or piecewise monotonicity) of the dataset being interpolated, and ensures local extremums (if any) stay at input data points.
2017-03-21 01:36:54 +01:00
If left untouched (`undefined`), the global `options.elements.line.cubicInterpolationMode` property is used.
2021-04-09 00:02:12 +02:00
### Segment
2021-04-10 01:10:48 +02:00
Line segment styles can be overridden by scriptable options in the `segment` object. Currently all of the `border*` and `backgroundColor` options are supported. The segment styles are resolved for each section of the line between each point. `undefined` fallbacks to main line styles.
2021-04-09 00:02:12 +02:00
Context for the scriptable segment contains the following properties:
* `type` : `'segment'`
* `p0` : first point element
* `p1` : second point element
2021-07-21 13:00:05 +02:00
* `p0DataIndex` : index of first point in the data array
* `p1DataIndex` : index of second point in the data array
* `datasetIndex` : dataset index
2021-04-09 00:02:12 +02:00
[Example usage ](../samples/line/segments.md )
2020-02-20 00:13:40 +01:00
### Stepped
2019-12-07 01:47:00 +01:00
2020-02-20 00:13:40 +01:00
The following values are supported for `stepped` .
2019-12-07 01:47:00 +01:00
2019-01-29 13:34:16 +01:00
* `false` : No Step Interpolation (default)
* `true` : Step-before Interpolation (eq. `'before'` )
2017-04-16 22:13:13 +02:00
* `'before'` : Step-before Interpolation
* `'after'` : Step-after Interpolation
2018-12-18 14:47:24 +01:00
* `'middle'` : Step-middle Interpolation
2017-04-16 22:13:13 +02:00
2020-10-31 13:54:14 +01:00
If the `stepped` value is set to anything other than false, `tension` will be ignored.
2017-04-16 22:13:13 +02:00
2017-03-21 01:36:54 +01:00
## Default Options
2021-03-06 16:34:52 +01:00
It is common to want to apply a configuration setting to all created line charts. The global line chart settings are stored in `Chart.overrides.line` . Changing the global options only affects charts created after the change. Existing charts are not changed.
2017-03-21 01:36:54 +01:00
For example, to configure all line charts with `spanGaps = true` you would do:
2019-12-07 01:47:00 +01:00
2017-03-21 01:36:54 +01:00
```javascript
2021-03-06 16:34:52 +01:00
Chart.overrides.line.spanGaps = true;
2017-03-21 01:36:54 +01:00
```
## Data Structure
2021-02-23 21:30:57 +01:00
All of the supported [data structures ](../general/data-structures.md ) can be used with line charts.
2017-03-21 01:36:54 +01:00
2019-02-05 02:00:44 +01:00
## Stacked Area Chart
2017-03-21 01:36:54 +01:00
2020-10-13 00:06:07 +02:00
Line charts can be configured into stacked area charts by changing the settings on the y-axis to enable stacking. Stacked area charts can be used to show how one data trend is made up of a number of smaller pieces.
2017-03-21 01:36:54 +01:00
```javascript
var stackedLine = new Chart(ctx, {
type: 'line',
data: data,
options: {
scales: {
2019-11-22 00:46:49 +01:00
y: {
2017-03-21 01:36:54 +01:00
stacked: true
2019-11-22 00:46:49 +01:00
}
2017-03-21 01:36:54 +01:00
}
}
});
```
2019-12-07 01:47:00 +01:00
2021-01-18 15:15:30 +01:00
## Vertical Line Chart
A vertical line chart is a variation on the horizontal line chart.
To achieve this you will have to set the `indexAxis` property in the options object to `'y'` .
The default for this property is `'x'` and thus will show horizontal lines.
2021-03-30 16:32:39 +02:00
```js chart-editor
// < block:setup:1 >
const labels = Utils.months({count: 7});
const data = {
labels: labels,
datasets: [{
axis: 'y',
label: 'My First Dataset',
data: [65, 59, 80, 81, 56, 55, 40],
fill: false,
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(255, 159, 64, 0.2)',
'rgba(255, 205, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(201, 203, 207, 0.2)'
],
borderColor: [
'rgb(255, 99, 132)',
'rgb(255, 159, 64)',
'rgb(255, 205, 86)',
'rgb(75, 192, 192)',
'rgb(54, 162, 235)',
'rgb(153, 102, 255)',
'rgb(201, 203, 207)'
],
borderWidth: 1
}]
};
// < / block:setup >
// < block:config:0 >
const config = {
type: 'line',
data: data,
options: {
indexAxis: 'y',
scales: {
x: {
beginAtZero: true
2021-02-22 14:53:13 +01:00
}
2021-03-30 16:32:39 +02:00
}
}
};
// < / block:config >
module.exports = {
actions: [],
config: config,
};
```
2021-01-18 15:15:30 +01:00
### Config Options
The configuration options for the vertical line chart are the same as for the [line chart ](#configuration-options ). However, any options specified on the x-axis in a line chart, are applied to the y-axis in a vertical line chart.
2019-12-07 01:47:00 +01:00
## Internal data format
`{x, y}`