2021-03-30 16:32:39 +02:00
# Integration
2017-03-21 01:36:54 +01:00
Chart.js can be integrated with plain JavaScript or with different module loaders. The examples below show how to load Chart.js in different systems.
## Script Tag
```html
2020-05-25 22:54:22 +02:00
< script src = "path/to/chartjs/dist/chart.js" > < / script >
2017-03-21 01:36:54 +01:00
< script >
2017-05-13 14:14:02 +02:00
var myChart = new Chart(ctx, {...});
2017-03-21 01:36:54 +01:00
< / script >
```
2019-01-29 17:54:22 +01:00
## Common JS
2018-07-29 22:16:10 +02:00
```javascript
2019-01-29 17:54:22 +01:00
var Chart = require('chart.js');
2018-07-29 22:16:10 +02:00
var myChart = new Chart(ctx, {...});
```
2019-01-29 17:54:22 +01:00
## Bundlers (Webpack, Rollup, etc.)
2017-03-21 01:36:54 +01:00
2020-07-12 00:08:45 +02:00
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.
2020-12-16 22:41:19 +01:00
For all available imports see the example below.
2021-02-18 14:17:39 +01:00
2017-03-21 01:36:54 +01:00
```javascript
2020-12-16 22:41:19 +01:00
import {
Chart,
ArcElement,
LineElement,
BarElement,
PointElement,
BarController,
BubbleController,
DoughnutController,
LineController,
PieController,
PolarAreaController,
RadarController,
ScatterController,
CategoryScale,
LinearScale,
LogarithmicScale,
RadialLinearScale,
TimeScale,
TimeSeriesScale,
2021-02-15 20:07:17 +01:00
Decimation,
2020-12-16 22:41:19 +01:00
Filler,
Legend,
Title,
2021-07-10 14:09:33 +02:00
Tooltip,
SubTitle
2020-12-16 22:41:19 +01:00
} from 'chart.js';
2020-07-12 00:08:45 +02:00
2020-12-16 22:41:19 +01:00
Chart.register(
ArcElement,
LineElement,
BarElement,
PointElement,
BarController,
BubbleController,
DoughnutController,
LineController,
PieController,
PolarAreaController,
RadarController,
ScatterController,
CategoryScale,
LinearScale,
LogarithmicScale,
RadialLinearScale,
TimeScale,
TimeSeriesScale,
2021-02-15 20:07:17 +01:00
Decimation,
2020-12-16 22:41:19 +01:00
Filler,
Legend,
Title,
2021-07-10 14:09:33 +02:00
Tooltip,
SubTitle
2020-12-16 22:41:19 +01:00
);
2020-07-12 00:08:45 +02:00
2017-05-13 14:14:02 +02:00
var myChart = new Chart(ctx, {...});
2017-03-21 01:36:54 +01:00
```
2021-02-15 10:21:31 +01:00
A short registration format is also available to quickly register everything.
```javascript
import { Chart, registerables } from 'chart.js';
Chart.register(...registerables);
```
2021-02-28 08:02:44 +01:00
And finally there is an separate path to do just the above for you, in one line:
```javascript
import Chart from 'chart.js/auto';
```
2021-06-26 00:34:41 +02:00
### Helper functions
If you want to use the helper functions, you will need to import these separately from the helpers package and use them as stand-alone functions.
Example of [Converting Events to Data Values ](../configuration/interactions.md#converting-events-to-data-values ) using bundlers.
```javascript
import Chart from 'chart.js/auto';
import { getRelativePosition } from 'chart.js/helpers';
const chart = new Chart(ctx, {
type: 'line',
data: data,
options: {
onClick: (e) => {
const canvasPosition = getRelativePosition(e, chart);
// Substitute the appropriate scale IDs
const dataX = chart.scales.x.getValueForPixel(canvasPosition.x);
const dataY = chart.scales.y.getValueForPixel(canvasPosition.y);
}
}
});
```
2017-03-21 01:36:54 +01:00
## Require JS
2020-05-25 22:54:22 +02:00
**Important:** RequireJS [can **not** load CommonJS module as is ](https://requirejs.org/docs/commonjs.html#intro ), so be sure to require one of the UMD builds instead (i.e. `dist/chart.js` , `dist/chart.min.js` , etc.).
2019-01-29 17:54:22 +01:00
2017-03-21 01:36:54 +01:00
```javascript
2020-05-25 22:54:22 +02:00
require(['path/to/chartjs/dist/chart.min.js'], function(Chart){
2017-05-13 14:14:02 +02:00
var myChart = new Chart(ctx, {...});
});
```
2020-02-28 01:40:31 +01:00
**Note:** in order to use the time scale, you need to make sure [one of the available date adapters ](https://github.com/chartjs/awesome#adapters ) and corresponding date library are fully loaded **after** requiring Chart.js. For this you can use nested requires:
2019-01-29 17:54:22 +01:00
```javascript
require(['chartjs'], function(Chart) {
2020-02-28 01:40:31 +01:00
require(['moment'], function() {
require(['chartjs-adapter-moment'], function() {
new Chart(ctx, {...});
});
2019-01-29 17:54:22 +01:00
});
});
```