CODEWITHSUNDEEP
javascriptreactjscharts
Carlos Pinho
Carlos Pinho

Reputation: 45

Pie Chart not rendering React Chart.js

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);

Upvotes: 4

Views: 1870

Answers (1)

lcardito
lcardito

Reputation: 172

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.

Upvotes: 2

Related Questions