score:11

Accepted answer

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>
    ) 
  }
}

Related Query

More Query from same tag