Getting Started with Angular Highcharts

This article will help you use the official Highcharts wrapper for Angular, to create interactive charts for your web projects.

Sample chart that our code will generate

Performing the Setup

1. Install the below dependencies -

• highcharts
• highcharts-angular

npm install --save highcharts highcharts-angular

2. Import the dependency in your module

import { HighchartsChartModule } from 'highcharts-angular';
@NgModule({
declarations: [
AppComponent,
ChartWrapperComponent
],
imports: [
BrowserModule,
HighchartsChartModule
],
providers: [],
bootstrap: [AppComponent]
})

3. Create a wrapper component

create a wrapper component to configure various chart options. Example below -

• import everything from ‘highcharts’ (refer syntax below)
• In chart options add the type of chart you want and other necessary meta-data

chart-wrapper.component.ts

Chart Options

For getting sample chart-options and more information on variations etc. refer below link

highcharts-angular

In HTML make use of <highcharts-chart>

chart-wrapper.component.html
<highcharts-chart
[Highcharts]="Highcharts"
[options]="chartOptions"
style="width: 100%; height: 400px; display: block;"
></highcharts-chart>

You can now run your application and you should be able to view a chart based on the options you provided. This is a licensed product so make sure to check the official docs (link below) when using in production.

Homepage | Blog frontpage | Highcharts