[Chartjs]-Chart.js – Where do I find which components should be registered?

by

59👍

✅

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.

11👍

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

1👍

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

Leave a comment