Chart with `navigator.xAxis.plotLines` and/or `navigator.xAxis.plotBands` shrinks on re-render while toggling on/off the navigator

[Pixselve]

Expected behaviour

The chart should not shrink on re-render, while toggling on/off the navigator (using the chart API).

Actual behaviour

When the following is set:

navigator: {
              xAxis: { plotLines: [], plotBands: [] },
            },

The chart shrinks every time the navigator is toggled on (re-renders between the toggling needs to happen).

2025-12-12_13-54-37.mp4

Live demo with steps to reproduce

https://stackblitz.com/edit/vitejs-vite-evbbd4hh?file=src%2FApp.tsx

Product version

• highcharts-react-official: 3.2.1 (also tested 4.1.0)

Affected browser(s)

Chrome

[K009]

Hi @Pixselve, thanks for bringing this up. This does look like a bug. In plain Highcharts (without React), the chart does change its size when toggling the navigator, but the behavior is consistent and not the same as what we see in your video.

You can check this demo here: https://jsfiddle.net/BlackLabel/jog2kfan/

We’ve logged this issue in our backlog and will review it as part of our ongoing prioritization process. Thanks for reporting it — if you have any additional context or findings, feel free to share them here.

[Pixselve]

Thanks for the quick response @K009

I was able to identify other problematic props under navigator:

       navigator: {
            xAxis: {
              labels: {
                formatter: () => "ANYTHING",
              },
            },
          },

          navigator: {
            series: [], // anything other than undefined
          },

These (along with plotLines and plotBands) make the chart shrink. For the chart to not shrink, we need to avoid ALL of these props

Demo: https://stackblitz.com/edit/vitejs-vite-evbbd4hh?file=src%2FApp.tsx