0

I am making a dashboard with react, I want to have doughnut charts that display some information. I am following this tutorial that uses chartjs and I have ran into an unexpected problem.

When I run my app, the dashboard does not display the doughnut chart, however if I add a Line graph or bar chart, they display as expected

This is the dashboard when trying to rendering a doughnut chart, I have circled what I think is the canvas for the chart

enter image description here

This is the code 

import React from 'react';
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>
        <Doughnut
          data={state}
          options={{
            width:"400",
            height:"400",
            responsive: true,
            maintainAspectRatio: true,
            title:{
              display:true,
              text:'Average Rainfall per month',
              fontSize:20
            },
            legend:{
              display:true,
              position:'right'
            }
          }}
        />
      </div>
    );
  }
}

I have looked at the following solution found on the following question, but it is still not working. Note that the pie chart is also not displaying correctly, only bar and line charts display correctly

Can't resize react-chartjs-2 doughnut chart

TL;DR: Chart-js in react not showing doughnut chart but other charts work.

burned_fenrir
  • 138
  • 2
  • 13
  • 1
    the code you posted is working fine for me here https://codesandbox.io/s/nervous-ritchie-ykjfb – xplo4d Mar 09 '20 at 11:11
  • @xplo4d well that's slightly confusing. I m not sure where I m going wrong... – burned_fenrir Mar 09 '20 at 11:22
  • 1
    @xplo4d it's fixed now, turns out I needed to upgrade my chartjs version. when I installed it, I used the command npm install --save chart.js@^1.1.1 react react-dom, I changed it to version ^2.9.0 and now it's working – burned_fenrir Mar 09 '20 at 11:36

0 Answers0