score:50

Accepted answer

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

score:6

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

score:44

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
)

Related Query

More Query from same tag