React js with react-chart js, does not render doughnut chart

Question

I want to use react-chartjs for my statistics page. So I am currently testing each components of react-chartjs such as bar chart and line chart.

For rendering bar chart and line chart, I made simple datasets and it works fine. However, for doughnut chart, it does not render it.

import React, {PropTypes}                           from 'react';
import classnames                                   from 'classnames';
import Actions                                      from '../../actions/statistics';
import {Doughnut as DoughnutChart}                  from 'react-chartjs';

export default class Testing extends React.Component {

 render () {
    const data = {
        labels: [
            "Red",
            "Blue",
            "Yellow"
        ],
        datasets: [
            {
                data: [300, 50, 100],
                backgroundColor: [
                    "#FF6384",
                    "#36A2EB",
                    "#FFCE56"
                ],
                hoverBackgroundColor: [
                    "#FF6384",
                    "#36A2EB",
                    "#FFCE56"
                ]
            }]
       };

    const styles = {
     graphContainer: {
      border: '1px solid black',
      padding: '15px'
     }
    }

    return (
        <div style={styles.graphContainer}>

        <DoughnutChart data={data} />

        </div>

    );  
 }
}

So to see how it shows on the page, I simply followed example in documentations to render DoughnutChart. In the element inspection tool, it shows that canvas class is rendered, but it does not show the chart...

What am I doing wrong here? Thanks in advance..

Answer 1

The problem was from react-chartjs. After I change react-chartjs to react-chartjs-2, it works.