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 <artfulrobot@users.noreply.github.com>
Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com>

diff --git a/docs/getting-started/integration.md b/docs/getting-started/integration.md
index e74aef8a69c660558a850dbbdf6c9ed6f9c03715..eb8b7dbc92a090d7f96550d94916e87d6784045f 100644 (file)
--- 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`).