Dynamically Import Highcharts

[Robinyo]

Requested feature description

Take advantage of ECMAScript's support for dynamic import() in order to load Highcharts dynamically at runtime.

As we're using Angular and the Angular CLI uses webpack, we can rely on webpack to replace calls to import() with its own dynamic loading function.

See: Dynamically Importing Highcharts

[KacperMadej]

Hi @Robinyo

Thank you for suggesting the enhancement.

What will be required for the new feature to work? I imagine that a type-less version of the component could do the trick, but maybe there are other requirements? The import of Highcharts in the wrapper component is purely for TS definitions, so without them the import could be removed.

BTW: Nice article!

[Robinyo]

Hi @KacperMadej,

-> What will be required for the new feature to work?

tsconfig.json:

"module": "esnext"

-> I imagine that a type-less version of the component could do the trick?

Yes, that's what I tried and its working for me.

At the start of the file you will notice the following import statement:

import * as Highcharts from 'highcharts';

However, as the HighchartsChartComponent accepts Highcharts as an @Input() I commented out this line and I updated all references to Highcharts types to <any>.

-> The import of Highcharts in the wrapper component is purely for TS definitions, so without them the import could be removed.

Yes.

-> BTW: Nice article!

Thanks :)

Cheers Rob

[kumar-tadepalli]

Any update on ETA?

[KacperMadej]

Please vote up with your reaction ( 👍 ) on the opening comment of this issue thread to let us know how much the feature is requested. As far as I can tell right now, it looks like the changes would require creating another wrapper that will be a type-less version (when it comes to the Highcharts properties) to keep the code clean and clear.

[stevethemacguy]

@Robinyo, Does this remove the ability to use HighCharts' types? For example, would it still be possible to specify types when creating a chart?

legend: {
  enabled: false
} as LegendOptions,
title: {
  text: 'hello',
} as TitleOptions
...

[jdelaune]

+1

[alexmuch]

Any updates on this feature? It would be great if we could dynamically load natively. In OP's example it looks like to use this in a component, you have to make a separate component that acts as an override for highcharts-angular. It would be stellar if we didn't have to make this go-between.

[mateuszkornecki]

@alexmuch I can see more and more people voting for adding this functionality, and I can agree that it might be a pretty neat feature. However, we need to keep all available highcharts wrappers(highcharts-react-official, highcharts-vue...) consistent. I will consult all possibilities with my colleagues responsible for other wrappers and post an update if anything changes regarding this feature.

[kumar-tadepalli]

Any update on this feature?

[mateuszkornecki]

Unfortunately for now the solution posted by Robinyo is the only solution. https://github.com/highcharts/highcharts-angular/issues/163#issue-497372364

[BregtDeLange]

Any updates on this one?