CODEWITHSUNDEEP
javascriptreactjschart.jsreact-chartjs
Airea
Airea

Reputation: 179

TypeError: Cannot read property 'defaults' of undefined when using the react wrapper of chartjs

I'm trying to use the react wrapper of chart.js and I'm having an issue. When I'm trying to add a chart, there is an error (" TypeError: Cannot read property 'defaults' of undefined")

The code is the following:

import React, { useState, useEffect } from 'react';
import api from '../../services/API';
import './Graph.css';
import { Line } from 'react-chartjs-2';

export default function Graph() {
    const [dataChart, setDataChart] = useState({ });

    useEffect(() => {
        const abortController = new AbortController();
        const signal = abortController.signal;
        const getData = async() => {
            let confirmedCases = [];
            let dateOfCases = [];
            await api.get('btt-prices', {signal: signal})
            .then ( resp => {
                for (const dataObj of resp.data ) {
                    console.log( dataObj )
                    confirmedCases.push(dataObj.price);
                    let tempDate = new Date (dataObj.date);
                    dateOfCases.push(tempDate.getUTCDate());
                }
            });
            
            setDataChart({ 
                labels: dateOfCases, 
                datasets: [{ 
                  label: 'Confirmed cases', 
                  data: confirmedCases 
                }]
            });
    
            //console.log(dataChart)
        }

        getData();
        return () => {
            abortController.abort();
        }
    }, []);
    
    return(
        <div className='container'>
            <Line data={ dataChart }/>
        </div>   
    );
}

The error that shows is the following:

TypeError: Cannot read property 'defaults' of undefined
(anonymous function)
C:/Users/e/Desktop/test/front/node_modules/react-chartjs-2/es/index.js:643
  640 | }(_react["default"].Component);
  641 | 
  642 | exports.Scatter = Scatter;
> 643 | var defaults = _chart["default"].defaults;
  644 | exports.defaults = defaults;

I tried to search about it but I can't see any solution... I tried to install again chartjs (besides react-chartjs) just in case, but the error still remains. How can I solve this error Thank you!

Upvotes: 7

Views: 6075

Answers (3)

Naman Dutta
Naman Dutta

Reputation: 59

First

npm uninstall react-chartjs

then

npm i [email protected]

Upvotes: -1

kuldeep porwal
kuldeep porwal

Reputation: 61

Yes, thanks now this solution also work for me,

I was using chart.js with a version of >3.x

then I have downgrade the version to 2.9.4 then it worked for me.

Yarn Command
yarn add react-chartjs-2
yarn add [email protected]

Upvotes: 3

LeeLenalee
LeeLenalee

Reputation: 31421

Which version of chart.js are you running because if you reinstalled it its a high chance you are running version 3 of the lib which is at the moment still not compatible with the wrapper so you will have to install the latest version 2 release of chart.js (2.9.4)

Upvotes: 9

Related Questions