From 1d6b8cc0478d580ba85e9b61942b6be34905c391 Mon Sep 17 00:00:00 2001 From: Jukka Kurkela Date: Tue, 23 Aug 2022 08:41:20 +0300 Subject: [PATCH] Document components for bundle optimization (#10569) * Update integration.md * Update integration.md * Fix typo * Another typo * Update docs/getting-started/integration.md Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com> * Update docs/getting-started/integration.md Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com> * review update * version Co-authored-by: Rich Lott Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com> --- docs/getting-started/integration.md | 148 ++++++++++++++-------------- 1 file changed, 72 insertions(+), 76 deletions(-) diff --git a/docs/getting-started/integration.md b/docs/getting-started/integration.md index e74aef8a6..eb8b7dbc9 100644 --- a/docs/getting-started/integration.md +++ b/docs/getting-started/integration.md @@ -13,89 +13,77 @@ Chart.js can be integrated with plain JavaScript or with different module loader ## Bundlers (Webpack, Rollup, etc.) -Chart.js 3 is tree-shakeable, so it is necessary to import and register the controllers, elements, scales and plugins you are going to use. +Chart.js is tree-shakeable, so it is necessary to import and register the controllers, elements, scales and plugins you are going to use. -For all available imports see the example below. +### Quick start -```javascript -import { - Chart, - ArcElement, - LineElement, - BarElement, - PointElement, - BarController, - BubbleController, - DoughnutController, - LineController, - PieController, - PolarAreaController, - RadarController, - ScatterController, - CategoryScale, - LinearScale, - LogarithmicScale, - RadialLinearScale, - TimeScale, - TimeSeriesScale, - Decimation, - Filler, - Legend, - Title, - Tooltip, - SubTitle -} from 'chart.js'; - -Chart.register( - ArcElement, - LineElement, - BarElement, - PointElement, - BarController, - BubbleController, - DoughnutController, - LineController, - PieController, - PolarAreaController, - RadarController, - ScatterController, - CategoryScale, - LinearScale, - LogarithmicScale, - RadialLinearScale, - TimeScale, - TimeSeriesScale, - Decimation, - Filler, - Legend, - Title, - Tooltip, - SubTitle -); - -const myChart = new Chart(ctx, {...}); -``` - -A short registration format is also available to quickly register everything. - -```javascript -import { Chart, registerables } from 'chart.js'; -Chart.register(...registerables); -``` - -And finally there is a separate path to do just the above for you, in one line: +If you don't care about the bundle size, you can use the `auto` package ensuring all features are available: ```javascript import Chart from 'chart.js/auto'; ``` -## CommonJS - -Because Chart.js is an ESM library, in CommonJS modules you should use a dynamic `import`: - -```javascript -const { Chart } = await import('chart.js'); -``` +### Bundle optimization + +When optimizing the bundle, you need to import and register the components that are needed in your application. + +The options are categorized into controllers, elements, plugins, scales. You can pick and choose many of these, e.g. if you are not going to use tooltips, don't import and register the `Tooltip` plugin. But each type of chart has its own bare-minimum requirements (typically the type's controller, element(s) used by that controller and scale(s)): + +* Bar chart + * `BarController` + * `BarElement` + * Default scales: `CategoryScale` (x), `LinearScale` (y) +* Bubble chart + * `BubbleController` + * `PointElement` + * Default scales: `LinearScale` (x/y) +* Doughnut chart + * `DoughnutController` + * `ArcElement` + * Not using scales +* Line chart + * `LineController` + * `LineElement` + * `PointElement` + * Default scales: `CategoryScale` (x), `LinearScale` (y) +* Pie chart + * `PieController` + * `ArcElement` + * Not using scales +* PolarArea chart + * `PolarAreaController` + * `ArcElement` + * Default scale: `RadialLinearScale` (r) +* Radar chart + * `RadarController` + * `LineElement` + * `PointElement` + * Default scale: `RadialLinearScale` (r) +* Scatter chart + * `ScatterController` + * `PointElement` + * Default scales: `LinearScale` (x/y) + +Available plugins: + +* [`Decimation`](../configuration/decimation.md) +* `Filler` - used to fill area described by `LineElement`, see [Area charts](../charts/area.md) +* [`Legend`](../configuration/legend.md) +* [`SubTitle`](../configuration/subtitle.md) +* [`Title`](../configuration/title.md) +* [`Tooltip`](../configuration/tooltip.md) + +Available scales: + +* Cartesian scales (x/y) + * [`CategoryScale`](../axes/cartesian/category.md) + * [`LinearScale`](../axes/cartesian/linear.md) + * [`LogarithmicScale`](../axes/cartesian/logarithmic.md) + * [`TimeScale`](../axes/cartesian/time.md) + * [`TimeSeriesScale`](../axes/cartesian/timeseries.md) + +* Radial scales (r) + * [`RadialLinearScale`](../axes/radial/linear.md) ### Helper functions @@ -122,6 +110,14 @@ const chart = new Chart(ctx, { }); ``` +## CommonJS + +Because Chart.js is an ESM library, in CommonJS modules you should use a dynamic `import`: + +```javascript +const { Chart } = await import('chart.js'); +``` + ## Require 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.js`). -- 2.47.3