Angular 9/8 Highcharts Example Tutorial

Angular 9/8 Highcharts Example Tutorial

In this post we will give you information about Angular 9/8 Highcharts Example Tutorial. Hear we will give you detail about Angular 9/8 Highcharts Example TutorialAnd how to use it also give you demo for it if it is necessary.

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

Also see:How to Add Bootstrap in Angular 8 | Install Bootstrap 4 in Angular 8

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:


import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { HighchartsChartComponent } from 'highcharts-angular';

import { AppComponent } from './app.component';


declarations: [




imports: [



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.


import { Component } from '@angular/core';

import * as Highcharts from 'highcharts';


selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']


export class AppComponent {

title = 'myHighchart';

data = [{

name: '',

data: [500, 700, 555, 444, 777, 877, 944, 567, 666, 789, 456, 654]


name: '',

data: [677, 455, 677, 877, 455, 778, 888, 567, 785, 488, 567, 654]


highcharts = Highcharts;

chartOptions = {

chart: {

type: "spline"


title: {

text: "Monthly Site Visitor"



categories:["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]


yAxis: {








Step 5: Display Highcharts

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


<h1>Angular 8 Highcharts Example -</h1>


[Highcharts] = "highcharts"

[options] = "chartOptions"

style = "width: 100%; height: 400px; display: block;">


Now you can run angular 8 app:

Run Angular App:

Also see:Angular 8 Image Upload with Preview

ng serve

I hope it can help you…

Hope this code and post will helped you for implement Angular 9/8 Highcharts Example Tutorial. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs

For More Info See :: laravel And github

Leave a Comment

Your email address will not be published. Required fields are marked *

9  +  1  =  

We're accepting well-written guest posts and this is a great opportunity to collaborate : Contact US