Uncaught Error: "category" is not a registered scale - reactjs

Question

I am trying to implement React char but getting this error, I search and follow decumentation but couldn't find the solution.
import React from 'react';
import { Bar } from 'react-chartjs-2';
const BarChart = () => {
return (
<div>
<Bar data={{
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
}} />
</div>
);
};
export default BarChart;

Answer 1

Change your code to:
import { Bar } from 'react-chartjs-2';
import { Chart, registerables } from 'chart.js';
Chart.register(...registerables);
const BarChart = () => { ... your code ... }
As described in https://www.chartjs.org/docs/3.3.0/getting-started/integration.html#bundlers-webpack-rollup-etc you need to register all the components you're going to use.
The above code just registers everything.
Check out the link for all available components you can register.