highcharts-angular | Highcharts official wrapper for Angular | Chart library

I do have only a problem in the app.component.html. I have successfully imported/install all necessary library in my workstation. Below are the codes I am practicing. My current IDE is VS code. But this problem occurs:

Can't bind to 'Highcharts' since it isn't a known property of 'highcharts-chart'. 1. If 'highcharts-chart' is an Angular component and it has 'Highcharts' input, then verify that it is part of this module. 2. If 'highcharts-chart' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. 3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.ngtsc(-998002) app.component.ts(5, 50): Error occurs in the template of component AppComponent.

app.module.ts

I have a pipeline that does an npm install followed by angular build and recently I added a caching task to relieve installation which was working splendidly until the developer added a new private dependency of "runtime-config-loader": "^3.0.0".

This may require npm re-install again, however, for some reason the caching task doesn't think it requires a re-install, and so it skips over the npm install and then fails at the angular build, most likely because npm did not re-install on the agent.

I disabled the caching task and removed the custom condition eq(variables['CACHE_RESTORED'],False) from the npm install task, and the build is succeeding just fine.

Why is the cache not recognizing the need to re-install dependencies again? and how do I delete the cache so that npm installs again? As a reminder, when I disable the cache task and npm re-installs again on the agent, the build succeeds - so this is certainly a caching problem.

Here is the build YAML:

Here is the Stackblitz Demo of the issue

Preview link (for better visibility): https://highcharts-angular-stock-a1hvg5.stackblitz.io/

Issue is : The last plot that is visible on the right most edge of the chart is of 12/27/2021

This is wrong as the the series data is available till 12/30/2021 and that should be visible on the right most edge instead of 12/27/2021. It however works when we zoom in slider to 1 year period

How can I make the original chart also display data till 12/30/2021 (series maximum)?

When we are trying to update our Angular 9 application(Single SPA micro frontend) to Angular 12 we are facing bellow issue.

Error on console when trying to run this app:

This is a question for anyone with HighchartsJS experience

I’m currently having an issue displaying state data using the Highcharts X-range series charts. Specifically, My problem is that our data that we are using to represent each individual state are both fairly high and non consecutive (768, 769 and 773). To label these individual states I’m using a sparse array and placing my labels at the corresponding indices.

The problem I am trying to solve which is depicted by this jsfiddle: https://jsfiddle.net/sn4d2hvq/10/

How to add click event on Y-axis label in Gantt chart. It's working fine in javascript but not in angular. In angular giving following error "Type '{ events: { click: () => void; }; }' is not assignable to type 'YAxisLabelsOptions'. Object literal may only specify known properties, and 'events' does not exist in type 'YAxisLabelsOptions'". Using 9.3.x version of the highcharts lib. enter image description here

https://stackblitz.com/edit/highcharts-angular-gantt-jxcjsz?file=src%2Fapp%2Fapp.component.ts

Error Image

package.json

I can reproduce the problem in a very simple Angular-Hicharts application. When I retrieve the data from the server, and then leave the page with Highcharts chart, I am getting this error:

Cannot read property 'forExport' of undefined at a.destroy (highcharts.js:394) at HighchartsChartComponent.ngOnDestroy (highcharts-angular.js:44)

Not surprisingly, HighchartsChartComponent.ngOnDestroy is

I am not able to call a function in ploatOption-> series > animation -> complete

Sample code is here https://stackblitz.com/edit/highcharts-angular-basic-variwide-faharz-ubhknv?file=src%2Fapp%2Fapp.component.ts