defaults = _chart["defaults"].defaults is undefined

[DiegoCampaneroNegrete]

Hi and greattings, i maked a project in cube.js and afther that a "dashboard-app" of type 'real time dashboard' everything is ok until I run the app and response whit that message:

TypeError: _chart.default is undefined

and i could't advanced afther that.

so i goes to the file
node_modules/react-chartjs-2/es/index.js:644
and I make a log of the variable '_chart' and I see that only exist the field "_chart["default"]"

so i fix the error whit this:

// I change this:
// var defaults = _chart["default"].defaults;
// For this:
var defaults = _chart["defaults"];

I hope someone can fix this or use that issue for help

[SuspiciousLookingOwl]

Duplicate of #635 and #634

TL;DR: use chart.js v2

npm i chart.js@2.9.4

[kapso]

Curious about any plans of supporting chart.js v3 ?

[yuan9090]

@kapso According to #634 (comment) , maintainer do not maintain.

But I fork the repository, and merge #599 3.x Migration.
It compatible with Chart.js 3, you can try this: @iftek/react-chartjs-3

[mehdi2010]

this problem is from chart.js package just follow below steps for resolve it
1:npm uninstall chart.js
2:npm i chart.js@2.3

[Yuhannakapali]

as the readme.md suggest chartjs@2.5 is recomended this issue occurs when you install chartjs@^3 follow following steps to solve this issue.

1. npm uninstall chat.js || yarn remove chat.js
2. npm i chart.js@2.9 || yarn add chart.js@2.9

[prompt-07]

@Yuhannakapali thanks it worked

[jtremback]

Might be good to put this requirement on 2.9.4 in the readme. Right now, when I come to this repo and try out the library, it is broken out of the box

[jtremback]

Using chart.js 2.9.4 does not seem to fix this.

Here are my dependencies:

    "chart.js": "2.9.4",
    "react-chartjs-2": "^2.11.1",

I have also verified that 2.9.4 is the version installed in my node_modules folder.

Here is my code:

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

const data = {
  labels: ["January", "February", "March", "April", "May", "June", "July"],
  datasets: [
    {
      label: "My First dataset",
      fill: false,
      lineTension: 0.1,
      backgroundColor: "rgba(75,192,192,0.4)",
      borderColor: "rgba(75,192,192,1)",
      borderCapStyle: "butt",
      borderDash: [],
      borderDashOffset: 0.0,
      borderJoinStyle: "miter",
      pointBorderColor: "rgba(75,192,192,1)",
      pointBackgroundColor: "#fff",
      pointBorderWidth: 1,
      pointHoverRadius: 5,
      pointHoverBackgroundColor: "rgba(75,192,192,1)",
      pointHoverBorderColor: "rgba(220,220,220,1)",
      pointHoverBorderWidth: 2,
      pointRadius: 1,
      pointHitRadius: 10,
      data: [65, 59, 80, 81, 56, 55, 40],
    },
  ],
};

export const ReactChartJs = () => {
  return (
    <div>
      <h2>Line Example</h2>
      <Line data={data} />
    </div>
  );
};

Here is the error:

TypeError: Cannot read property 'defaults' of undefined
(anonymous function)
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;

[thebergamo]

Unfortunately I could only use it downgrading to chart.js@2.3 then it worked with latest version.

[jtremback]

I just used chart.js myself with a useEffect hook FWIW

[Neelam-Nishad]

I just used chart.js myself with a useEffect hook FWIW

same issue with me

[duttanaman1]

TypeError: Cannot read property 'defaults' of undefined
(anonymous function)

640 | }(_react["default"].Component);
 641 | 
 642 | exports.Scatter = Scatter;
> 643 | var defaults = _chart["default"].defaults;
 644 | exports.defaults = defaults;

I am using "chart.js": "^2.9.4", and "react-chartjs-2": "^2.11.1", still I am facing this issues. Please help, its urgent

[YakovlevCoded]

Hi! We have updated the wrapper. Try to use the latest version ^3.0.2 with Chart.js ^3.x.

[ashish0660]

1st -> npm uninstall react-chartjs-2 chart.js
Then use this command definitely solve your problem

npm install --save react-chartjs-2 chart.js