Error: "category" is not a registered scale

I'm trying to migrate Chart.js from 2.9.3 to 3.3.0 and even after applying the the changes () I'm still getting the error:

Error: "category" is not a registered scale.

This is what I have

Chart.register(BarController, DoughnutController, LineController, PieController);

new Chart(this.id, { type: 'bar', data, options: { responsive: true, maintainAspectRatio: false, plugins: { title: { display: options.plugins.title ? true : false, }, tooltip: { mode: 'index', intersect: false }, scales: { x: { stacked: true, gridLines: { drawBorder: false, display: false, }, ticks: { autoSkip: true, maxTicksLimit: 13, }, }, y: { stacked: true, gridLines: { color: '#e6e6e6', drawBorder: false, }, } }
});

What could I be missing here?

6 Answers

Like the error says you are using the category scale so you will need to import and register it like so:

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

Or you can choose to not use treeshaking and import everything like so:

import Chart from '

For all available things you might need to import and register please take a look here:

4

If you are using react-chartjs-2.

Without tree shaking:

import { Chart as ChartJS } from '
import { Chart } from 'react-chartjs-2'

With tree shaking:

import { Chart as ChartJS, CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend,
} from 'chart.js'
import { Chart } from 'react-chartjs-2'
ChartJS.register( CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend
)

1

To use with react-chartjs-2 and import everything; changing chart as chartjs so that it does not show error for importing chart from react chart

import { Chart as ChartJS, registerables } from 'chart.js';
import { Chart } from 'react-chartjs-2'
ChartJS.register(...registerables);

With NextJS I have to use the following, as internally there is a useEffect in the react-chartjs-2 so all needs to be client rendered:

"use client";
import "";
import { Line } from "react-chartjs-2";

I am using Line chart , i faced this issue when update to next.js version , below solution works fine for me, resolved that before destroy() chart error

import Chart from '
import { Line } from "react-chartjs-2";

I struggled a lot with my Nextjs/React project make sure to install WITH the --save flag

npm install --save chart.js react-chartjs-2

I did everything right but this was the problem.

use this exact npm command and then use this code (Bar chart for example), and all should be good:

"use client";
import { useState, useEffect } from "react";
import { Bar } from "react-chartjs-2";
import { Chart as ChartJS } from "";
const BarChart = ({ data }) => { return <Bar data={data} />;
};
export default BarChart;

Your Answer

Sign up or log in

Sign up using Google Sign up using Facebook Sign up using Email and Password Submit

Post as a guest

Post Your Answer Discard

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.