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';
  27. Chart.register(
  28. ArcElement,
  29. LineElement,
  30. BarElement,
  31. PointElement,
  32. BarController,
  33. BubbleController,
  34. DoughnutController,
  35. LineController,
  36. PieController,
  37. PolarAreaController,
  38. RadarController,
  39. ScatterController,
  40. CategoryScale,
  41. LinearScale,
  42. LogarithmicScale,
  43. RadialLinearScale,
  44. TimeScale,
  45. TimeSeriesScale,
  46. Decimation,
  47. Filler,
  48. Legend,
  49. Title,
  50. Tooltip
  51. );
  52. 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';

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.

  1. import Chart from 'chart.js/auto';
  2. import { getRelativePosition } from 'chart.js/helpers';
  3. const chart = new Chart(ctx, {
  4. type: 'line',
  5. data: data,
  6. options: {
  7. onClick: (e) => {
  8. const canvasPosition = getRelativePosition(e, chart);
  9. // Substitute the appropriate scale IDs
  10. const dataX = chart.scales.x.getValueForPixel(canvasPosition.x);
  11. const dataY = chart.scales.y.getValueForPixel(canvasPosition.y);
  12. }
  13. }
  14. });

Require JS

Important: RequireJS can not load CommonJS module as is Integration - 图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 adapters Integration - 图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. });