angular-highcharts import to Angular7 - StockChart not displaying in browser

[zoezydk]

I am stuck with a similar problem that three different users already reported here, but didn't seem to receive any viable solution for.

I am running Angular 7.0.3, intending to use angular-highcharts' "StockChart" feature and have followed the instructions in the documentation for use of StockChart down to the last detail found here...

https://www.npmjs.com/package/angular-highcharts#highstock

...with the exception of the following code...

@Component({
  template: `
    <div [chart]="stockChart"></div>
  `
})

...which I cannot seem to integrate (I believe this particular syntax is not for Angular 7 but for a previous version. Do tell if that is misunderstood, please!).

This suspicion of mine is further reinforced when looking at the "Demo" link of the documentation here...

https://stackblitz.com/edit/angular-highcharts-stock

...which doesn't make use of this part either (I assume, that the documentation hasn't been updated after the latest upgrade).

Based upon the latter, I created my own stackblitz StockChart...

https://stackblitz.com/edit/angular-highcharts-stock-szy38x

...that actually does work. However, when implementing this solution on my local machine, I am able to compile without issues (after initially having worked around a lot of snags similar to the ones posted in this forum) but despite that fact, the chart doesn't display in index.html.

I am using the following setup...

...and suspect that the issue most likely is related to problems with the import of StockChart. Possibly due to angular-highcharts not being compatible with my present Angular version (this seems odd since the requirements here --> https://www.npmjs.com/package/angular-highcharts#requirements are clearly stating that the package is suited for "angular": ">=7.0.0" which therefore shouldn't result in any problems). The other requirement for highcharts is also met -->

I am at a dead end since everything seems to work just fine in the stackblitz example, although the exact local version does not, all while there aren't any compiler errors thrown by VS Code.

If any of the responsible developers could shed some light on this (or anybody else for that sake), I'd appreciate that greatly. Thanks.

[cebor]

So let me summarize code is working on stackblitz but not on a local setup?

[zoezydk]

@cebor Hi and thanks for the swift response.

Yes, you understood that correctly. Stackblitz works with the example in the link but doesn't display the chart itself in the browser on the local machine.

[zoezydk]

So let me summarize code is working on stackblitz but not on a local setup?

@cebor Hello again, cebor! Ending up in the aforementioned dead end, I wanted to hear if you already found a solution to the problem or know what is causing it? I am unable to proceed with my project so far and am just waiting for clarification on whether or not this can be achieved.

Also, another user just posted about the same issue in this thread...

https://github.com/cebor/angular-highcharts/issues/164#issuecomment-437637499

...indicating, that this is a bigger, general problem.

Thanks and looking forward to your reply.

[cebor]

@zoezydk the issue is not reproducible by me. I tested StockChart and MapChart on a local machine with the latest angular-cli, works in dev and prod mode. Charts rendering correctly.

[zoezydk]

@zoezydk the issue is not reproducible by me. I tested StockChart and MapChart on a local machine with the latest angular-cli, works in dev and prod mode. Charts rendering correctly.

@cebor Thanks for getting back. I am at a loss then as to what is causing the issue for me or the other users that reported similar issues.

Could you do me a favor and list your configuration (for the same topics which I listed in my initial post) and the code you are using from your local machine here, so it is possible for me to compare the two and find possible errors?

Also, I am still interested in finding an answer to this previously mentioned question...

...with the exception of the following code... @Component({ template: <div [chart]="stockChart">

[cebor]

I'm on macos 10.14 with angular-cli v7.0.5.

Is it possible for you to push your code to a public repository, then i can test it on my machine.

[zoezydk]

@cebor I am looking into it but I'm off work for today, so I can first do so sometime tomorrow.

A quick question though..., you cannot use the link to the stackblitz I posted earlier? The code is basically the same.

Just wondering...

[cebor]

@zoezydk i downloaded the code directly from stackblitz, its working fine.

[zoezydk]

@cebor I don't assume that the code is any different, but here you go...

https://github.com/zoezydk/angular7_stockchart

Also still wondering about the question in regards to the code i couldn't implement that I mentioned in my last post.

On a side note..., you said that you used a Mac. I am on Windows. Does this make a difference in this context?

[cebor]

@zoezydk you had some issues in your app.module.ts. I created a PR.

About your second question: You can name a variable any way you want. This is a directive not a component. And its absolutly angular 7 style =)

Directive: https://angular.io/guide/attribute-directives

[zoezydk]

@cebor Outstanding! It works... 👍

Thanks so much! =)

So do I understand this right? The only change that had to be done to the project was removing the StockChart reference everywhere in app.module.ts and instead adding ChartModule to the same?

Seems, I mixed up the references from your documentation here...

https://www.npmjs.com/package/angular-highcharts#example

...and added the import options intended for (your) chart.component.ts to app.module.ts by mistake.

Is that correctly understood?

Also, just to make sure, in this line...

import { ChartModule, StockChart, HIGHCHARTS_MODULES } from 'angular-highcharts';

...StockChart is not read. Maybe, you overlooked that? I reckon this reference can also be safely removed.

And finally, I am still seeing these two references in the documentation for app.module.ts which I don't have nor use at the moment, all while the chart still displays.

import * as more from 'highcharts/highcharts-more.src'; import * as exporting from 'highcharts/modules/exporting.src';

What purpose do they serve? And why are they not required in my current setup?

In reference to your comment about the directive..., I am not using that particular directive, but instead of get things working with stock: StockChart; plus, that I am placing a div with a similar reference as your directive in app.component.html.

I am new to Angular so maybe you can shed some light on what the differences/advantages of using one practice over the other are?

Thanks again for you kind and swift help!

[zoezydk]

@cebor Did you have any information on the above?

[cebor]

Jepp, you can remove all unused imports.

more and exporting are extra modules for highcharts.

https://www.highcharts.com/docs/export-module/export-module-overview

[zoezydk]

Roger that.

And to your last input, these two are optional I assume. Exporting is for download as PDF, SVG etc., whereas more is for newly added chart-types and features. Correct?

[cebor]

correct

[zoezydk]

@cebor Superb. 👍

I'd like to express my utmost gratitude for your kind help and hereby say, thank you very much.

Top of the day to you, sir. 🥇