Integration

const myChart = new Chart(ctx, {...});

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, registerables } from 'chart.js';
Chart.register(...registerables);

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

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.

import Chart from 'chart.js/auto';
const chart = new Chart(ctx, {
  type: 'line',
  options: {
    onClick: (e) => {
      const canvasPosition = getRelativePosition(e, chart);
      // Substitute the appropriate scale IDs
      const dataX = chart.scales.x.getValueForPixel(canvasPosition.x);
    }
});

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

Note: in order to use the time scale, you need to make sure 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, {...});
        });
});