Bug: Dumbbell not load properly with providePartialHighcharts

[EmanuelUmbelino]

Describe the bug

When using dumbbell chart using providePartialHighcharts, sometimes I receive this error:

ERROR TypeError: Class extends value undefined is not a constructor or null
at dumbbell.js:9:2600

Demo

https://stackblitz.com/edit/bv2ywvl8?file=src%2Fapp%2Fhighcharts-options.ts

Setup used

• highcharts version - 12.3.0
• highcharts-angular - 5.1.0
• Angular - 20.2.0
• Typescript - 5.8.0

[KacperMadej]

Hi @EmanuelUmbelino

Could you elaborate on the "sometimes" part?

For dumbbell to work highcharts-more needs to be loaded too.

  providers: [
    providePartialHighcharts({
      modules: () => {
        return [
          import('highcharts/esm/highcharts-more'),
          import('highcharts/esm/modules/dumbbell')
        ];
      },
    }),
  ],

[EmanuelUmbelino]

Thanks for the suggestion. I've updated the demo providers as you recommended. In my private project, where I first encountered this bug, I was already importing highcharts-more.

To elaborate on the "sometimes" part: the error is intermittent. Sometimes the chart loads and works perfectly, and other times it fails with that error, without any changes to the code. I suspect it might be related to the loading order of the modules.

[KacperMadej]

This might be similar or the same as #415
It seems like the load order is not respected, but it seem that it could be forced with:

  providers: [
    providePartialHighcharts({
      modules: () => {
        return [
          import('highcharts/esm/highcharts-more').then(() => import('highcharts/esm/modules/dumbbell'))
        ];
      },
    }),
  ],

[EmanuelUmbelino]

I'm facing another potential bug. The symbol: 'flag' option for my data points doesn't seem to be working; it's just showing the default circle marker instead.

Do I create another bug?

[KacperMadej]

@EmanuelUmbelino
flag doesn't seem to be a valid option for maker.symbol. Could you point me to the bad docs that we should fix to avoid this confusion in the future? You could load Highcharts Stock to load flag symbol, but it will look almost like a square for the dumbbell marker (or lowMarker).

If you are not sure if what you see is a bug please contact technical support to confirm before reporting on GitHub.
https://www.highcharts.com/support/

[EmanuelUmbelino]

@KacperMadej, thank you for looking into this. I believe there might be a misunderstanding regarding symbol: 'flag'.

I am not using 'flag' as a pre-defined symbol. Instead, I am defining a new, custom symbol named 'flag' by providing an SVG path, exactly as demonstrated in the official documentation for custom markers here:
https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/plotoptions/series-marker-symbol/

The issue I'm reporting is that this documented method for adding custom symbols is not being respected by the dumbbell series, which leads me to believe it is a bug.

[KacperMadej]

Thank you for explanation. Highcharts Angular integration is by default loading Highcharts instance internally using highcharts/esm/highcharts, so you need to use: import Highcharts from 'highcharts/esm/highcharts'; instead of import * as Highcharts from 'highcharts'; and your code will work.