Problem with chartjs and react-chartjs-2 in reactjs

Question

I tried to draw a line chart with temperature data, humidity data and brightness data. I tried to downgrade the version of chartjs and react-chartjs-2 but it doesn't work Here's my dependencies:

  "dependencies": {
    "antd": "^5.13.2",
    "chart.js": "^3.9.1",
    "react": "^18.2.0",
    "react-chartjs-2": "^4.3.1",
    "react-dom": "^18.2.0",
  },

And my code:

import React from 'react'
import { Line } from 'react-chartjs-2';

const GraphElement = () => {

  const chartData = {
    labels: timeData,
    datasets: [
      {
        label: 'Temperature',
        data: temperatureData,
        fill: false,
        borderColor: 'rgb(255, 99, 132)',
        tension: 0.1,
      },
      {
        label: 'Humidity',
        data: humidityData,
        fill: false,
        borderColor: 'rgb(75, 192, 192)',
        tension: 0.1,
      },
      {
        label: 'Brightness',
        data: brightnessData,
        fill: false,
        borderColor: 'rgb(255, 206, 86)',
        tension: 0.1,
      },
    ],
  }

  const options = {
    scales: {
      x: {
        type: 'linear',
        position: 'bottom',
      },
      y: {
          beginAtZero: true,
          max: 1000,
          type: 'linear',
      },
    },
  };


  return (
    <div className='graph--container'>
      ĐỒ THỊ 
      <Line key={chartKey} data={chartData} options={options} />
    </div>
  )
}

export default GraphElement;

And i got this problem:

ERROR
"linear" is not a registered scale.
   
and 
Canvas is already in use. Chart with ID '0' must be destroyed before the canvas with ID '' can be reused.
    

Please help me with this, thank you very much

Tried to change the version of chartjs and react-chartjs-2 but it doesn't work

Answer 1

Whatever errors you are getting are from not registering the elements, we can do this will be below code.

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

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

code

Line Chart sample demo on their website

When I implemented the same, I was not able to render the chart, I found that you set linear on your x-axis, in my example since data is not provided, I used string, so after removing linear, the chart got rendered!

import { FC } from 'react';
import React from 'react';
import { Line } from 'react-chartjs-2';
import './style.css';
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend,
} from 'chart.js';

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

export const App: FC<{ name: string }> = ({ name }) => {
  const labels = [
    'January',
    'February',
    'March',
    'April',
    'May',
    'June',
    'July',
  ];
  const chartData = {
    labels: ['test', 'test2', 'test3'],
    datasets: [
      {
        label: 'Temperature',
        data: labels.map(() => Math.floor(Math.random() * 1000) + 1),
        fill: false,
        borderColor: 'rgb(255, 99, 132)',
        tension: 0.1,
      },
      {
        label: 'Humidity',
        data: labels.map(() => Math.floor(Math.random() * 1000) + 1),
        fill: false,
        borderColor: 'rgb(75, 192, 192)',
        tension: 0.1,
      },
      {
        label: 'Brightness',
        data: labels.map(() => Math.floor(Math.random() * 1000) + 1),
        fill: false,
        borderColor: 'rgb(255, 206, 86)',
        tension: 0.1,
      },
    ],
  };

  const options = {
    scales: {
      y: {
        beginAtZero: true,
        max: 1000,
        type: 'linear',
      },
    },
  };
  const chartKey = 'line';

  return (
    <div className="graph--container">
      ĐỒ THỊ
      <Line data={chartData} options={options} />
    </div>
  );
};

stackblitz