Highcharts Y Axis overlay while re-rendering with React

Question

I've put together a sample for my case, using spline chart with scrollablePlotArea option defined. When page finished loading the first time, the Y Axis is correctly rendered, but due to some re-rendering from the parent component, the Y Axis will be overlapped by the plot area.

Inspecting this behavior, I've figured out that the first time the page load, the Y values are rendered in highcharts-fixed div, but any event makes this chart re-render, the Y Values will be rendered in highcharts-scrolling, I think this is the root cause for this issue.

Sample link: https://codesandbox.io/s/highcharts-react-demo-wm6g6

Any ideas for the workaround for this would be appreciated,

Thanks in advance,

Answer 1

That problem is a Highcharts bug, reprted here: https://github.com/highcharts/highcharts/issues/8862

Reproduced issue: http://jsfiddle.net/BlackLabel/96v4q8nk/

As a workaround you can use the code from the github thread, but also setting immutable to true or allowChartUpdate to false should resolve the issue.

<HighchartsReact
    ...
    immutable = { true }
/>

Docs: https://github.com/highcharts/highcharts-react#options-details