react-chartjs-2: defaults = _chart["defaults"].defaults is undefined

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

About this issue

Original URL
State: closed
Created 3 years ago
Comments: 19

Most upvoted comments

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 on Apr 13, 2021

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;

jtremback on Apr 13, 2021

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

mehdi2010 on Apr 9, 2021

@kapso HorizontalBar chart type was removed. Horizontal bar charts can be configured using the new indexAxis option. You can see example here.

YakovlevCoded on Apr 21, 2021

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

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

ashish0660 on Apr 21, 2021

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

thebergamo on Apr 13, 2021