AnyChart-react plot disappears on second render

Question

I am trying to use anychart in my react app. The chart renders fine on startup, but disappears upon re-render. Here is the stripped down code for the chart class, which is currently the only thing that is being rendered in the app.

class TimeSeriesPlot extends Component {

 constructor(props) {
    super(props);
    this.chartInstance = anychart.scatter();
    this.chartInstance.xAxis().title('Time (s)');
    this.chartInstance.legend(true);
    this.chartInstance.line([{x: 1, value: 2}, {x: 2, value: 6}]);
 }

 render() {        
    console.log('rendering chart');
    return (
        <AnyChart instance={this.chartInstance} height={600} />
    );
 }
}

The re-render is being triggered by a timeout function in the app (which changes props through the redux store). What I am trying to do is create a real-time plot that re-renders every time the data is updated, but first I need to get the plot to stay live for more than one render.

Any help is appreciated!

Answer 1

If you want to update the chart with new data there's no need in creating and re-rendering the whole chart again. All you need is to update the series data like this:

class TimeSeriesPlot extends Component {

constructor(props) {
super(props);
this.chartInstance = anychart.scatter();
this.chartInstance.xAxis().title('Time (s)');
this.chartInstance.legend(true);
this.series = this.chartInstance.line([{x: 1, value: 2}, {x: 2, value: 6}]);
}

render() {        
console.log('rendering chart');
return (
    <AnyChart instance={this.chartInstance} height={600} />
);
}

updateData() {
this.series.data([{x: 1, value: 4}, {x: 2, value: 3}]);
}
}