How to use Highcharts in Angular 12

Highcharts is Javascript library that provides variety of charts with customization. In this article, we will see how you can implement Highcharts in your Angular project.

For the simplicity of tutorial, We will create new Angular 9 application and implement Highcharts step by step. You can also implement in your existing Angular project. Follow the steps to implement Highcharts in your application.

Note: You should have already installed npm to install and manage Angular and packages. For Angular learning, you should have basic knowledge of HTML, Javascript and TypeScript.

So let's get started.

Step:1 Create Angular application

Obviously the step is to create a fresh Angular application. Open the Terminal or CMD and run the command.

If you have not installed Angular CLI, then install Angular CLI using npm command. 

sudo npm install -g @angular/cli

And create new application.

ng new chart

Chnge working directory to application's root directory and start Angular server.

cd my-app
ng serve --open

Step:2 Install Highchart package

In the second step, we will install Highcharts using npm.

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

Step:3 Import HighchartsChartComponent

Now we need to import HighchartsChartComponent componant to use in our Angular project. So add new line in imports option in file src/app/app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HighchartsChartModule } from 'highcharts-angular';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HighchartsChartModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step:4 Add Highcharts Javascript

In the app.component.ts file add HighChart required javascript code.

import { Component, Input } from '@angular/core';
import * as Highcharts from 'highcharts';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  highcharts = Highcharts;

  chartOptions: Highcharts.Options = {
    title: {
      text: "Average Temprature"
    },
    xAxis: {
      title: {
        text: 'Tokyo'
      },
      categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
        "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
    },
    yAxis: {
      title: {
        text: "Temprature"
      }
    },
    series: [{
      data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 24.4, 19.3, 16.0, 18.4, 17.9],
      type: 'spline'
    }]
  }
}

Step:5 Highchart view

In the step, we will edit Highchart view file. So edit app.component.html file and add code.

<h1>Angular Highcharts demo</h1>   
<highcharts-chart
   [Highcharts] = "highcharts" 
   [options] = "chartOptions">
</highcharts-chart>

Now run the Angular server with below command in Terminal.

ng serve

In your browser, open http://localhost:4200. The Highcharts data is rendered on the homepage.

Author : Harsukh Makwana