[Chartjs]-Error: "category" is not a registered scale

by

109👍

✅

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 'chart.js/auto';

For all available things you might need to import and register please take a look here: https://www.chartjs.org/docs/3.3.0/getting-started/integration.html#bundlers-webpack-rollup-etc

74👍

If you are using react-chartjs-2.

Without tree shaking:

import { Chart as ChartJS } from 'chart.js/auto'
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
)

25👍

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

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 'chart.js/auto';

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

0👍

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 "chart.js/auto";

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

Leave a comment