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

c# SetCompatibleTextRenderingDefault must be called before the first -

How to prevent logback from emitting repeated "Empty watch file list. Disabling" messages -

C#.NET Oracle.ManagedDataAccess ConfigSchema.xsd -