CODEWITHSUNDEEP
reactjsreduxhighchartsreact-highcharts
Sebastian
Sebastian

Reputation: 17423

Highcharts update large array

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%'}}}
/>

Upvotes: 1

Views: 370

Answers (1)

ppotaczek
ppotaczek

Reputation: 39079

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

Upvotes: 3

Related Questions