Pie Chart not rendering React Chart.js

Question

I'm trying to render a simple pie chart in a react component, using the Chart.js library.

I've managed to render a Line chart, but for some reason my Pie chart is just rendering an empty canvas. Is it a problem with the chartData not being valid? I'm not getting any kind of error.

import React, { Component, PropTypes } from 'react';
import * as axios from 'axios';
import s from './Test.css';
import withStyles from 'isomorphic-style-loader/lib/withStyles';
import cx from 'classnames';

var PieChart = require("react-chartjs").Pie;

class Test extends Component {

  constructor(props) {
    super(props);
    this.chartData = {
      datasets: [{
        data: [100, 200, 300],
        backgroundColor: ["#FF6384", "#36A2EB", "FFCE56"]
      }]
    };
    this.chartOptions = {
      scale: {
        reverse: true,
        ticks: {
          beginAtZero: true
        }
      }
    };
  };

  render() {
    return(<div className={s.graphic}><PieChart data={this.chartData} options={this.chartOptions} width="600" height="250" /></div>);
  }
}

export default withStyles(s)(Test);

lcardito · Accepted Answer · 2017-04-02 17:14:03Z

2

Apologies for the first (non) answer. I've actually got somewhere:

The problem was my CSS.

canvas {
    width: 100% !important;
    height: auto !important;
}

For some reason still not known to me forcing the pie chart sizes causes it not to render. Removing the css solved the rendering problem.

edited Apr 2, 2017 at 17:14

answered Apr 2, 2017 at 17:00

lcardito

1721 gold badge1 silver badge9 bronze badges

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

Collectives™ on Stack Overflow

Pie Chart not rendering React Chart.js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related