Edge browser does not render chart using chart js - charts

Question

I am using react-chartjs-2(2.9.0) and chart.js(2.9.3) to create charts in my react app. Charts are working fine in all browsers except Microsoft Edge 44.18362.449.0.
Code:
import React, { Component } from 'react';
import { Pie } from 'react-chartjs-2';
import { ReportSettings } from './ReportSettings';
import 'chartjs-plugin-labels';
class PIEChart extends Component {
render() {
const { reportData } = this.props;
let dataArr = [
reportData.Last360DaysCount,
reportData.Last180DaysCount,
reportData.Last90DaysCount,
reportData.Last30DaysCount,
];
let labels = ['Last 360 days', 'Last 180 days', 'Last 90 days', 'Last 30 days'];
const data = {
labels: labels,
datasets: [
{
backgroundColor: ['#6264A7', '#ddd', '#929191', '#BDBDE6', '#333', 'Purple'],
data: dataArr,
fill: true,
borderColor: '#fff',
hoverBackgroundColor: ['#6264A7', '#ddd', '#929191', '#BDBDE6', '#333', 'Purple'],
},
],
};
return (
<div className="Report">
<article className="canvas-container">
<div className="teamsummary">
<Pie data={data} width={400} height={400} />
</div>
</article>
</div>
);
}
}
export default PIEChart;
Issue Details:
description: "Invalid argument."
message: "Invalid argument."
number: -2147024809
stack: "Error: Invalid argument. at fit (http://localhost:3000/static/js/bundle.js:30571:3) at update (http://localhost:3000/static/js/bundle.js:30474:3) at fitBoxes (http://localhost:3000/static/js/bundle.js:22325:3) at core_layouts.update (http://localhost:3000/static/js/bundle.js:22539:3) at updateLayout (http://localhost:3000/static/js/bundle.js:24878:3) at update (http://localhost:3000/static/js/bundle.js:24831:3) at construct (http://localhost:3000/static/js/bundle.js:24555:3) at Chart (http://localhost:3000/static/js/bundle.js:24492:2) at renderChart (http://localhost:3000/static/js/bundle.js:113285:5) at componentDidMount (http://localhost:3000/static/js/bundle.js:113090:5) at commitLifeCycles (http://localhost:3000/static/js/bundle.js:140426:13) at commitLayoutEffects (http://localhost:3000/static/js/bundle.js:143660:7) at callCallback (http://localhost:3000/static/js/bundle.js:118694:9)"

Answer 1

I use 'react-chartjs-2' to create charts in React, which runs successfully on Microsoft Edge 44.18362.449.0, the main code is like below:
import React from 'react';
import logo from './logo.svg';
import './App.css';
import {Pie, Doughnut} from 'react-chartjs-2';
const state = {
labels: ['January', 'February', 'March',
'April', 'May'],
datasets: [
{
label: 'Rainfall',
backgroundColor: [
'#B21F00',
'#C9DE00',
'#2FDE00',
'#00A6B4',
'#6800B4'
],
hoverBackgroundColor: [
'#501800',
'#4B5000',
'#175000',
'#003350',
'#35014F'
],
data: [65, 59, 80, 81, 56]
}
]
}
export default class App extends React.Component {
render() {
return (
<div>
<Pie
data={state}
options={{
title:{
display:true,
text:'Average Rainfall per month',
fontSize: 20
},
legend:{
display:true,
position:'right'
}
}}
/>
<Doughnut
data={state}
options={{
title:{
display:true,
text:'Average Rainfall per month',
fontSize:20
},
legend:{
display:true,
position:'right'
}
}}
/>
</div>
);
}
}
Online Demo：https://stackblitz.com/edit/react-zxrxws?file=serviceWorker.js
If you still can't make it work on Edge Legacy, hopefully you could provide a reproducible example to test.