mirror of
https://github.com/chartjs/Chart.js.git
synced 2024-10-07 20:59:08 +02:00
ed2b96eeaf
* Initial work * Update doc commands * Updated sidebar config * Move docs * Update theme version and enable * Convert to chart.js sample * Update scripts to point to local build * Chart.js from local build * Simplify getting-started example * Axis docs updated except for imported content * Common ticks import works * Chart type docs ported to editor plugin * Last pages to use editor * Fix small errors * Frontmatter title to heading * Remove duplicate example * Update sidebar * Add paths * Remove paths * Add getting-started back * Update menus and add copyright to license section of the docs * Add GA plugin * Style sub-groups * Remove unneeded license page since it is covered on the main page * Remove docusaurus readme page * Remove docusaurus files * Fix issues in docs * Build and deploy scripts for docs work * Conditional base URL for nice local testing * Use eslint-plugin-markdown * Remove hard coded lines * Remove mentions of docusaurus Co-authored-by: Jukka Kurkela <jukka.kurkela@gmail.com>
118 lines
2.6 KiB
Markdown
118 lines
2.6 KiB
Markdown
# Integration
|
|
|
|
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
|
|
<script src="path/to/chartjs/dist/chart.js"></script>
|
|
<script>
|
|
var myChart = new Chart(ctx, {...});
|
|
</script>
|
|
```
|
|
|
|
## Common JS
|
|
|
|
```javascript
|
|
var Chart = require('chart.js');
|
|
var myChart = new Chart(ctx, {...});
|
|
```
|
|
|
|
## 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.
|
|
|
|
For all available imports see the example below.
|
|
|
|
```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
|
|
} 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
|
|
);
|
|
|
|
var 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 an separate path to do just the above for you, in one line:
|
|
|
|
```javascript
|
|
import Chart from 'chart.js/auto';
|
|
```
|
|
|
|
## Require JS
|
|
|
|
**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.).
|
|
|
|
```javascript
|
|
require(['path/to/chartjs/dist/chart.min.js'], function(Chart){
|
|
var myChart = new Chart(ctx, {...});
|
|
});
|
|
```
|
|
|
|
**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:
|
|
|
|
```javascript
|
|
require(['chartjs'], function(Chart) {
|
|
require(['moment'], function() {
|
|
require(['chartjs-adapter-moment'], function() {
|
|
new Chart(ctx, {...});
|
|
});
|
|
});
|
|
});
|
|
```
|