Pie Chart not rendering 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 решило проблему рендеринга.