How to Update chart in react-chartjs-2?
So according to https://www.npmjs.com/package/react-chartjs-2
One can access the chart reference using a ref such as
chartReference = {};
componentDidMount() {
console.log(this.chartReference); // returns a Chart.js instance reference
}
render() {
return (<Doughnut ref={(reference) => this.chartReference = reference } data={data} />)
}
So what you could do is put a ref in your Chart and access it wherever you like.
<Line
data={this.state}
height={5}
width={20}
ref = {(reference) => this.reference = reference}
/>
In the method you wish to cause the update you could access this reference and it's chartInstance and call the update function on this instance.
let lineChart = this.reference.chartInstance
lineChart.update();
You need to update the chart, line is just a config setting on the chart, this update needs to flow back to the handler
To set you on the right path, here is an example of what I mean
var config = {};
class Chart extends Component {
constructor() {
super();
this.ctx = document.getElementById(this._rootNodeID).getContext("2d");
this.chart = new Chart(ctx, config);
}
changeHandler(value) {
this.chart.update();
}
render() {
return (
<canvas id={this._rootNodeID}>
<LineChart value={this.state.value}
config={this.config}
onChange={this.changeHandler}/>
</canvas>
);
}
}
const line = {
labels: [],
datasets: [
{
label: 'My First dataset',
fill: false,
data: []
}
]
};
class LineChart extends Component {
constructor(props) {
super(props);
this.props.config = line;
setInterval(function(){
this.props.config.labels.push(Math.floor(Math.random() * 100));
this.props.config.datasets[0].data.push(Math.floor(Math.random() * 100));
this.props.changeHandler();
}, 5000);
}
render() {
return (
<div className="chart">
<Line
data={this.state}
height={5}
width={20}
/>
</div>
)
}
}
export default Chart;
export default LineChart;