highcharts / highcharts

Highcharts JS, the JavaScript charting framework
https://www.highcharts.com
Other
12k stars 3.61k forks source link

Highcharts yAxis options not updating chart via state in React #21448

Closed trash closed 3 months ago

trash commented 3 months ago

Expected behaviour

Passing in updated yAxis[0].softMax via options to React wrapper Highcharts instance updates the chart.

Actual behaviour

It doesn't update.

Live demo with steps to reproduce

https://codesandbox.io/p/sandbox/highcharts-react-demo-forked-jhsmq4?file=%2Fdemo.jsx%3A30%2C4

  1. The example has a chart with points [1,2,3] and yAxis[0].softMax set to 2. Thus the graph shows all points.
  2. If you hit the toggle button that causes yAxis[0].max to be set to 2 and softMax is removed. The chart updates correctly with the max of the yAxis being set to 2 so the 3rd point is hidden.
  3. If you hit the toggle button again that causes the chart to go back to the state from step 1: softMax=2 is added and max=2 is removed. Yet, the chart doesn't update. The max for the yAxis is still 2 and the third point remains hidden.

You can see the options are being updated by React but for whatever reason Highcharts doesn't re-render the y axis. I also tried calling .redraw() on the Highcharts instance and still no dice.

Product version

"highcharts": "11.2.0", "highcharts-react-official": "3.2.1",

Affected browser(s)

Chrome

hubertkozik commented 3 months ago

Hi @trash! After the second update of the chart you didn't see any changes, because you have to overwrite the old value, which is set on the chart, you can simply set softMax or max to void 0/undefined.

Live demo: https://codesandbox.io/p/sandbox/highcharts-react-demo-forked-3l4g9x?file=%2Fdemo.jsx%3A40%2C27