Question: using static methods of Highcharts using angular/cli

[ASK83]

Hi @Bigous,
First of all thanks for the great work on updating the documentations and releasing the new version compatible with ng 4.
Here is my situation:

I just updated my app to use angular/cli. Thanks to your wiki for the most parts it was a smooth process. I have a script which successfully imports all those needed libraries:

"scripts": [ "../node_modules/highcharts/highcharts.js", "../node_modules/highcharts/highcharts-more.js", "../node_modules/highcharts/modules/exporting.js" ],

This in itself works and creates the charts. However, I need to access the Highchart class itself to set some global options using static methods on the Highcharts. For example, setOptions or applying dateFormat for labeling. Previously, I was using webpack itself and per your recommendation I used
import * as Highcharts from 'highcharts'; window['Highcharts'] = Highcharts;
to attach the objet to the global window. That was working perfectly. But with my current setup with CLI addition of the above codes to attach the Highcharts will produce the following error:
Highcharts Error #16
Which is Highcharts already defined in the page.

I was wondering if there is good way to access the Highcharts object for its static methods inside my chart module to be able to set globalOptions.

Thanks for your help.

My Env:
Angular: 4.0.1,
ng2-highcharts: 1.0.0
highcharts: 4.2.5
@angular/cli: 1.0.0

[ASK83]

I solved my issue by referencing the global window, like window['Highcharts'] and setting the global option of Highcharts this way. But I am not closing my question to see if there is a better way to access the Highcharts class for its static methods.

Thanks

[Bigous]

Hi @ASK83 , sorry about the delay.

Yes, if you load the highcharts with the script, you cannot use the import statement, because the highcharts is already loaded, but the systemjs or webpack doesn't know about it.

The best way would be with the import and everything working like magic :) but, sadly, it doesn't works...

In theory, putting the script, and not using the import should work - but it doesn't because the script encapsulate the global definitions and does not sends it to the browser.

Because of this we use the trick to import and set the global variable ( window['Highcharts] = hc;` ).

I think the best solution is your solution for now... I'll keep it opened until I can figure out a better solution!

Tks

[ddanurwenda]

Hi @ASK83 ,

I have removed the highcharts line from the .angular-cli.json and also put import + set global variable. The code compiles but still I get hc error 16. Can you please provide the snippet of a working example?

Thank you,

[ASK83]

Hi @Danurwenda,

I think you still need to have highcharts in the script section of your ...cli.json file.
"scripts": [ "../node_modules/highcharts/highcharts.js", "../node_modules/highcharts/modules/exporting.js" ]
But to be able to set static members of highcharts you just need to access the Highcharts object from window and set either global options or access static methods, as follows:

` window['Highcharts'].setOptions(this.globalOptions);

window['Highcharts'].dateFormat('%b %e, %Y', this.value)
`

Hope this helps!

[ddanurwenda]

Hi @ASK83 , thank you for your swift reply.

I want to imitate the charts as in https://www.highcharts.com/demo/arearange-line, which includes calls to static method getOptions().

I have tried 2 approaches, each gives me different hc error :

1. Import HC in component file (import * as Highcharts from 'highcharts';) and use Highcharts.getOptions()... The code compiles but gives me error HC 16.

2. Remove the import statement and instead use window['Highcharts'] . This code compiles but gives me error HC 17.

Please advise.

[ASK83]

@Danurwenda I think you gotta go with the second method and access highcharts object through the window to make it work, except adding highcharts in scripts tag in cli.json you don't need to import anything just importing the Ng2HighchartsModule at your module should do it.

The only thing that I can think of is that you might not have the library for range plots in cli.json
I think adding below line to your cli.json would solve the problem:
"../node_modules/highcharts/highcharts-more.js",

Hope this solves your problem.