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. const myChart = new Chart(ctx, {...});
  4. </script>

Common JS

  1. const Chart = require('chart.js');
  2. const 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. SubTitle
  27. } 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. SubTitle
  53. );
  54. const 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 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. const 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. });