Dataset mapping to stacked y-axes
When using stacked scales with multiple y-axes, datasets are mapped to specific axes using the yAxisID property. For example, a dataset with yAxisID: 'y2' will use the y2 axis instead of the default y axis.
charts/line
72 notes in this subject, read out of this brain and free to use. This is page 2 of 2.
spanGaps option with time values
The spanGaps option can accept a time value in milliseconds to control how gaps in data should be handled. In the example, spanGaps is set to 1000 * 60 * 60 * 24 * 2, which equals 172800000 milliseconds or 2 days. This setting determines the maximum time gap allowed before the line is broken.
Line chart with time scale example
A line chart can use a time scale on the x-axis by setting scales: { x: { type: 'time', time: { tooltipFormat: 'DD T' }, title: { display: true, text: 'Date' } }, y: { title: { display: true, text: 'value' } } }. The chart type is 'line' and datasets contain arrays of numeric data or point objects with x and y properties.
Line chart hover and point interaction properties
Line chart point elements support hoverBackgroundColor and hoverRadius properties to customize appearance during hover interactions. These can be scriptable functions to apply context-dependent styling.
Scriptable color functions for line chart styling
Line and point colors can be set using scriptable functions that access the datasetIndex from context to dynamically assign colors. The context object provides datasetIndex and dataIndex for conditional styling logic.
Line chart dataset update and chart refresh
Chart data can be updated programmatically by modifying chart.data.datasets[i].data and then calling chart.update() to refresh the chart with new data.
Point radius as scriptable function based on data values
Point radius can be set using a scriptable function that accesses parsed data values (ctx.parsed.y) and returns different radius values conditionally. Example: values less than 10 use radius 5, 10-25 use 7, 25-50 use 9, 50-75 use 11, and above 75 use 15.
Scriptable point style options in line charts
Point style can be set to different values based on context using a scriptable function. The function receives a context object with dataIndex and datasetIndex properties, allowing alternation of point styles such as 'circle' or 'rect' based on data position or other criteria.
Line chart elements configuration options
Line chart elements can be configured with the following options: line element supports fill and backgroundColor/borderColor which can be scriptable functions that receive context; point element supports backgroundColor, hoverBackgroundColor, radius, pointStyle, and hoverRadius which can all be scriptable functions.
Line chart interaction mode changed in v3
In Chart.js 3.x, line charts no longer override the default `interaction` mode. The default changed from `'index'` to `'nearest'`.
line.fill default changed to false in v3
In Chart.js 3.x, the `elements.line.fill` default changed from `true` to `false`.
steppedLine renamed to stepped in v3
In Chart.js 3.x, the dataset option `steppedLine` was removed. Use `stepped` instead.