CODEWITHSUNDEEP
reactjshighcharts
ashb
ashb

Reputation: 33

How to update Highchart from inside react a component?

I am working with react 16.3 where componentWillUpdate is deprecated (strict mode). We have a react wrapper around Highcharts and used to update the highchart in componentWillUpdate that runs just before render.

But now in react 16.3 when the input highchartoptions prop updates, there seems to be no way to call Highchart.update before render() is called. Its suggested to use componentDidUpdate but its called only after render() and it doesn't seem to work at all.Any suggestions will help.

Code snippet here:

export class HighchartReactWrapper extends React.Component {
  constructor(props) {
    super(props);

    // We maintain the user provided options being used by highchart as state
    // inorder to check if chart update is needed.
    this.state = { highChartOptions: this.props.options };
    this.onChartRendered = this.onChartRendered.bind(this);
  }

  componentDidMount() {
    // Create chart
    this.chart = new Highcharts.Chart(this.container, this.state.highChartOptions, this.onChartRendered);
  }

  static getDerivedStateFromProps(nextProps, prevState) {
    if (nextProps.options !== prevState.options) {
      return { highChartOptions: nextProps.options };
    }
  }

  componentDidUpdate() {
    this.chart.update(this.state.highChartOptions, false, true); <---- Doesn't work
  }

  onChartRendered() {
    // Callbacks..
    if (this.props.onChartRenderedCallback !== undefined) {
      this.props.onChartRenderedCallback();
    }
  }

  componentWillUnmount() {
    // Destroy chart
    this.chart.destroy()
  }

  render() {
    return (
      <div className="react-highchart-wrapper">
        <div id={container => this.container = container} />
      </div>
    );
  }
}

HighchartReactWrapper.propTypes = {
  /**
   * Chart options to be used in Highcharts library.
   */
  options: PropTypes.object.isRequired,
  onChartRenderedCallback: PropTypes.func
};

HighchartReactWrapper.defaultProps = {
  options: undefined,
  onChartRenderedCallback: undefined
};

Upvotes: 3

Views: 1111

Answers (1)

Rohith Murali
Rohith Murali

Reputation: 5669

You may use shouldComponentUpdate(nextProps, nextState) which is called before the component rerender.

Upvotes: 1

Related Questions