CODEWITHSUNDEEP
reactjsnpmchart.jsreact-chartjs
vturkovic
vturkovic

Reputation: 137

"Cannot read propery "defaults" of undefined" error while using react-chartjs-2

Getting error after setting up chart component in react.

Error:

enter image description here

Code:

import React, {useEffect, useState} from 'react';

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

import './EloChart.css';


const EloChart = props => {

  const [chartData,setChartData] = useState({})

  const chart = () => {
    setChartData({
      labels: ['december','january','february','march','april'],
      datasets: [
        {
          label: 'elorating',
          data: [1500, 1600, 1700, 1800, 1900],
          backgroundColor: [
            'rgba(75, 192, 192, 0.6)'
          ]
        }
      ]
    })
  }

  
  useEffect(()=> {
    chart()
  }, [])

  return (
    <section className="elo-chart" >
      <h2>Elo Chart</h2>
        <Line data={chartData}/>
    </section>
  );
};

export default EloChart;

Package.json:

  "dependencies": {
    "chart.js": "^3.1.0",
    "react": "^16.8.6",
    "react-chartjs-2": "^2.11.1",
    "react-dom": "^16.8.6",
    "react-scripts": "3.0.1"

Upvotes: 0

Views: 439

Answers (1)

LeeLenalee
LeeLenalee

Reputation: 31421

The react wrapper is not updated yet to support chartjs version 3 so you will have to downgrade to version 2.9.4.

If you change "chart.js": "^3.1.0", to "chart.js": "^2.9.4", and run your install command again it will work

Upvotes: 2

Related Questions