Platform class passed to config in v3
In Chart.js 3.x, to override the platform class used in a chart instance, pass `platform: PlatformClass` in the config object. The class itself should be passed, not an instance of the class.
charts/configuration
269 notes in this subject, read out of this brain and free to use. This is page 5 of 5.
aspectRatio defaults in v3
In Chart.js 3.x, the `aspectRatio` defaults to 1 for doughnut, pie, polarArea, and radar charts.
global namespace removed from defaults in v3
In Chart.js 3.x, the `global` namespace was removed from `defaults`. So `Chart.defaults.global` is now `Chart.defaults`.
Chart.active removed in v3
The `Chart.active` property was removed in Chart.js 3.x.
Chart constructor shortcuts removed in v3
In Chart.js 3.x, the following constructor shortcuts were removed: `Chart.Bar`, `Chart.Bubble`, `Chart.Doughnut`, `Chart.Line`, `Chart.PolarArea`, `Chart.Radar`, and `Chart.Scatter`. Create charts using `new Chart` and providing the appropriate `type` parameter instead.
Chart.platform property removed in v3
In Chart.js 3.x, `Chart.platform` was removed. It only contained `disableCSSInjection` and CSS is never injected in v3.
getElementsAtXAxis replaced in v3
In Chart.js 3.x, `getElementsAtXAxis` is replaced with `chart.getElementsAtEventForMode(e, 'index', { intersect: false }, false)`.
getDatasetAtEvent replaced in v3
In Chart.js 3.x, `getDatasetAtEvent` is replaced with `chart.getElementsAtEventForMode(e, 'dataset', { intersect: true }, false)`.
Chart helpers flattened in v3
In Chart.js 3.x, all helpers are now exposed in a flat hierarchy. For example, `Chart.helpers.canvas.clipArea` is now `Chart.helpers.clipArea`.
Chart.layoutService renamed to Chart.layouts in v3
In Chart.js 3.x, `Chart.layoutService` was renamed to `Chart.layouts`.
drawPoint signature changed in v3
In Chart.js 3.x, the second parameter to `drawPoint` is now the full options object. The `style`, `rotation`, and `radius` are no longer passed explicitly.
getMaximumHeight and getMaximumWidth replaced in v3
In Chart.js 3.x, `helpers.getMaximumHeight` and `helpers.getMaximumWidth` were replaced by `helpers.dom.getMaximumSize`.
helpers.clear renamed to helpers.clearCanvas in v3
In Chart.js 3.x, `helpers.clear` was renamed to `helpers.clearCanvas` and now takes `canvas` and optionally `ctx` as parameter(s).
Platform instance per chart in v3
In Chart.js 3.x, `Chart.platform` is no longer the platform object used by charts. Every chart instance now has a separate platform instance.
Chart.platforms contains platform classes in v3
In Chart.js 3.x, `Chart.platforms` is an object that contains two usable platform classes: `BasicPlatform` and `DomPlatform`. It also contains `BasePlatform`, a class that all platforms must extend from.
OffscreenCanvas uses BasicPlatform in v3
In Chart.js 3.x, if the canvas passed in is an instance of `OffscreenCanvas`, the `BasicPlatform` is automatically used.
Interaction axis option
The axis option within interaction configuration controls whether the interaction calculates proximity on the x axis, y axis, or both (xy). Set chart.options.interaction.axis to 'x', 'y', or 'xy'.
Interaction mode y
The y interaction mode shows tooltips for all datasets at the same y-axis value. Set chart.options.interaction.mode to 'y'.
Interaction modes available
Chart.js supports the following interaction modes: index, dataset, point, nearest, x, and y. These modes determine which elements trigger a tooltip when the user interacts with the chart.
Interaction mode index
The index interaction mode shows tooltips for all datasets at the same index when hovering over the chart. Set chart.options.interaction.mode to 'index'.
Interaction mode dataset
The dataset interaction mode shows only the tooltip for the dataset that is hovered over. Set chart.options.interaction.mode to 'dataset'.
Interaction mode point
The point interaction mode shows the tooltip only for the exact data point that is hovered over. Set chart.options.interaction.mode to 'point'.
Interaction mode nearest
The nearest interaction mode shows the tooltip for the element nearest to the mouse position. The axis option can further control whether this is calculated on x, y, or xy axes. Set chart.options.interaction.mode to 'nearest'.
Interaction intersect option
The intersect option within interaction configuration determines whether elements must be directly under the cursor to trigger an interaction. When set to false, nearby elements can trigger interactions. Toggle with chart.options.interaction.intersect.
Interaction mode x
The x interaction mode shows tooltips for all datasets at the same x-axis value. Set chart.options.interaction.mode to 'x'.
Interaction modes example with line chart
Example showing how to switch between different interaction modes on a line chart: ```js const config = { type: 'line', data: data, options: { interaction: { intersect: false, mode: 'index', }, plugins: { title: { display: true, text: (ctx) => { const {axis = 'xy', intersect, mode} = ctx.chart.options.interaction; return 'Mode: ' + mode + ', axis: ' + axis + ', intersect: ' + intersect; } }, } } }; ```
Interaction configuration options structure
The interaction configuration object contains the following properties: mode (string, the interaction mode to use), axis (string, whether to calculate on 'x', 'y', or 'xy'), and intersect (boolean, whether elements must be directly under the cursor).
Components object in samples uses module bundler
Some samples make reference to a components object, which is an artifact of using a module bundler to build the samples. When Chart.js is included as a browser script, these items are accessible via the Chart object, for example Chart.Tooltip.
Utils file contains helper functions for samples only
The Utils file contains multiple helper functions that the Chart.js sample pages use to generate charts. These functions are subject to change, including breaking changes without prior notice, so they should not be relied upon in production environments.