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...
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:
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
)
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;
Sophia analyzes international trade, startup ecosystems, retail transformation, and supply chain logistics for modern digital publications.
