Edge browser does not render chart using chart js

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:

I have tested your code with some test data (Like [this](https://i.stack.imgur.com/QviBf.png)), it seems that the code works well on my side (the [screenshot](https://i.stack.imgur.com/gFScJ.png)), please try to clear the browser data and recheck it. Besides, in my react application, I have installed the react-app-polyfill, you could try to install it. If still not solve the problem, perhaps the issue is related to another part of code, can you post enough code (or create a [Codepen](https://codepen.io/gaearon/pen/zKRGpo)) to reproduce the problem. — Zhi Lv, May 25 '20 at 10:00
The problem is reproducible in old edge 44.18362.449.0. When i tried this on new chromium edge this was not reproducible. Can you please let me know which version of edge you tried? Meanwhile i will work on codepen — Kunal Valecha, May 25 '20 at 11:26

Jill Cheng · Answer 1 · 2020-05-26T10:00:01.567

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.

Edge browser does not render chart using chart js

1 Answers1