javascript - Pie Chart not rendering React Chart.js -


i'm trying render simple pie chart in react component, using chart.js library.

i've managed render line chart, reason pie chart rendering empty canvas. problem chartdata not being valid? i'm not getting kind of error.

import react, { component, proptypes } 'react'; import * axios 'axios'; import s './test.css'; import withstyles 'isomorphic-style-loader/lib/withstyles'; import cx '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); 

apologies first (non) answer. i've got somewhere:

the problem css.

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

for reason still not known me forcing pie chart sizes causes not render. removing css solved rendering problem.


Comments

Popular posts from this blog

php - How to add and update images or image url in Volusion using Volusion API -

javascript - IE9 error '$'is not defined -