Pie chart is not displayed. React Chart.js

Question

I am trying to make a simple pie chart in a reaction component using the Chart.js library.

I managed to display a line chart, but for some reason my pie chart just displays a blank canvas. Is the problem with an invalid chartData value? I do not get any errors.

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

Answer 1

Sorry for the first (un) answer. I am somewhere:

The problem was my CSS.

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

For some reason, I still don’t know that the size of the pie chart makes it not display. Removing css solved the rendering problem.