1

In a React Redux app I have a large array containing time series data (about 10k data points). The data is supplied by the redux store. The app uses highcharts-react-official 2.x.x. The large array is frequently updated by appending new data points (append-only, existing array element are immutable).

Because of these updates it seems the chart is every time fully rendered. How can I avoid this?

const options = {
  series: [
    {
      type: 'line',
      data: objectFromReduxStore.map(p => ([p.time.toMillis(), p.value])),
    }
  ]
}
...

<HighchartsReact
  highcharts={Highcharts}
  options={options}
  containerProps={{style: {height: '300px', width: '100%'}}}
/>
Sebastian
  • 16,813
  • 4
  • 49
  • 56

1 Answers1

3

The highcharts-react-official wrapper uses chart.update(options) method to apply changes. In your case a more efficient solution is to get the chart reference and directly call addPoint method on a series.

constructor(props) {
  super(props);
  this.afterChartCreated = this.afterChartCreated.bind(this);
}

afterChartCreated(chart) {
  this.internalChart = chart;
}

componentDidMount() {
  setInterval(() => {
    this.internalChart.series[0].addPoint(Math.random() * 5);
  }, 1500);
}

render() {
  return (
    <HighchartsReact
      highcharts={Highcharts}
      options={options}
      callback={this.afterChartCreated}
    />
  );
}

Live demo: https://codesandbox.io/s/highcharts-react-demo-gp6n6?file=/demo.jsx

API Reference: https://api.highcharts.com/class-reference/Highcharts.Series#addPoint

ppotaczek
  • 36,341
  • 2
  • 14
  • 24
  • Thanks for your answer! It seems in version 2.1.1 there is no property `callback` (typescript gives a compilation error). Was this added later on? – Sebastian May 04 '20 at 14:09
  • Hi @Sebastian, It is probably only some problem with typescript, please check some newer versions. As an alternative, you can get the reference in a different way: https://github.com/highcharts/highcharts-react#how-to-get-a-chart-instance – ppotaczek May 04 '20 at 14:22