TypeError: this.options.navigator is undefined

[sawmurai]

We are using version 10.3.3. The following problem occures when we do the following order of operations:

1. Create a map chart
2. Load the stocks plugin
3. Update the data of the map chart

Expected behaviour

No error

Actual behaviour

TypeError: this.options.navigator is undefined

Live demo with steps to reproduce

Here is a stackblitz: https://stackblitz.com/edit/vitejs-vite-gmbjjg?file=main.js

Note: Adding the stock plugin after initializing the chart seems to cause the problem. We do not do this on purpose. It is just what ends up happening in our application life-cycle as highcharts is used in webcomponents we provide, and they can be loaded in arbitrary order.

I digged through the code and was able to find some things:

options.navigator is defined as potentially undefined: https://github.com/highcharts/highcharts/blob/master/ts/Stock/Navigator/NavigatorOptions.d.ts#L46 This is not taken into account here (where the error is thrown both in our version and in the latest version): https://github.com/highcharts/highcharts/blob/master/ts/Stock/Navigator/NavigatorComposition.ts#L236

If a check is added for the presence of the navigator object the error is gone. We also have a workaround where we just provide an empty navigator options object.

Product version

Highcharts with stock plugin

Affected browser(s)

All

Edit: Added a reproduction

[karolkolodziej]

Hi @sawmurai!

As you described, loading the stock after creating the chart is problematic- demo. I presume you might have other charts on the site other than the map, that is the reason why you load the stock module right? Can you please explain why you end up with the stock being loaded after the chart?

[sawmurai]

I presume you might have other charts on the site other than the map, that is the reason why you load the stock module right?

Yep exactly. The reason this ends up happening is that we are providing a vue component library that has components which display charts. For example a world map and a line chart (using the stock plugin).

Due to the lifecycle of vue components, it is possible that a component requiring the stock plugin is only initialized after the world map is already displayed. This happens for example if the user triggers an action - like clicking a button - that causes the component displaying the line chart to render.

Our users can mix and match our components, so we cannot know upfront which highchart charts plugins are needed, as we cannot know which charts are displayed (if any).

[karolkolodziej]

Hmm, I actually might be more about the default options that the mapChart is initialized.

If you disable the navigator and scrollbar it works as expected- demo. Please let me know if this is a valid workaround for you.

[sawmurai]

Yes, that prevents the error from occuring. Thank you!

Should we consider this a permanent workaround given the way we use Highcharts or will there be a code change that might make it unnecessary?

[karolkolodziej]

We can leave this issue open if anyone has the same issue as you but for now, let's not treat this as a bug. Please use the workaround if this works for you and let's wait for feedback from other users before we make any code changes.