How to solve not a registered scale in chartjs-2 - Next.js

In this tutorial, we are going to learn how to solve the error not a registered scale or element in chartjs-2

Category is not a registered scale

Since version 3 of chart.js, all components are tree-shakeable. So bundling will remove any component that is not registered during build. This is why you need to register components after you import them. Otherwise you will get the error “category” is not a registered scale. To resolve it there is two way to do it:

First method

• import { Chart, CategoryScale, LinearScale, BarElement } from ‘chart.js’ and then register those elements using Chart.register(CategoryScale, LinearScale, BarElement) for bar charts

So the final code will look like :

import {Chart, CategoryScale, LinearScale, BarElement} from 'chart.js';

Chart.register(CategoryScale, LinearScale, BarElement);

Second method

The second method consists of import Chart from ‘chart.js/auto’ to import all the charts and register them automatically. This way is more easy but has a drawback of a big bundle size which contains unnecessary imports.

The final code will look like:

import Chart from 'chart.js/auto';

At this point, you might be struggling with finding the correct way on how to integrate chartjs-2 in your project and how to see the graphs on the screen.

I recommend to check my tutorial in this link to get the proper way on how to do it

Arc is not a registered element

For Error: “arc” is not a registered element in a doghnut chart, you can solve it also by import {ArcElement,Chart} from ‘chart.js’ and register ArcElement using Chart.register(ArcElement).

The final code will look like:

import {ArcElement, Chart} from 'chart.js';

Chart.register(ArcElement);

Do not forget to check the comprehensive tutorial on how to integrate chartjs-2 with your project in this link

To check the comprehensive list of components and how to register them, check chartjs integration in this link

Conclusion

We have seen how to solve the error of a registered scale.

To get the proper way on how to integrate chartjs-2 and how to avoid these errors, check my link for more details.

If you are more interested on charts, you can also check out nivo charts, which is a lovely library for charts based on D3.js and React. you will find on this link my full tutorial on how to use it with Next.js