title: Dynamically update Highcharts chart in react
body: <p>I am using highcharts-react-official in react-redux to create a drilldown chart.</p>
  
  <p>However when I click on a bar to drilldown, I also update some props which causes the component to re-render - which seems to prevent the drilldown event.</p>
  
  <p>I kind of gathered from <a href="https://stackoverflow.com/questions/46805086/change-series-data-dynamically-in-react-highcharts-without-re-render-of-the-char">Change series data dynamically in react-highcharts without re-render of the chart</a> that I should use shouldComponentUpdate and getChart() to prevent re-render and instead dynamically update the data.</p>
  
  <p>My issue is that getChart() doesn't seem to work for the official highcharts react package. I'm getting Uncaught TypeError: this.refs.chart.getChart is not a function</p>
  
  <p>Is there an alternative I'm meant to be using to get and dynamically update the chart? Or some examples that I could look at?</p>
  
  <p>Just including render and shouldComponentUpdate parts here:</p>
  
  <pre><code>shouldComponentUpdate(nextProps, nextState) {
      let chart = this.refs.chart.getChart();
      //dynamically update data using nextProps
      return false;
  }
  
  render () {
  
      const options = {
          chart: {
              type: 'column',
              height: 300,
              events: {
                  drillup: (e) =&gt; {this.drilledUp(e)}
              }
          },
          plotOptions: {
              series: {
                  events:{
                        click: (e) =&gt; {this.categoryClicked(e)}
                  }
              }
          },
          xAxis: {type: "category"},
          yAxis: {title: {text: 'Amount Spent ($)'}},
          series: [{
              name: 'weekly spending',
              showInLegend: false,
              data: this.props.transactionChartData.series_data,
              cursor: 'pointer',
              events: {
                  click: (e)=&gt; {this.weekSelected(e)}
              }
          }],
          drilldown: {
              series: this.props.transactionChartData.drilldown_data
  
          }
      };
      return (
          &lt;HighchartsReact
          highcharts={Highcharts}
          options={options}
          ref="chart"
          /&gt;
      )
  }
  </code></pre>