score:1

Accepted answer

things that you can improve:

  1. series are recalculated in every render. it is better to create them once in a constructor.

constructor(props) {
  super(props);

  const series = [];
  const seriesamount = 200;
  for (var i = 0; i < seriesamount; i++) {
    series.push({});
    series[i].data = [];
    for (var j = 0; j < 288; j++) {
      series[i].data.push(math.random());
    }
  }

  this.state = {
    ishidden: false,
    chartoptions: {
      series
    }
  };
}

  1. charts are updated before reflow because of changed state. set allowchartupdate to false, to prevent that.

<highchartsreact
  allowchartupdate={false}
  highcharts={highcharts}
  containerprops={{ style: { height: "300px" } }}
  options={this.state.chartoptions}
/>

live demo: https://codesandbox.io/s/exciting-rain-gkyjd?file=/src/index.js

docs: https://github.com/highcharts/highcharts-react#optimal-way-to-update


Related Query

More Query from same tag