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!

I have the same problem but it disappears even if I don’t want to update the data just because some other DOM component changes within the same page — SkyWalker, Jun 15 '23 at 18:55

score 1 · Accepted Answer · answered Sep 28 '18 at 02:52

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}]);
}
}

This doesn’t work, AnyChart will complain about the missing container Id — SkyWalker, Jun 15 '23 at 18:56

AnyChart-react plot disappears on second render

1 Answers1