68

I'm trying to migrate Chart.js from 2.9.3 to 3.3.0 and even after applying the the changes (https://www.chartjs.org/docs/latest/getting-started/v3-migration.html) 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?

Pablo
  • 1,953
  • 4
  • 28
  • 57

5 Answers5

106

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

LeeLenalee
  • 27,463
  • 6
  • 45
  • 69
  • 7
    where in his code is he actually using the categoryScale? What is the categoryscale? – ProblemsOfSumit Jul 28 '22 at 22:12
  • 1
    That is the default x axis type. Category scale is the scale type with labels you provide, so since he does not change the type of his x axis he is using the category scale, and because the error says so – LeeLenalee Jul 28 '22 at 22:26
  • 1
    @ProblemsOfSumit makes a good point lol. No intuition as to why this error would appear without a deep understanding of the package. Someone should look at fixing/making this clearer. – jacktim Feb 22 '23 at 03:13
  • Thanks fo ryoue help @LeeLenalee - this helped me overcome this error. However, your answer does appear to assume the reader already has the knowledge you need to fix the error - in which case you would not be asking this question! In particular "Like the error says you are using the `category scale`" - no it doesnt. If the error said "You are using the CategoryScale, but it is not registered" I would say the error said that. I do appreciate you taking the time to answer the question, and I hope you take my feedback in the manner I meant it - as a positive. – NULL pointer May 20 '23 at 02:56
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
)
Erik Martín Jordán
  • 4,332
  • 3
  • 26
  • 36
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);
Prateek
  • 374
  • 3
  • 7
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";
Abel
  • 3,989
  • 32
  • 31
Rajaraman
  • 21
  • 4
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";
Daniel Payne
  • 39
  • 2