angular-highcharts | Highcharts directive for Angular | Chart library

@zerohouse/router-tab isn't compatible with angular 9, you have to install @cativo/router-tab to get it work.

In the demo below I recreated the official demo from the docs below. I have created a separate universal component for the chart and then in the App HTML part I have created the table and for each chart, I have provided the name and data. It's just a basic example to show you how it might be achieved.

The chart element in HTML:

You could create a simple component that will take a chart's data as it's Input and return standalone chart. Then you might use the *ngFor directive to generate that component for each element of your data.

Unfortunately, I am not familiar with the angular-highcharts, so I created the simple demo with highcharts-angular - the officially supported Angular wrapper.

Live demo: https://stackblitz.com/edit/highcharts-angular-sparkline-j3nujf?file=src%2Fapp%2Fapp.component.html

data:

The thread that you are referring to is related to the highcharts-angular not angular-highcharts (the difference is that the first one is the official wrapper, the second is a 3rd party product), so I am assuming that you are asking about the highcharts-angular way.

The error that you are getting is probably related to the typescript - your pattern option object was lacking a few required properties. To fix it you could add all of them, or if you are sure that they are not necessary, and the chart will work correctly without them cast the entire object to as unknown as Highcharts.PatternObject

It might not work because you named your import HighCharts and passed Highcharts to the highcharts-chart component. To fix the problem update your import name.

import * as HighCharts

When you build in prod mode, angular tries to extract licenses from the 3rd party libs that you use into a 3rdpartylicenses.txt file. For that, it needs looking at package.json files.

Since you put your handontable package manually in your node_modules, it's missing package.json.

What you should really do is install handontable with npm (specify the version if needed)

I prepared a demo which shows how to implement an India map in Angular environment.

Demo: https://stackblitz.com/edit/angular-highcharts-stock-sjcf9h?file=app/app.component.ts

Here is my reproduction of the demo which you have shared in the Angular environment.

Demo: https://codesandbox.io/s/angular-ldxch

Please notice that this example uses the Highstock, not Highcharts - scrollbar is not implemented in Highcharts.

Highcharts use the scrollablePlotArea instead: https://api.highcharts.com/highcharts/chart.scrollablePlotArea