@@ -9,6+9,7 @@ The layout configuration is passed into the `options.layout` namespace. The glob
| `padding` | `number`\|`object` | `0` | Yes | The padding to add inside the chart. [more...](#padding)
## Padding
+
If this value is a number, it is applied to all sides of the chart (left, top, right, bottom). If this value is an object, the `left` property defines the left padding. Similarly the `right`, `top` and `bottom` properties can also be specified.
Lets say you wanted to add 50px of padding to the left side of the chart canvas, you would do:
@@ -11,7+11,9 @@ The following properties define how the chart interacts with events.
| `onClick` | `function` | `null` | Called if the event is of type `'mouseup'` or `'click'`. Passed the event, an array of active elements, and the chart.
## Event Option
+
For example, to have the chart only respond to click events, you could do:
Finds items in the same dataset. If the `intersect` setting is true, the first intersecting item is used to determine the index in the data. If `intersect` false the nearest item is used to determine the index.
Returns all items that would intersect based on the `X` coordinate of the position only. Would be useful for a vertical cursor implementation. Note that this only applies to cartesian charts.
Returns all items that would intersect based on the `Y` coordinate of the position. This would be useful for a horizontal cursor implementation. Note that this only applies to cartesian charts.
Chromium (Chrome: version 69, Edge: 79, Opera: 56) added the ability to [transfer rendering control of a canvas](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/transferControlToOffscreen) to a web worker. Web workers can use the [OffscreenCanvas API](https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas) to render from a web worker onto canvases in the DOM. Chart.js is a canvas-based library and supports rendering in a web worker - just pass an OffscreenCanvas into the Chart constructor instead of a Canvas element. Note that as of today, this API is only supported in Chromium based browsers.
By moving all Chart.js calculations onto a separate thread, the main thread can be freed up for other uses. Some tips and tricks when using Chart.js in a web worker:
+
* Transferring data between threads can be expensive, so ensure that your config and data objects are as small as possible. Try generating them on the worker side if you can (workers can make HTTP requests!) or passing them to your worker as ArrayBuffers, which can be transferred quickly from one thread to another.
* You can't transfer functions between threads, so if your config object includes functions you'll have to strip them out before transferring and then add them back later.
* You can't access the DOM from worker threads, so Chart.js plugins that use the DOM (including any mouse interactions) will likely not work.
@@ -260,7+260,7 @@ A few changes were made to controllers that are more straight-forward, but will
The following properties and methods were removed:
-#### Chart
+#### Removed from Chart
* `Chart.animationService`
* `Chart.active`
@@ -294,14+294,14 @@ The following properties and methods were removed:
* `Chart.Tooltip` is now provided by the tooltip plugin. The positioners can be accessed from `tooltipPlugin.positioners`
* `ILayoutItem.minSize`
-#### Dataset Controllers
+#### Removed from Dataset Controllers
* `BarController.getDatasetMeta().bar`
* `DatasetController.addElementAndReset`
* `DatasetController.createMetaData`
* `DatasetController.createMetaDataset`
-#### Elements
+#### Removed from Elements
* `Element.getArea`
* `Element.height`
@@ -310,7+310,7 @@ The following properties and methods were removed:
* `Element.inLabelRange`
* `Line.calculatePointY`
-#### Helpers
+#### Removed from Helpers
* `helpers.addEvent`
* `helpers.aliasPixel`
@@ -336,11+336,11 @@ The following properties and methods were removed:
* `helpers.scaleMerge`
* `helpers.where`
-#### Layout
+#### Removed from Layout
* `Layout.defaults`
-#### Scales
+#### Removed from Scales
* `LinearScaleBase.handleDirectionalChanges`
* `LogarithmicScale.minNotZero`
@@ -354,7+354,7 @@ The following properties and methods were removed:
* `TimeScale.getLabelCapacity` is now private
* `TimeScale.tickFormatFunction` is now private
-#### Plugins (Legend, Title, and Tooltip)
+#### Removed from Plugins (Legend, Title, and Tooltip)
* `IPlugin.afterScaleUpdate`. Use `afterLayout` instead
* `Legend.margins` is now private
@@ -448,12+448,12 @@ The private APIs listed below were renamed:
The APIs listed in this section have changed in signature or behaviour from version 2.
-#### Scales
+#### Changed in Scales
* `Scale.getLabelForIndex` was replaced by `scale.getLabelForValue`
* `Scale.getPixelForValue` now has only one parameter. For the `TimeScale` that parameter must be millis since the epoch
-##### Ticks
+##### Changed in Ticks
* `Scale.afterBuildTicks` now has no parameters like the other callbacks
* `Scale.buildTicks` is now expected to return tick objects
@@ -462,11+462,11 @@ The APIs listed in this section have changed in signature or behaviour from vers
* When the `autoSkip` option is enabled, `Scale.ticks` now contains only the non-skipped ticks instead of all ticks.
* Ticks are now always generated in monotonically increasing order
-##### Time Scale
+##### Changed in Time Scale
* `getValueForPixel` now returns milliseconds since the epoch
-#### Controllers
+#### Changed in Controllers
##### Core Controller
@@ -478,15+478,15 @@ The APIs listed in this section have changed in signature or behaviour from vers
* `updateElement` was replaced with `updateElements` now taking the elements to update, the `start` index, `count`, and `mode`
* `setHoverStyle` and `removeHoverStyle` now additionally take the `datasetIndex` and `index`
-#### Interactions
+#### Changed in Interactions
* Interaction mode methods now return an array of objects containing the `element`, `datasetIndex`, and `index`
-#### Layout
+#### Changed in Layout
* `ILayoutItem.update` no longer has a return value
-#### Helpers
+#### Changed in Helpers
All helpers are now exposed in a flat hierarchy, e.g., `Chart.helpers.canvas.clipArea` -> `Chart.helpers.clipArea`
@@ -498,14+498,14 @@ All helpers are now exposed in a flat hierarchy, e.g., `Chart.helpers.canvas.cli
* `helpers.clear` was renamed to `helpers.clearCanvas` and now takes `canvas` and optionally `ctx` as parameter(s).
* `helpers.retinaScale` accepts optional third parameter `forceStyle`, which forces overriding current canvas style. `forceRatio` no longer falls back to `window.devicePixelRatio`, instead it defaults to `1`.
-#### Platform
+#### Changed in Platform
* `Chart.platform` is no longer the platform object used by charts. Every chart instance now has a separate platform instance.
* `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.
* If the canvas passed in is an instance of `OffscreenCanvas`, the `BasicPlatform` is automatically used.
* `isAttached` method was added to platform.
-#### IPlugin interface
+#### Changed in IPlugin interface
* All plugin hooks have unified signature with 3 arguments: `chart`, `args` and `options`. This means change in signature for these hooks: `beforeInit`, `afterInit`, `reset`, `beforeLayout`, `afterLayout`, `beforeRender`, `afterRender`, `beforeDraw`, `afterDraw`, `beforeDatasetsDraw`, `afterDatasetsDraw`, `beforeEvent`, `afterEvent`, `resize`, `destroy`.
* `afterDatasetsUpdate`, `afterUpdate`, `beforeDatasetsUpdate`, and `beforeUpdate` now receive `args` object as second argument. `options` argument is always the last and thus was moved from 2nd to 3rd place.