[Solved]-Change series data dynamically in react-highcharts without re-render of the chart-Highcharts

so, i have found a workaround. it is working perfectly. i am getting the chart by ref and then set a new data using setdata. this only updates the data rather than re-rendering the whole chart component. and i am using component lifecycle method shouldcomponentupdate to stop the re-rendering of the component. here is the related code:

class contributionriskgraph extends react.purecomponent {
  constructor() {
    super();

    this.state = {
      riskvalue: 8.161736
    };

    this.handlechange = this.handlechange.bind(this);
  }

  shouldcomponentupdate(nextprops, nextstate) {
    if(this.state.riskvalue !== nextstate.riskvalue) {
      return false;
    }
  }

  handlechange(value) {
    this.setstate({
      riskvalue: value
    });

    let riskvalue = this.state.riskvalue / 100;
    let chart = this.crg.getchart();
    chart.series[0].setdata(getgraphplotdata(riskvalue, 'lowerbound'), true);
    chart.series[1].setdata(getgraphplotdata(riskvalue, 'expectedvalue'), true);
    chart.series[2].setdata(getgraphplotdata(riskvalue, 'upperbound'), true);
  }

  render() {
    // other code
    return(
      <div>
        <reacthighcharts config={config} ref={a => this.crg = a} />
        <div style={{ display: 'flex', justifycontent: 'center', margintop: 30 }}>
          <rangeslider
            label="risk value"
            defaultvalue={8}
            min={1}
            max={62}
            handlechange={this.handlechange}
          />
        </div>
      </div>
    ) 
  }
}