diff --git a/.github/ISSUE_TEMPLATE/bug.yml b/.github/ISSUE_TEMPLATE/bug.yml
index b04b9fa33b8..ffccce5de0b 100644
--- a/.github/ISSUE_TEMPLATE/bug.yml
+++ b/.github/ISSUE_TEMPLATE/bug.yml
@@ -45,7 +45,7 @@ body:
For typescript issues you can make use of [this TS Playground](https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAbzgYQBYENZwL5wGZQQhwDkAxhrAHQBWAziQNwCwAUGwG6ZxkwAecALxwAJhDIBXEAFMAdjCoBzaTACiAG2kz5AIQCeASREAKAEQg9aTDFMBKOOjpwAEgBUAsgBlk6WVzoaWnIwLKxcUHAWVljCstIA7iiUMMa8fAA0iGxwOXAwemDSAFyk6sBxJOnZuSLoMOglCNW5ueroAEbS6nQlANqmAErSIqaZpjrqEtKjcKYAml3qEPEzpgDiUNJyqwAKElBgmqsA8lC+yqYAulWsLS219XQqPXC9Tbd3n22d6iUkAMRwCB4OAANQgMGkDBun0+DwarwAjAAmTKIgCcmQAzJkAKyZVFwLHXZp3bCXUnYGG5CBgGDACCyF7vT50MjoTTM0ktPiNbl3fk5KmCuB6PkfWFwEXYfkyiU4NjYWyMIA) to make a reproducible sample.
If filing a bug against `master`, you may reference the latest code via
- https://www.chartjs.org/dist/master/chart.umd.js (changing the filename to
+ https://www.chartjs.org/dist/master/chart.umd.min.js (changing the filename to
point at the file you need as appropriate). Do not rely on these files for
production purposes as they may be removed at any time.
validations:
diff --git a/.github/release-drafter.yml b/.github/release-drafter.yml
index 582f5491d9a..636045e034d 100644
--- a/.github/release-drafter.yml
+++ b/.github/release-drafter.yml
@@ -47,7 +47,7 @@ template: |
* [Migration guide](https://www.chartjs.org/docs/$RESOLVED_VERSION/migration/v4-migration.html)
* [Docs](https://www.chartjs.org/docs/$RESOLVED_VERSION/)
* [API](https://www.chartjs.org/docs/$RESOLVED_VERSION/api/)
- * [Samples](https://www.chartjs.org/docs/$RESOLVED_VERSION/samples/)
+ * [Samples](https://www.chartjs.org/docs/$RESOLVED_VERSION/samples/information.html)
$CHANGES
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 31c14c38289..c1264017cd3 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -30,14 +30,14 @@ jobs:
fail-fast: false
steps:
- - uses: actions/checkout@v3
- - uses: pnpm/action-setup@v2.2.4
+ - uses: actions/checkout@v4
+ - uses: pnpm/action-setup@v4.1.0
- name: Use Node.js
- uses: actions/setup-node@v3
+ uses: actions/setup-node@v4
with:
node-version: 16
cache: pnpm
- - uses: dorny/paths-filter@v2
+ - uses: dorny/paths-filter@v3
id: changes
with:
filters: |
diff --git a/.github/workflows/compressed-size.yml b/.github/workflows/compressed-size.yml
index 447928c1f6f..a79a28f8d25 100644
--- a/.github/workflows/compressed-size.yml
+++ b/.github/workflows/compressed-size.yml
@@ -16,17 +16,8 @@ jobs:
runs-on: ubuntu-latest
steps:
- - uses: actions/checkout@v3
- - uses: pnpm/action-setup@v2.2.4
+ - uses: actions/checkout@v4
+ - uses: pnpm/action-setup@v4.1.0
- uses: preactjs/compressed-size-action@v2
with:
repo-token: "${{ secrets.GITHUB_TOKEN }}"
-
- size-limit:
- runs-on: ubuntu-latest
- steps:
- - uses: actions/checkout@v3
- - uses: pnpm/action-setup@v2.2.4
- - uses: andresz1/size-limit-action@master
- with:
- github_token: ${{ secrets.GITHUB_TOKEN }}
diff --git a/.github/workflows/deploy-docs.yml b/.github/workflows/deploy-docs.yml
index 72e61e68c32..949a4ec2118 100644
--- a/.github/workflows/deploy-docs.yml
+++ b/.github/workflows/deploy-docs.yml
@@ -23,10 +23,10 @@ jobs:
needs: correct_repository
runs-on: ubuntu-latest
steps:
- - uses: actions/checkout@v3
- - uses: pnpm/action-setup@v2.2.4
+ - uses: actions/checkout@v4
+ - uses: pnpm/action-setup@v4.1.0
- name: Use Node.js
- uses: actions/setup-node@v3
+ uses: actions/setup-node@v4
with:
node-version: 16
cache: pnpm
diff --git a/.github/workflows/release-drafter.yml b/.github/workflows/release-drafter.yml
index 1bf557b652a..04609ba4def 100644
--- a/.github/workflows/release-drafter.yml
+++ b/.github/workflows/release-drafter.yml
@@ -26,6 +26,6 @@ jobs:
needs: correct_repository
runs-on: ubuntu-latest
steps:
- - uses: release-drafter/release-drafter@v5
+ - uses: release-drafter/release-drafter@v6
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
index 68003f622e9..93699285c06 100644
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -16,7 +16,7 @@ jobs:
version: ${{ steps.trim.outputs.version }}
steps:
- id: trim
- run: echo "::set-output name=version::${TAG:1}"
+ run: echo "version=${TAG:1}" >> $GITHUB_OUTPUT
env:
TAG: ${{ github.event.release.tag_name }}
@@ -26,9 +26,9 @@ jobs:
needs: setup
runs-on: ubuntu-latest
steps:
- - uses: actions/checkout@v3
- - uses: pnpm/action-setup@v2.2.4
- - uses: actions/setup-node@v3
+ - uses: actions/checkout@v4
+ - uses: pnpm/action-setup@v4.1.0
+ - uses: actions/setup-node@v4
with:
registry-url: https://registry.npmjs.org/
node-version: 16
@@ -71,9 +71,9 @@ jobs:
runs-on: ubuntu-latest
if: "!github.event.release.prerelease"
steps:
- - uses: actions/checkout@v3
- - uses: pnpm/action-setup@v2.2.4
- - uses: actions/setup-node@v3
+ - uses: actions/checkout@v4
+ - uses: pnpm/action-setup@v4.1.0
+ - uses: actions/setup-node@v4
with:
registry-url: https://registry.npmjs.org/
node-version: 16
diff --git a/.size-limit.cjs b/.size-limit.cjs
deleted file mode 100644
index 7c20acf721c..00000000000
--- a/.size-limit.cjs
+++ /dev/null
@@ -1,49 +0,0 @@
-function modifyWebpackConfig(config) {
- config.target = 'web';
-
- return config;
-}
-
-module.exports = [
- {
- path: 'dist/chart.js',
- limit: '82 KB',
- webpack: false,
- running: false
- },
- {
- path: 'dist/chart.js',
- limit: '37.0 KB',
- import: '{ Chart }',
- running: false,
- modifyWebpackConfig
- },
- {
- path: 'dist/chart.js',
- limit: '22.0 KB',
- import: '{ BarController, BubbleController, DoughnutController, LineController, PolarAreaController, PieController, RadarController, ScatterController }',
- running: false,
- modifyWebpackConfig
- },
- {
- path: 'dist/chart.js',
- limit: '14 KB',
- import: '{ ArcElement, LineElement, PointElement, BarElement }',
- running: false,
- modifyWebpackConfig
- },
- {
- path: 'dist/chart.js',
- limit: '36.5 KB',
- import: '{ Decimation, Filler, Legend, SubTitle, Title, Tooltip, Colors }',
- running: false,
- modifyWebpackConfig
- },
- {
- path: 'dist/chart.js',
- limit: '22.4 KB',
- import: '{ CategoryScale, LinearScale, LogarithmicScale, RadialLinearScale, TimeScale, TimeSeriesScale }',
- running: false,
- modifyWebpackConfig
- }
-]
diff --git a/LICENSE.md b/LICENSE.md
index 9182b8e81d6..f216610fd7e 100644
--- a/LICENSE.md
+++ b/LICENSE.md
@@ -1,6 +1,6 @@
The MIT License (MIT)
-Copyright (c) 2014-2022 Chart.js Contributors
+Copyright (c) 2014-2024 Chart.js Contributors
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
diff --git a/docs/.vuepress/config.ts b/docs/.vuepress/config.ts
index 645754254c1..ccb310094cf 100644
--- a/docs/.vuepress/config.ts
+++ b/docs/.vuepress/config.ts
@@ -294,6 +294,7 @@ export default defineConfig({
'getting-started/installation',
'getting-started/integration',
'getting-started/usage',
+ 'getting-started/using-from-node-js',
]
},
{
diff --git a/docs/axes/cartesian/_common.md b/docs/axes/cartesian/_common.md
index 1050a85a2a6..b6b5a8e12f4 100644
--- a/docs/axes/cartesian/_common.md
+++ b/docs/axes/cartesian/_common.md
@@ -5,6 +5,7 @@ Namespace: `options.scales[scaleId]`
| Name | Type | Default | Description
| ---- | ---- | ------- | -----------
| `bounds` | `string` | `'ticks'` | Determines the scale bounds. [more...](./index.md#scale-bounds)
+| `clip` | `boolean` | `true` | If true, clip the dataset drawing against the size of the scale instead of chart area
| `position` | `string` \| `object` | | Position of the axis. [more...](./index.md#axis-position)
| `stack` | `string` | | Stack group. Axes at the same `position` with same `stack` are stacked.
| `stackWeight` | `number` | 1 | Weight of the scale in stack group. Used to determine the amount of allocated space for the scale within the group.
diff --git a/docs/axes/cartesian/linear.md b/docs/axes/cartesian/linear.md
index f534a4d9b82..fae3b98d11b 100644
--- a/docs/axes/cartesian/linear.md
+++ b/docs/axes/cartesian/linear.md
@@ -97,4 +97,4 @@ module.exports = {
## Internal data format
-Internally, the linear scale uses numeric data
+Internally, the linear scale uses numeric data.
diff --git a/docs/axes/cartesian/time.md b/docs/axes/cartesian/time.md
index 0723f7978ad..50d5d625d19 100644
--- a/docs/axes/cartesian/time.md
+++ b/docs/axes/cartesian/time.md
@@ -1,6 +1,6 @@
# Time Cartesian Axis
-The time scale is used to display times and dates. Data are spread according to the amount of time between data points. When building its ticks, it will automatically calculate the most comfortable unit base on the size of the scale.
+The time scale is used to display times and dates. Data are spread according to the amount of time between data points. When building its ticks, it will automatically calculate the most comfortable unit based on the size of the scale.
## Date Adapters
diff --git a/docs/axes/labelling.md b/docs/axes/labelling.md
index 134979ac301..98583e964fd 100644
--- a/docs/axes/labelling.md
+++ b/docs/axes/labelling.md
@@ -31,7 +31,7 @@ The call to the method is scoped to the scale. `this` inside the method is the s
If the callback returns `null` or `undefined` the associated grid line will be hidden.
:::tip
-The [category axis](../axes/cartesian/category), which is the default x-axis for line and bar charts, uses the `index` as internal data format. For accessing the label, use `this.getLabelForValue(value)`. [API: getLabelForValue](../api/classes/Scale.html#getlabelforvalue)
+The [category axis](../axes/cartesian/category), which is the default x-axis for line and bar charts, uses the `index` as internal data format. For accessing the label, use `this.getLabelForValue(value)`. [API: getLabelForValue](../api/classes/Scale.md#getlabelforvalue)
:::
In the following example, every label of the Y-axis would be displayed with a dollar sign at the front.
diff --git a/docs/configuration/animations.md b/docs/configuration/animations.md
index 3dcfd3b973f..c1abc45c658 100644
--- a/docs/configuration/animations.md
+++ b/docs/configuration/animations.md
@@ -127,7 +127,7 @@ These paths are valid under `defaults` for global configuration and `options` fo
## animation
-The default configuration is defined here: core.animations.js
+The default configuration is defined here: core.animations.defaults.js
Namespace: `options.animation`
diff --git a/docs/configuration/tooltip.md b/docs/configuration/tooltip.md
index 123f4c719ae..8e6e0539e60 100644
--- a/docs/configuration/tooltip.md
+++ b/docs/configuration/tooltip.md
@@ -4,6 +4,10 @@
Namespace: `options.plugins.tooltip`, the global options for the chart tooltips is defined in `Chart.defaults.plugins.tooltip`.
+:::warning
+The `titleFont`, `bodyFont` and `footerFont` options default to the `Chart.defaults.font` options. To change the overrides for those options, you will need to pass a function that returns a font object. See section about [overriding default fonts](#default-font-overrides) for extra information below.
+:::
+
| Name | Type | Default | Description
| ---- | ---- | ------- | -----------
| `enabled` | `boolean` | `true` | Are on-canvas tooltips enabled?
@@ -420,7 +424,7 @@ Tooltip.positioners.myCustomPositioner = function(elements, eventPosition) {
};
// Then, to use it...
-new Chart.js(ctx, {
+new Chart(ctx, {
data,
options: {
plugins: {
@@ -443,3 +447,15 @@ declare module 'chart.js' {
}
}
```
+
+## Default font overrides
+
+By default, the `titleFont`, `bodyFont` and `footerFont` listen to the `Chart.defaults.font` options for setting its values.
+Overriding these normally by accessing the object won't work because it is backed by a get function that looks to the default `font` namespace.
+So you will need to override this get function with your own function that returns the desired config.
+
+Example:
+
+```javascript
+Chart.defaults.plugins.tooltip.titleFont = () => ({ size: 20, lineHeight: 1.2, weight: 800 });
+```
\ No newline at end of file
diff --git a/docs/developers/api.md b/docs/developers/api.md
index 11ece0128a6..2662f68f8a5 100644
--- a/docs/developers/api.md
+++ b/docs/developers/api.md
@@ -25,13 +25,19 @@ Triggers an update of the chart. This can be safely called after updating the da
myLineChart.data.datasets[0].data[2] = 50; // Would update the first dataset's value of 'March' to be 50
myLineChart.update(); // Calling update now animates the position of March from 90 to 50.
```
+A `mode` can be provided to indicate transition configuration should be used. This can be either:
-A `mode` string can be provided to indicate transition configuration should be used. Core calls this method using any of `'active'`, `'hide'`, `'reset'`, `'resize'`, `'show'` or `undefined`. `'none'` is also a supported mode for skipping animations for single update. Please see [animations](../configuration/animations.md) docs for more details.
+- **string value**: Core calls this method using any of `'active'`, `'hide'`, `'reset'`, `'resize'`, `'show'` or `undefined`. `'none'` is also supported for skipping animations for single update. Please see [animations](../configuration/animations.md) docs for more details.
-Example:
+- **function**: that receives a context object `{ datasetIndex: number }` and returns a mode string, allowing different modes per dataset.
+Examples:
```javascript
+// Using string mode
myChart.update('active');
+
+// Using function mode for dataset-specific animations
+myChart.update(ctx => ctx.datasetIndex === 0 ? 'active' : 'none');
```
See [Updating Charts](updates.md) for more details.
@@ -141,6 +147,15 @@ Returns the number of datasets that are currently not hidden.
```javascript
const numberOfVisibleDatasets = chart.getVisibleDatasetCount();
```
+## isDatasetVisible(datasetIndex)
+
+Returns a boolean if a dataset at the given index is currently visible.
+
+The visibility is determined by first checking the hidden property in the dataset metadata (set via [`setDatasetVisibility()`](#setdatasetvisibility-datasetindex-visibility) and accessible through [`getDatasetMeta()`](#getdatasetmeta-index)). If this is not set, the hidden property of the dataset object itself (`chart.data.datasets[n].hidden`) is returned.
+
+```javascript
+chart.isDatasetVisible(1);
+```
## setDatasetVisibility(datasetIndex, visibility)
@@ -162,7 +177,7 @@ chart.update(); // chart now renders with item hidden
## getDataVisibility(index)
-Returns the stored visibility state of a data index for all datasets. Set by [toggleDataVisibility](#toggleDataVisibility). A dataset controller should use this method to determine if an item should not be visible.
+Returns the stored visibility state of a data index for all datasets. Set by [toggleDataVisibility](#toggledatavisibility-index). A dataset controller should use this method to determine if an item should not be visible.
```javascript
const visible = chart.getDataVisibility(2);
@@ -229,3 +244,9 @@ Chart.register(Tooltip, LinearScale, PointElement, BubbleController);
## Static: unregister(chartComponentLike)
Used to unregister plugins, axis types or chart types globally from all your charts.
+
+```javascript
+import { Chart, Tooltip, LinearScale, PointElement, BubbleController } from 'chart.js';
+
+Chart.unregister(Tooltip, LinearScale, PointElement, BubbleController);
+```
diff --git a/docs/developers/contributing.md b/docs/developers/contributing.md
index 96c3d05d800..a5bb44566c0 100644
--- a/docs/developers/contributing.md
+++ b/docs/developers/contributing.md
@@ -74,6 +74,6 @@ Guidelines for reporting bugs:
- Check the issue search to see if it has already been reported
- Isolate the problem to a simple test case
-- Please include a demonstration of the bug on a website such as [JS Bin](https://jsbin.com/), [JS Fiddle](https://jsfiddle.net/), or [Codepen](https://codepen.io/pen/). ([Template](https://codepen.io/pen?template=wvezeOq)). If filing a bug against `master`, you may reference the latest code via (changing the filename to point at the file you need as appropriate). Do not rely on these files for production purposes as they may be removed at any time.
+- Please include a demonstration of the bug on a website such as [JS Bin](https://jsbin.com/), [JS Fiddle](https://jsfiddle.net/), or [Codepen](https://codepen.io/pen/). ([Template](https://codepen.io/pen?template=wvezeOq)). If filing a bug against `master`, you may reference the latest code via (changing the filename to point at the file you need as appropriate). Do not rely on these files for production purposes as they may be removed at any time.
Please provide any additional details associated with the bug, if it's browser or screen density specific, or only happens with a certain configuration or data.
diff --git a/docs/developers/index.md b/docs/developers/index.md
index c1df9ed0f50..b48290f4fbf 100644
--- a/docs/developers/index.md
+++ b/docs/developers/index.md
@@ -14,11 +14,11 @@ The latest documentation and samples, including unreleased features, are availab
Latest builds are available for testing at:
-
--
+-
:::warning Warning
-Development builds **must not** be used for production purposes or as replacement for a CDN. See [available CDNs](../getting-started/installation.html#cdn).
+Development builds **must not** be used for production purposes or as replacement for a CDN. See [available CDNs](../getting-started/installation.md#cdn).
:::
diff --git a/docs/general/colors.md b/docs/general/colors.md
index 9d364fa7a5f..49f1b2cacf1 100644
--- a/docs/general/colors.md
+++ b/docs/general/colors.md
@@ -4,7 +4,7 @@ Charts support three color options:
* for geometric elements, you can change *background* and *border* colors;
* for textual elements, you can change the *font* color.
-Also, you can change the whole [canvas background](../configuration/canvas-background.html).
+Also, you can change the whole [canvas background](../configuration/canvas-background.md).
## Default colors
diff --git a/docs/general/data-structures.md b/docs/general/data-structures.md
index 5c95e560ca6..39074070ab5 100644
--- a/docs/general/data-structures.md
+++ b/docs/general/data-structures.md
@@ -2,8 +2,8 @@
The `data` property of a dataset can be passed in various formats. By default, that `data` is parsed using the associated chart type and scales.
-If the `labels` property of the main `data` property is used, it has to contain the same amount of elements as the dataset with the most values. These labels are used to label the index axis (default x axes). The values for the labels have to be provided in an array.
-The provided labels can be of the type string or number to be rendered correctly. In case you want multiline labels you can provide an array with each line as one entry in the array.
+If the `labels` property of the main `data` property is used, it has to contain the same amount of elements as the dataset with the most values. These labels are used to label the index axis (default `x` axis). The values for the labels have to be provided in an array.
+The provided labels can be of the type string or number to be rendered correctly. If you want multiline labels, you can provide an array with each line as one entry in the array.
## Primitive[]
@@ -19,7 +19,22 @@ const cfg = {
}
```
-When the `data` is an array of numbers, values from `labels` array at the same index are used for the index axis (`x` for vertical, `y` for horizontal charts).
+When `data` is an array of numbers, values from the `labels` array at the same index are used for the index axis (`x` for vertical, `y` for horizontal charts).
+
+## Array[]
+
+```javascript
+const cfg = {
+ type: 'line',
+ data: {
+ datasets: [{
+ data: [[10, 20], [15, null], [20, 10]]
+ }]
+ }
+}
+```
+
+When `data` is an array of arrays (or what TypeScript would call tuples), the first element of each tuple is the index (`x` for vertical, `y` for horizontal charts) and the second element is the value (`y` by default).
## Object[]
@@ -58,7 +73,9 @@ const cfg = {
This is also the internal format used for parsed data. In this mode, parsing can be disabled by specifying `parsing: false` at chart options or dataset. If parsing is disabled, data must be sorted and in the formats the associated chart type and scales use internally.
-The values provided must be parsable by the associated scales or in the internal format of the associated scales. A common mistake would be to provide integers for the `category` scale, which uses integers as an internal format, where each integer represents an index in the labels array. `null` can be used for skipped values.
+The values provided must be parsable by the associated scales or in the internal format of the associated scales. For example, the `category` scale uses integers as an internal format, where each integer represents an index in the labels array; but, if parsing is enabled, it can also parse string labels.
+
+`null` can be used for skipped values.
## Object[] using custom properties
@@ -117,7 +134,7 @@ const cfg = {
```
:::warning
-When using object notation in a radar chart, you still need a labels array with labels for the chart to show correctly.
+When using object notation in a radar chart, you still need a `labels` array with labels for the chart to show correctly.
:::
## Object
@@ -136,7 +153,7 @@ const cfg = {
}
```
-In this mode, property name is used for `index` scale and value for `value` scale. For vertical charts, index scale is `x` and value scale is `y`.
+In this mode, the property name is used for the `index` scale and value for the `value` scale. For vertical charts, the index scale is `x` and value scale is `y`.
## Dataset Configuration
@@ -180,9 +197,9 @@ const cfg = {
};
```
-## Typescript
+## TypeScript
-When using typescript, if you want to use a data structure that is not the default data structure, you will need to pass it to the type interface when instantiating the data variable.
+When using TypeScript, if you want to use a data structure that is not the default data structure, you will need to pass it to the type interface when instantiating the data variable.
```ts
import {ChartData} from 'chart.js';
diff --git a/docs/general/fonts.md b/docs/general/fonts.md
index 9b2d6c842ce..df9f4f6cb67 100644
--- a/docs/general/fonts.md
+++ b/docs/general/fonts.md
@@ -29,7 +29,7 @@ let chart = new Chart(ctx, {
| `family` | `string` | `"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"` | Default font family for all text, follows CSS font-family options.
| `size` | `number` | `12` | Default font size (in px) for text. Does not apply to radialLinear scale point labels.
| `style` | `string` | `'normal'` | Default font style. Does not apply to tooltip title or footer. Does not apply to chart title. Follows CSS font-style options (i.e. normal, italic, oblique, initial, inherit).
-| `weight` | `string` | `undefined` | Default font weight (boldness). (see [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight)).
+| `weight` | `normal` \| `bold` \| `lighter` \| `bolder` \| `number` | `undefined` | Default font weight (boldness). (see [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight)).
| `lineHeight` | `number`\|`string` | `1.2` | Height of an individual line of text (see [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height)).
## Missing Fonts
diff --git a/docs/general/performance.md b/docs/general/performance.md
index bc6cedb7205..1fedf4d62ba 100644
--- a/docs/general/performance.md
+++ b/docs/general/performance.md
@@ -72,16 +72,16 @@ new Chart(ctx, {
});
```
-## Parallel rendering with web workers (Chromium only)
+## Parallel rendering with web workers
-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.
+As of 2023, modern browser have 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.
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.
-* Ensure that you have a fallback if you support browsers other than the most modern Chromium browsers.
+* Ensure that you have a fallback if you support older browsers.
* Resizing the chart must be done manually. See an example in the worker code below.
Example main thread code:
@@ -161,7 +161,7 @@ new Chart(ctx, {
### Disable Point Drawing
-If you have a lot of data points, it can be more performant to disable rendering of the points for a dataset and only draw line. Doing this means that there is less to draw on the canvas which will improve render performance.
+If you have a lot of data points, it can be more performant to disable rendering of the points for a dataset and only draw lines. Doing this means that there is less to draw on the canvas which will improve render performance.
To disable point drawing:
diff --git a/docs/getting-started/index.md b/docs/getting-started/index.md
index 232f3d40d5b..6df4d1f57bf 100644
--- a/docs/getting-started/index.md
+++ b/docs/getting-started/index.md
@@ -3,8 +3,9 @@
Let's get started with Chart.js!
* **[Follow a step-by-step guide](./usage) to get up to speed with Chart.js**
-* [Install Chart.js](./installation) from npm or a CDN
+* [Install Chart.js](./installation) from npm or a CDN
* [Integrate Chart.js](./integration) with bundlers, loaders, and front-end frameworks
+* [Use Chart.js from Node.js](./using-from-node-js)
Alternatively, see the example below or check [samples](../samples).
@@ -63,7 +64,7 @@ Now that we have a canvas, we can include Chart.js from a CDN.
```
-Finally, we can create a chart. We add a script that acquires the `myChart` canvas element and instantiates `new Chart` with desired configuration: `bar` chart type, labels, data points, and options.
+Finally, we can create a chart. We add a script that acquires the `myChart` canvas element and instantiates `new Chart` with desired configuration: `bar` chart type, labels, data points, and options.
```html
```
-You can see all the ways to use Chart.js in the [step-by-step guide](./usage).
\ No newline at end of file
+You can see all the ways to use Chart.js in the [step-by-step guide](./usage).
diff --git a/docs/getting-started/integration.md b/docs/getting-started/integration.md
index a83e49574e8..3d0c92c4530 100644
--- a/docs/getting-started/integration.md
+++ b/docs/getting-started/integration.md
@@ -7,7 +7,7 @@ If you're using a front-end framework (e.g., React, Angular, or Vue), please see
## Script Tag
```html
-
+
@@ -122,10 +122,10 @@ const { Chart } = await import('chart.js');
## RequireJS
-**Important:** RequireJS can load only [AMD modules](https://requirejs.org/docs/whyamd.html), so be sure to require one of the UMD builds instead (i.e. `dist/chart.umd.js`).
+**Important:** RequireJS can load only [AMD modules](https://requirejs.org/docs/whyamd.html), so be sure to require one of the UMD builds instead (i.e. `dist/chart.umd.min.js`).
```javascript
-require(['path/to/chartjs/dist/chart.umd.js'], function(Chart){
+require(['path/to/chartjs/dist/chart.umd.min.js'], function(Chart){
const myChart = new Chart(ctx, {...});
});
```
diff --git a/docs/getting-started/usage.md b/docs/getting-started/usage.md
index 3f26017e4da..d5add3b7ab8 100644
--- a/docs/getting-started/usage.md
+++ b/docs/getting-started/usage.md
@@ -49,7 +49,7 @@ Run `npm install`, `yarn install`, or `pnpm install` to install the dependencies