Highchart in angular by himalaya

How to use High Chart in Angular 12+ projects.

Step-1: Install high chart node modules from npm

npm install highcharts-angular — save
npm install highcharts — save

Step-2: put the code in the app.module.ts

import { HighchartsChartModule } from ‘highcharts-angular’;
@NgModule({imports: [HighchartsChartModule]})

Step-3: put the code in the component.html

<highcharts-chart [Highcharts]=”Highcharts” [options]=”chartOptions” [(update)]=”updateFlag” [oneToOne]=”true” style=”width: 100%; height: 130px; display: block;”></highcharts-chart>

Step-4: put the code in the component.ts

import * as Highcharts from ‘highcharts’;
Highcharts: typeof Highcharts = Highcharts;
chartOptions: any;
updateFlag = false;
ngOnInit(): void {
this.chartOptions = {/*high chart code goes here…*/};
this.updateFlag = true;
}

Thank You!!! Enjoy your chart.