how to load completely new data and new charttype on a react highchart about highcharts-react

[ppotaczek]

Hi @rohankk2,

After setState, the highcharts-react wrapper uses chart.update() to update chart options, which are merged, not overwritten.

API: https://api.highcharts.com/class-reference/Highcharts.Chart#update

In your case the best way to achieve the wanted result is to create two HighchartsReact components and display them alternately depending on some condition.

  render() {
    return (
      <div>
        {this.state.displayedChart === 1 && (
          <HighchartsReact
            highcharts={Highcharts}
            constructorType={"chart"}
            options={this.state.options}
          />
        )}
        {this.state.displayedChart === 2 && (
          <HighchartsReact
            highcharts={Highcharts}
            constructorType={"chart"}
            options={this.state.options}
          />
        )}
      </div>
    );
  }

Live demo: https://codesandbox.io/s/xp63rx42y4

We are trying to keep github only for bugs, so for future please ask this type of questions on support: https://www.highcharts.com/support