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.

If you’re using a front-end framework (e.g., React, Angular, or Vue), please see available integrations (opens new window).

Script Tag

<script src="path/to/chartjs/dist/chart.umd.js"></script>
<script>
    const myChart = new Chart(ctx, {...});
</script>

Bundlers (Webpack, Rollup, etc.)

Chart.js is tree-shakeable, so it is necessary to import and register the controllers, elements, scales and plugins you are going to use.

Quick start

If you don’t care about the bundle size, you can use the auto package ensuring all features are available:

import Chart from 'chart.js/auto';

Bundle optimization

When optimizing the bundle, you need to import and register the components that are needed in your application.

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)):

• Bar chart
  • BarController
  • BarElement
  • Default scales: CategoryScale (x), LinearScale (y)
• Bubble chart
  • BubbleController
  • PointElement
  • Default scales: LinearScale (x/y)
• Doughnut chart
  • DoughnutController
  • ArcElement
  • Not using scales
• Line chart
  • LineController
  • LineElement
  • PointElement
  • Default scales: CategoryScale (x), LinearScale (y)
• Pie chart
  • PieController
  • ArcElement
  • Not using scales
• PolarArea chart
  • PolarAreaController
  • ArcElement
  • Default scale: RadialLinearScale (r)
• Radar chart
  • RadarController
  • LineElement
  • PointElement
  • Default scale: RadialLinearScale (r)
• Scatter chart
  • ScatterController
  • PointElement
  • Default scales: LinearScale (x/y)

Available plugins:

• Decimation
• Filler - used to fill area described by LineElement, see Area charts
• Legend
• SubTitle
• Title
• Tooltip

Available scales:

• Cartesian scales (x/y)

  • CategoryScale
  • LinearScale
  • LogarithmicScale
  • TimeScale
  • TimeSeriesScale

• Radial scales (r)

  • RadialLinearScale

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 using bundlers.

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);
    }
  }
});

CommonJS

Because Chart.js is an ESM library, in CommonJS modules you should use a dynamic import:

const { Chart } = await import('chart.js');

RequireJS

Important: RequireJS can load only AMD modules (opens new window), so be sure to require one of the UMD builds instead (i.e. dist/chart.umd.js).

require(['path/to/chartjs/dist/chart.umd.js'], function(Chart){
    const myChart = new Chart(ctx, {...});
});

Note

In order to use the time scale, you need to make sure one of the available date adapters (opens new window) 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, {...});
        });
    });
});