Highcharts yAxis options not updating via state in React

Question

I'm not sure if I'm doing things incorrectly but I noticed an issue recently where some updates being made to the yAxis options (specifically max/softMax) via React state weren't causing the chart to re-render properly.

Here's a minimal reproduction case: 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.

Maybe this is some specific edge-case with min/max and softMin/softMax because all other updates to the yAxis options object have caused re-renders correctly.

Answer 1

It looks like everything works just fine! The confusion arises because the max option remains set to 2, making it seem like softMax stopped working.

To resolve this issue, remember to set yAxis.max to undefined when updating.softMax. Demo: https://codesandbox.io/p/sandbox/highcharts-react-demo-forked-33s3v4?file=%2Fdemo.jsx%3A34%2C1-41%2C11

const yAxisOptions = useSoftMax
  ? {
      softMax: 2,
      max: undefined,
    }
  : {
      max: 2,
};