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

  1. <script src="path/to/chartjs/dist/chart.js"></script>
  2. <script>
  3.     var myChart = new Chart(ctx, {...});
  4. </script>

Common JS

  1. var Chart = require('chart.js');
  2. 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.

  1. import {
  2.   Chart,
  3.   ArcElement,
  4.   LineElement,
  5.   BarElement,
  6.   PointElement,
  7.   BarController,
  8.   BubbleController,
  9.   DoughnutController,
  10.   LineController,
  11.   PieController,
  12.   PolarAreaController,
  13.   RadarController,
  14.   ScatterController,
  15.   CategoryScale,
  16.   LinearScale,
  17.   LogarithmicScale,
  18.   RadialLinearScale,
  19.   TimeScale,
  20.   TimeSeriesScale,
  21.   Decimation,
  22.   Filler,
  23.   Legend,
  24.   Title,
  25.   Tooltip
  26. } from 'chart.js';
  28. Chart.register(
  29.   ArcElement,
  30.   LineElement,
  31.   BarElement,
  32.   PointElement,
  33.   BarController,
  34.   BubbleController,
  35.   DoughnutController,
  36.   LineController,
  37.   PieController,
  38.   PolarAreaController,
  39.   RadarController,
  40.   ScatterController,
  41.   CategoryScale,
  42.   LinearScale,
  43.   LogarithmicScale,
  44.   RadialLinearScale,
  45.   TimeScale,
  46.   TimeSeriesScale,
  47.   Decimation,
  48.   Filler,
  49.   Legend,
  50.   Title,
  51.   Tooltip
  52. );
  54. var myChart = new Chart(ctx, {...});

A short registration format is also available to quickly register everything.

  1. import { Chart, registerables } from 'chart.js';
  2. Chart.register(...registerables);

And finally there is an separate path to do just the above for you, in one line:

  1. import Chart from 'chart.js/auto';

Require JS

Important: RequireJS can not load CommonJS module as isIntegration - 图1 (opens new window), so be sure to require one of the UMD builds instead (i.e. dist/chart.js, dist/chart.min.js, etc.).

  1. require(['path/to/chartjs/dist/chart.min.js'], function(Chart){
  2.     var myChart = new Chart(ctx, {...});
  3. });

Note: in order to use the time scale, you need to make sure one of the available date adaptersIntegration - 图2 (opens new window) and corresponding date library are fully loaded after requiring Chart.js. For this you can use nested requires:

  1. require(['chartjs'], function(Chart) {
  2.     require(['moment'], function() {
  3.         require(['chartjs-adapter-moment'], function() {
  4.             new Chart(ctx, {...});
  5.         });
  6.     });
  7. });