Chart.js - Where do I find which components should be registered?

Question

I'm new to Chart.js, saw the v3 doc:

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.

I'm wondering where do I find these things for registering, for example, what needs to be registered for this example to work?

Answer 1

You will get an error in your console if you use something that is not imported. If you want to be sure you just have everything and throw away the benefit of tree-shaking you can use this import and register:

import { Chart, registerables } from 'chart.js'

Chart.register(...registerables)

Or in one line:

import Chart from 'chart.js/auto'

For the example to work, the elements that need to be imported and registered are:

• barController
• barElement
• categoryScale
• Tooltip
• Legend

Generally speaking for a chart you need its controller so lineController for line chart, pieController for a pie chart, etc. You need the element so a lineElement and pointElement for line or radar chart, arcElement for pie, doughnut or polar area chart, and barElement for bar chart. And then you need to import the supplied plugins for the title, filler (for area charts), legend, and the tooltip.

Answer 2

Maybe is a little late, but if you are using npm, you can register everything from chart.js using

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

Or, directly:

import Chart from 'chart.js/auto';

Also, you can see here everything it can be imported for an especific chart, and my answer above: https://www.chartjs.org/docs/master/getting-started/integration.html#bundlers-webpack-rollup-etc

Answer 3

It worked for me.

import { Chart } from "chart.js";
import * as Chartjs from "chart.js";

const controllers = Object.values(Chartjs).filter(
  (chart) => chart.id !== undefined
);

Chart.register(...controllers);