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..2432e914909 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.0.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..24cc40e3310 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.0.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..0a6486d5697 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.0.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..802c749c6b0 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.0.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.0.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/index.md b/docs/developers/index.md
index c1df9ed0f50..d1e78e97a45 100644
--- a/docs/developers/index.md
+++ b/docs/developers/index.md
@@ -18,7 +18,7 @@ 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..9262630e9c0 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:
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/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