円グラフでReact Chart.jsが表示されない

Question

私は、反応コンポーネントで単純な円グラフをChart.jsライブラリを使用してレンダリングしようとしています。

私は折れ線グラフをレンダリングすることができましたが、何らかの理由で私の円グラフが空のキャンバスをレンダリングしているだけです。有効なchartDataに問題がありますか？私はどんな種類のエラーも得ていません。

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

最初の（不）回答に対する謝罪。私は実際にどこかにいる：

問題は私のCSSだった。

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

なぜか私には分かっていないが、円グラフのサイズを強制すると、レンダリングされません。 CSSを削除すると、レンダリングの問題が解決しました。