Chartjs-Edge browser does not render chart using chart js

by

0👍

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.

Leave a comment