Error: "category" is not a registered scale

Question

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?

Answer 1

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