0

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..

2
  • r u getting any error in console ? Commented Apr 3, 2017 at 5:49
  • no.. I dont get any errors... so it is difficult to find why it is not working.. Commented Apr 3, 2017 at 5:56

1 Answer 1

1

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

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.