react-chartjs
react-chartjs copied to clipboard
Chart not rendering initially, only after chart updates
Anyone have any idea why my chart doesn't render initially, but if I update the component using the react-hot-loader (webpack), things redraw. This is my component:
I tried throwing on the "redraw" prop but it doesn't seem to help.
import React from "react";
import { Line } from "react-chartjs";
var chartOptions = {
bezierCurve : false,
datasetFill : false,
pointDotStrokeWidth: 4,
scaleShowVerticalLines: false,
responsive: true
};
var styles = {
"graphContainer" : {
"backgroundColor" : "#fff",
"height" : "235px",
"width" : "1150px",
"marginTop" : "15px",
"padding" : "20px"
}
};
export default class Histogram extends React.Component {
constructor(props) {
super(props);
this.state = {
chartData: {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
fillColor: "#25BDFF",
strokeColor: "#25BDFF",
pointColor: "#25BDFF",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "#25BDFF",
data: [28, 48, 40, 19, 86, 27, 90]
}
]
}
};
}
render() {
return (
<div>
<div style={styles.graphContainer}>
<Line data={this.state.chartData} options={chartOptions} width="1100" height="150" />
</div>
</div>
);
}
};