v3 component registration

[wenfangdu]

Hi, 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?

[LeeLenaleee]

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 treeshaking you can use this import and register:

import * as ChartJs from 'chart.js';

ChartJs.Chart.register.apply(null, Object.values(ChartJs).filter((chartClass) => (chartClass.id)));

new ChartJs.Chart()

But quick look I think the elements you need to import and register are:

• barController,
• barElement
• categoryScale
• Tooltip
• Legend

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

See this example for a simple line chart: https://www.chartjs.org/docs/master/getting-started/v3-migration/#setup-and-installation

[wenfangdu]

The updated doc should be deployed, the elements are wrongly shown in the v3 website.

[LeeLenaleee]

That is because it is still in beta and not every change that comes in the master will result in a new release, that is also the reason I sent the docs generated from the master since they are showing a more correct way as the next docs at the moment

[PeppeL-G]

I think this needs to be documented much better. I'm a new user of this library, and I start by reading:

https://www.chartjs.org/docs/latest/getting-started/integration.html#bundlers-webpack-rollup-etc

Where it says I need to import the things I need. OK, then I go to the type of graph I need:

https://www.chartjs.org/docs/latest/charts/line.html

And there's no info about what I should import. But with the post here I realized I needed to import just Chart, LineElement and LineController. But this should be written somewhere in the docs.

Otherwise, great library!

[PeppeL-G]

Nope, my mistake, I actually needed:

• LineElement
• PointElement
• LineController,
• LinearScale
• CategoryScale
• Tooltip
• Legend

The reason it worked before was because I had a Chart.register(everything) at another place.

It is also unclear if it's OK to register the same thing multiple times. For example, now I have:

Chart.register(
  LineElement,
  PointElement,
  LineController,
  LinearScale,
  CategoryScale,
  Tooltip,
  Legend,
);

In each file that needs the graph, because I want each file to explicitly specify their dependencies. Is this OK?

[lodybo]

I'm currently in the same boat, where I want to draw a bar chart while benefiting from the tree-shaking ability in my project.

Just like @PeppeL-G I started reading the Integration docs before moving to the Bar chart documentation. The integration page explains the list of imports I can use, but it doesn't elaborate on the ones I need for a Bar chart. When using the import Chart from 'chart.js/auto'; I get a chart drawn on the page but I trade in the tree-shaking feature.

The next step was to pick the imports I needed for the bar chart. Since the documentation doesn't specify which ones I needed for the my chart I went ahead and chose the imports that I thought I needed. Trial and error gave me this:

import {
  Chart,
  BarElement,
  BarController,
  CategoryScale,
  LinearScale,
  Tooltip,
  Legend,
} from "https://cdn.skypack.dev/chart.js";

Chart.register(
  BarElement,
  BarController,
  CategoryScale,
  LinearScale,
  Tooltip,
  Legend,
);

Which works, but it would be preferred to have gotten this from the Bar chart documentation page. I'm now not really sure if I've imported everything but I get my data visualised on screen.

Also, on a side note, I spent quite some time with the imports I've shown above without a bar rendered on the page and no error in the console. After I while I discovered that I had blindly copy-pasted the import declarations into the .register() function which imported Chart again:

import {
  Chart,
  // all the other imports
} from "https://cdn.skypack.dev/chart.js";

Chart.register(
  Chart,
  // all the other imports
);

This silently fails. While I'm the first to say that it's a pretty silly mistake to make, an error message would've been quite helpful.

[artfulrobot]

Thanks, @lodybo.

The docs badly need updating

If you want to be sure you just have everything and throw away the benefit of treeshaking you can use this import and register

why would we want to do this? Surely the people reading the docs at that point are those who want the benefits of tree shaking. It's great to know there's a one-liner for people who don't need to care about bundle size, but surely it's a feature that tree shaking is supported, and worth explaining how to use it.

You will get an error in your console if you use something that is not imported.

There are currently 24 things that could possibly imported. That's 24 compile and test cycles needed to figure out what's actually needed. Sure, some are perhaps obvious, but still - why make it so hard? With a bit of documentation as suggested above, that frustration barrier could be completely removed.

[LeeLenaleee]

why would we want to do this? Surely the people reading the docs at that point are those who want the benefits of tree shaking. It's great to know there's a one-liner for people who don't need to care about bundle size, but surely it's a feature that tree shaking is supported, and worth explaining how to use it.

To get the V2 behaviour back, and if you are reading there doesnt mean you want treeshaking it means you want to know how to use chart.js in combination with bundlers instead of a scripttag.

There are currently 24 things that could possibly imported. That's 24 compile and test cycles needed to figure out what's actually needed. Sure, some are perhaps obvious, but still - why make it so hard? With a bit of documentation as suggested above, that frustration barrier could be completely removed.

How would you sugest it being documented, only thing that can come to mind is that the scales might be a bit unclear but all the other things speak for themself I think. If you want to improve it you are welcome to make a PR to clarefy it

[artfulrobot]

Fantastic, here's a start https://github.com/chartjs/Chart.js/pull/9721