react-chart-2 <"Line" is not a registered controller.>

Question

Currently, I am making a code that automatically draws input values into a chart when input is received through react. I'm trying to add a saved chart using usestate for testing, but I can't proceed with the error <"Line" is not a registered controller.>.

Any way to fix this error?

Here's the code:

import {CreatChart} from './WidgetCRUD'
import Chart from 'chart.js/auto'
import {Radar,Line,Pie,Doughnut,PolarArea, Bar} from 'react-chartjs-2' 

const options = 
{
  responsive: true, 
  scales: 
  {
    yAxes: 
    [
      {
        ticks: 
        {
          beginAtZero: true,
        },
      },
    ],
  },
}

const data = 
{
  labels: ['1', '2', '3', '4', '5', '6', '7' , '8', '9','10'],
  datasets: [
    {
      type: 'line',
      label: 'Dataset 1',
      borderColor: 'rgb(54, 162, 235)',
      borderWidth: 2,
      data: [30, 9, 24, 50,-20,20, 17, 45, 49],
    }
  ],
}


const main = () =>
{
    const [createChart, setCreateChart] = useState([])
    setCreateChart(<Line data = {data} options={options} style={{ position: "relative"}}/>)
    return (
       <div>{createChart}</div>
    )
}

Answer 1

This is my code so you need to adapt it to yours, first you need to import everything you need from chart.js, depending on what chart you need, I'm using Line Chart

import {
Chart as ChartJS,
CategoryScale,
LinearScale,
PointElement,
LineElement,
Title,
Tooltip,
Legend,
TimeScale,
ChartOptions
} from 'chart.js';
import { Line } from 'react-chartjs-2';

Then you need to register the elements:

ChartJS.register(
 CategoryScale,
 LinearScale,
 PointElement,
 LineElement,
 TimeScale,
 Title,
 Tooltip,
 Legend
);

For more info check these links: Link 1 Link 2