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>
2.6 KiB
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
<script src="path/to/chartjs/dist/chart.js"></script>
<script>
var myChart = new Chart(ctx, {...});
</script>
Common JS
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.
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.
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:
import Chart from 'chart.js/auto';
Require JS
Important: RequireJS can not load CommonJS module as is, so be sure to require one of the UMD builds instead (i.e. dist/chart.js, dist/chart.min.js, etc.).
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 and corresponding date library are fully loaded after requiring Chart.js. For this you can use nested requires:
require(['chartjs'], function(Chart) {
require(['moment'], function() {
require(['chartjs-adapter-moment'], function() {
new Chart(ctx, {...});
});
});
});