react-highcharts

react-highcharts copied to clipboard

I have been at this for a while now and I'm stumped. I have a react component that is supposed to add a new series whenever it receives props, however chart.getChart().addSeries({ data: [1, 2, 3, 4] }) is not showing the new series in my chart. However, I also added a button to the component that onClick adds a new series, and that does work... Below is my code:

const config = {
  title: {
    text: 'Hello, World!'
  },
  xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
  },
  series: [{
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
  }]
}
@autobind class SampleChart extends Component {
  componentWillReceiveProps({ data }) {
    if(data.length > 0) {
      this.chart.getChart().addSeries({data: [39.9, 81.5, 116.4, 229.2, 124.0, 174.0, 235.6, 138.5, 116.4, 94.1, 195.6, 54.4]}, false)
      this.chart.getChart().redraw()
    }
  }

  addSeries() {
    this.chart.getChart().addSeries({data: [39.9, 81.5, 116.4, 229.2, 124.0, 174.0, 235.6, 138.5, 116.4, 94.1, 195.6, 54.4]}, false)
    this.chart.getChart().redraw()
  }

render() {
    return(
      <div>
        <ReactHighcharts ref={(ref) => this.chart = ref} config={config} />
        <button onClick={this.addSeries}>add series</button>
      </div>
    )
  }
}
export default SampleChart

Any thoughts on why this is happening?

Hello @aldo-sanchez !

1. Please create an example here https://stackblitz.com/
2. May be this.addSeries() <button onClick={this.addSeries}>add series</button> to this.addSeries()

The button is not the issue, the button works correctly, the issue is whenever I pass new props to my component add the series does not work. It seems to be calling the getChart().addSeries method correctly but it does not show the new series on the plot.

@aldo-sanchez Here is my example https://stackblitz.com/edit/react-fuwxzn?file=Hello.js

@ilyjs I figured it out! I I'll let you know the solution in a bit. Maybe this should be added to the docs.

@ilyjs Essentially what was wrong was componentsWillReceiveProps triggers a render, and I think this.chart.getChart().redraw() didn't have time to redraw past the render. So I added:

componentShouldUpdate() {
  return false
}

That makes it work! Since the component doesn't render and the chart just redraws. However, what made this whole ordeal super confusing was that if you setData() the chart will redraw and update even without the componentShouldUpdate().

Here you can see an example of how both of these cases react (setData() and addSeries()) when a componehtShouldUpdate() exists and when it doesn't.

I think both of these methods should work the same...