Angular 9/8 Highcharts Example Tutorial

In this tutorial, i will show you how to use highcharts in angular 9/8 application. we learn from example of highcharts angular 9/8. we will create spline chart with angular 9/8 highcharts.

I will give you very simple example of how we can use highcharts with angular 9/8 application. we need to install highcharts and highcharts-angular npm package for creating chart using highcharts angular 9/8.

So, let’s see very simple step and get it very simple example here:

Step 1: Create New App

You can easily create your angular app using bellow command:

ng new myHighcharts

Step 2: Install Npm Packages

In this step, we will install highcharts and highcharts-angular npm package for creating chart using highcharts angular 8. so let’s run both command:

npm install highcharts --save

npm install highcharts-angular --save

Step 3: Import HighchartsChartComponent

Now, here we will import HighchartsChartComponent from highcharts-angular and then we add on declarations part. so let’s update app.module.ts file as like bellow:

src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HighchartsChartComponent } from 'highcharts-angular';
import { AppComponent } from './app.component';
@NgModule({
  declarations: [
    AppComponent,
    HighchartsChartComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 4: Use Highcharts

Here, we will update app.component.ts file here, in this file we will create data json array and pass to highcharts option variable.

You can also use services for getting dynamic data using api. you can see example here for creating services if you want: How to create new service in Angular 8?.

You can update as bellow app.component.ts file.

src/app/app.component.ts

import { Component } from '@angular/core';
import * as Highcharts from 'highcharts';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
    title = 'myHighchart';
    data = [{
            name: 'ItSolutionStuff.com',
            data: [500, 700, 555, 444, 777, 877, 944, 567, 666, 789, 456, 654]
         },{
            name: 'Nicesnippets.com',
            data: [677, 455, 677, 877, 455, 778, 888, 567, 785, 488, 567, 654]
         }];
    highcharts = Highcharts;
    chartOptions = {   
      chart: {
         type: "spline"
      },
      title: {
         text: "Monthly Site Visitor"
      },
      xAxis:{
         categories:["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
      },
      yAxis: {          
         title:{
            text:"Visitors"
         } 
      },
      series: this.data
    };
}

Step 5: Display Highcharts

Here, we will update html file as like bellow, so update it as like bellow:

src/app/app.component.html

<h1>Angular 8 Highcharts Example - ItSolutionStuff.com</h1>
<highcharts-chart
   [Highcharts] = "highcharts" 
   [options] = "chartOptions" 
   style = "width: 100%; height: 400px; display: block;">
</highcharts-chart>

Now you can run angular 8 app:

Run Angular App:

ng serve

I hope it can help you…