Skip to content

Commit 1d6b8cc

Browse files
kurkleartfulrobotbenmccann
authored
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 <[email protected]> * Update docs/getting-started/integration.md Co-authored-by: Ben McCann <[email protected]> * review update * version Co-authored-by: Rich Lott <[email protected]> Co-authored-by: Ben McCann <[email protected]>
1 parent 432d1e6 commit 1d6b8cc

File tree

1 file changed

+72
-76
lines changed

1 file changed

+72
-76
lines changed

‎docs/getting-started/integration.md

Lines changed: 72 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -13,89 +13,77 @@ Chart.js can be integrated with plain JavaScript or with different module loader
1313

1414
## Bundlers (Webpack, Rollup, etc.)
1515

16-
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.
16+
Chart.js is tree-shakeable, so it is necessary to import and register the controllers, elements, scales and plugins you are going to use.
1717

18-
For all available imports see the example below.
18+
### Quick start
1919

20-
```javascript
21-
import {
22-
Chart,
23-
ArcElement,
24-
LineElement,
25-
BarElement,
26-
PointElement,
27-
BarController,
28-
BubbleController,
29-
DoughnutController,
30-
LineController,
31-
PieController,
32-
PolarAreaController,
33-
RadarController,
34-
ScatterController,
35-
CategoryScale,
36-
LinearScale,
37-
LogarithmicScale,
38-
RadialLinearScale,
39-
TimeScale,
40-
TimeSeriesScale,
41-
Decimation,
42-
Filler,
43-
Legend,
44-
Title,
45-
Tooltip,
46-
SubTitle
47-
} from 'chart.js';
48-
49-
Chart.register(
50-
ArcElement,
51-
LineElement,
52-
BarElement,
53-
PointElement,
54-
BarController,
55-
BubbleController,
56-
DoughnutController,
57-
LineController,
58-
PieController,
59-
PolarAreaController,
60-
RadarController,
61-
ScatterController,
62-
CategoryScale,
63-
LinearScale,
64-
LogarithmicScale,
65-
RadialLinearScale,
66-
TimeScale,
67-
TimeSeriesScale,
68-
Decimation,
69-
Filler,
70-
Legend,
71-
Title,
72-
Tooltip,
73-
SubTitle
74-
);
75-
76-
const myChart = new Chart(ctx, {...});
77-
```
78-
79-
A short registration format is also available to quickly register everything.
80-
81-
```javascript
82-
import { Chart, registerables } from 'chart.js';
83-
Chart.register(...registerables);
84-
```
85-
86-
And finally there is a separate path to do just the above for you, in one line:
20+
If you don't care about the bundle size, you can use the `auto` package ensuring all features are available:
8721

8822
```javascript
8923
import Chart from 'chart.js/auto';
9024
```
9125

92-
## CommonJS
93-
94-
Because Chart.js is an ESM library, in CommonJS modules you should use a dynamic `import`:
95-
96-
```javascript
97-
const { Chart } = await import('chart.js');
98-
```
26+
### Bundle optimization
27+
28+
When optimizing the bundle, you need to import and register the components that are needed in your application.
29+
30+
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)):
31+
32+
* Bar chart
33+
* `BarController`
34+
* `BarElement`
35+
* Default scales: `CategoryScale` (x), `LinearScale` (y)
36+
* Bubble chart
37+
* `BubbleController`
38+
* `PointElement`
39+
* Default scales: `LinearScale` (x/y)
40+
* Doughnut chart
41+
* `DoughnutController`
42+
* `ArcElement`
43+
* Not using scales
44+
* Line chart
45+
* `LineController`
46+
* `LineElement`
47+
* `PointElement`
48+
* Default scales: `CategoryScale` (x), `LinearScale` (y)
49+
* Pie chart
50+
* `PieController`
51+
* `ArcElement`
52+
* Not using scales
53+
* PolarArea chart
54+
* `PolarAreaController`
55+
* `ArcElement`
56+
* Default scale: `RadialLinearScale` (r)
57+
* Radar chart
58+
* `RadarController`
59+
* `LineElement`
60+
* `PointElement`
61+
* Default scale: `RadialLinearScale` (r)
62+
* Scatter chart
63+
* `ScatterController`
64+
* `PointElement`
65+
* Default scales: `LinearScale` (x/y)
66+
67+
Available plugins:
68+
69+
* [`Decimation`](../configuration/decimation.md)
70+
* `Filler` - used to fill area described by `LineElement`, see [Area charts](../charts/area.md)
71+
* [`Legend`](../configuration/legend.md)
72+
* [`SubTitle`](../configuration/subtitle.md)
73+
* [`Title`](../configuration/title.md)
74+
* [`Tooltip`](../configuration/tooltip.md)
75+
76+
Available scales:
77+
78+
* Cartesian scales (x/y)
79+
* [`CategoryScale`](../axes/cartesian/category.md)
80+
* [`LinearScale`](../axes/cartesian/linear.md)
81+
* [`LogarithmicScale`](../axes/cartesian/logarithmic.md)
82+
* [`TimeScale`](../axes/cartesian/time.md)
83+
* [`TimeSeriesScale`](../axes/cartesian/timeseries.md)
84+
85+
* Radial scales (r)
86+
* [`RadialLinearScale`](../axes/radial/linear.md)
9987

10088
### Helper functions
10189

@@ -122,6 +110,14 @@ const chart = new Chart(ctx, {
122110
});
123111
```
124112

113+
## CommonJS
114+
115+
Because Chart.js is an ESM library, in CommonJS modules you should use a dynamic `import`:
116+
117+
```javascript
118+
const { Chart } = await import('chart.js');
119+
```
120+
125121
## Require JS
126122

127123
**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`).

0 commit comments

Comments
 (0)