How to implement HighCharts Angular .?

The HighCharts and D3js are the JavaScript library for data visualization. HighCharts Angular library is the official minimal Highcharts wrapper for Angular. We have a lot of other libraries’ options to add a chart in Angular. Where D3js is the most popular open-source.

In this tutorial, we’ll learn how to used highcharts library and highcharts-angular library in Angular 11. First, we’ll use only highCharts library to demonstrates charts like pie, line, and more. In the second example, we’ll use highCharts-angular library to demonstrate different charts.

What is Highcharts Angular library

Highcharts is a product that was created by the Norway-based company Highsoft and this library for charting is written in pure JavaScript. Highcharts is an SVG-based, multi-platform charting library that has been actively developed since 2009. It makes it easy to add interactive, mobile-optimized charts to your web and mobile projects. It features robust documentation, advanced responsiveness, and industry-leading accessibility support. Highcharts is used by large corporate like yahoo, Facebook, visa, and more. HighChart angular is from the official minimal Highcharts wrapper for Angular. We can use highcharts library in other frameworks like Vue and react also.

Example on highCharts in angular

We are demonstrating two charts example of highcharts. I have taken both chart information from highcharts official demo page and we are only using highCharts library only in the first example. The bar charts containing information about the world population. The pie a chart containing information on the browser market

Angular highCharts example
Angular highCharts charts example

Setting up project for Angular HighChart example

We need to create our angular project using angular CLI and need to install the Angular highCharts library.

ng new highChart
cd highChart
npm install highcharts --save

Implementing highChart example in our component

In our app.component.html template, we have two columns, each containing a different chart. One column content bar chart and another for the pie chart. For UI angular grid we have to use ng-bootstrap, which is optional is for demo purposes only.

<div class="container">
  <h3 class="mt-2">{{ title }}</h3>
  <div class="row">
    <div class="col-sm">
      <div id="barChart" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>
      <h5 class="card-title text-center">Bar Chart - Population</h5>
    </div>
    <div class="col-sm">
      <div id="pieChart" style="width:100%; height:400px;"></div>
      <h5 class="card-title text-center">Pie Chart - Browser market</h5>
    </div>
  </div>
</div>


We have added dummy data for both charts and we have two methods. One for drawing bar and another for a pie chart. Let’s edit the app.component.ts file to add our chart data and options.

import { Component, OnInit } from '@angular/core';
import * as HighCharts from 'highcharts';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  title = 'Angular 9 HighCharts';
  constructor() { }

  ngOnInit() {
    this.barChartPopulation();
    this.pieChartBrowser();
  }

  barChartPopulation() {
    HighCharts.chart('barChart', {
      chart: {
        type: 'bar'
      },
      title: {
        text: 'Historic World Population by Region'
      },
      xAxis: {
        categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
      },
      yAxis: {
        min: 0,
        title: {
          text: 'Population (millions)',
          align: 'high'
        },
      },
      tooltip: {
        valueSuffix: ' millions'
      },
      plotOptions: {
        bar: {
          dataLabels: {
            enabled: true
          }
        }
      },
      series: [{
        type: undefined,
        name: 'Year 1800',
        data: [107, 31, 635, 203, 2]
      }, {
        type: undefined,
        name: 'Year 1900',
        data: [133, 156, 947, 408, 6]
      }, {
        type: undefined,
        name: 'Year 2000',
        data: [814, 841, 3714, 727, 31]
      }, {
        type: undefined,
        name: 'Year 2016',
        data: [1216, 1001, 4436, 738, 40]
      }]
    });
  }

  pieChartBrowser() {
    HighCharts.chart('pieChart', {
      chart: {
        plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: false,
        type: 'pie'
      },
      title: {
        text: 'Browser market shares in October, 2019'
      },
      tooltip: {
        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
      },
      plotOptions: {
        pie: {
          allowPointSelect: true,
          cursor: 'pointer',
          dataLabels: {
            enabled: true,
            format: '<b>{point.name}</b>: {point.percentage:.1f} %'
          }
        }
      },
      series: [{
        name: 'Brands',
        colorByPoint: true,
        type: undefined,
        data: [{
          name: 'Chrome',
          y: 61.41,
          sliced: true,
          selected: true
        }, {
          name: 'Internet Explorer',
          y: 11.84
        }, {
          name: 'Firefox',
          y: 10.85
        }, {
          name: 'Edge',
          y: 4.67
        }, {
          name: 'Safari',
          y: 4.18
        }, {
          name: 'Sogou Explorer',
          y: 1.64
        }, {
          name: 'Opera',
          y: 1.6
        }, {
          name: 'QQ',
          y: 1.2
        }, {
          name: 'Other',
          y: 2.61
        }]
      }]
    });
  }
}

In highcharts, we have a series object is a set of data. For example, a line graph or one set of columns. All data plotted on a chart comes from the series object.  The type of series, for example, line or column. By default, the series type is inherited from the chart.type, so unless the chart is a combination of series types, there is no need to set it on the series level.

HighCharts Angular example

There is a different node package module (npm) library to include HighCharts in Angular. We are using highcharts Angular npm library, is one of the most used library to include highcharts library in angular project. Let’s continue from the previous example. Let’s install our highCharts-angular library and run the following command to install the library.

npm install highcharts-angular --save

In our app.module.ts we need to import and include the HighchartsChartModule as.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HighchartsChartModule } from 'highcharts-angular';

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

HighCharts Angular: Simple line chart example

First, we’ll demonstrate a simple line chart as shown in the screenshot.

In our component where we are using Highcharts charts, we need to import Highcharts first. We have already install highCharts in our project. Let’s edit the app.component.ts file to include highCharts library and data for our line chart example.

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

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

  chartOptions: Highcharts.Options = {
    title: {
      text: "Infosys stock value"
    },
    xAxis: {
      categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
        "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
    },
    yAxis: {
      title: {
        text: "Infosys Stock value in dollar"
      }
    },
    series: [{
      data: [12, 8, 43, 35, 20, 90, 100, 110],
      type: 'line'
    }]
  }
}

In chartOption we need to specify charts data and chart types. We need to add our highCharts Angular component in our app.component.html file as.

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

HighCharts Angular: Bar chart example

HighCharts Angular bar chart example

In our second example, we will display the world population from 1800 to 2020 using bar charts. We don’t need to change our app.component.html template. We only need to change the HighChart option only. Let edit app.component.ts file to include bar chart data.

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

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

  chartOptions: Highcharts.Options = {
    chart: {
      type: 'bar'
    },
    title: {
      text: 'Historic World Population by Region'
    },
    xAxis: {
      categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania']
    },
    yAxis: {
      min: 0,
      title: {
        text: "Infosys Stock value in dollar"
      },
      labels: {
        overflow: 'justify'
      }
    },
    tooltip: {
      valueSuffix: ' millions'
    },
    plotOptions: {
      bar: {
        dataLabels: {
          enabled: true
        }
      }
    },
    series: [{
      type: undefined,
      name: 'Year 1800',
      data: [107, 31, 635, 203, 2]
    }, {
      type: undefined,
      name: 'Year 1900',
      data: [133, 156, 947, 408, 6]
    }, {
      type: undefined,
      name: 'Year 2000',
      data: [814, 841, 3714, 727, 31]
    }, {
      type: undefined,
      name: 'Year 2026',
      data: [1216, 1001, 4436, 738, 40]
    }]
  }
}

How to implmennt Angular highcharts pie chart example

At last, we’ll demonstrate HighCharts Angular pie chart, we don’t need to change it in our app.component.html. Let’s edit the app.component.ts file to include pie chart data and Chart options. Here is a screenshot of our example.

HighCharts Angular pie Chart example
Angular highCharts pie example
import { Component } from '@angular/core';
import * as Highcharts from 'highcharts';

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

  chartOptions: Highcharts.Options = {
    chart: {
      plotBackgroundColor: 'silver',
      plotBorderWidth: 2,
      plotShadow: true,
      type: 'pie'
    },
    title: {
      text: 'Browser market shares in October, 2019'
    },
    tooltip: {
      pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
    },
    plotOptions: {
      pie: {
        allowPointSelect: true,
        cursor: 'pointer',
        dataLabels: {
          enabled: true,
          format: '<b>{point.name}</b>: {point.percentage:.1f} %'
        }
      }
    },
    series: [{
      name: 'Brands',
      colorByPoint: true,
      type: undefined,
      data: [{
        name: 'Chrome',
        y: 61.41,
        sliced: true,
        selected: true
      }, {
        name: 'Internet Explorer',
        y: 11.84
      }, {
        name: 'Firefox',
        y: 10.85
      }, {
        name: 'Edge',
        y: 4.67
      }, {
        name: 'Safari',
        y: 4.18
      }, {
        name: 'Sogou Explorer',
        y: 1.64
      }, {
        name: 'Opera',
        y: 1.6
      }, {
        name: 'QQ',
        y: 1.2
      }, {
        name: 'Other',
        y: 2.61
      }]
    }]
  }
}

How to change Angular HighCharts chart size

We can easily control our HighCharts Angular chart size using our CSS style. We can also use media Query to have different chart sizes based on device size. Let edit our highCharts component and remove the inline style on HighCharts page.

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

We can use highcharts-chart tag name in our component SCC file to edit the style sheet. Add following code in our app.component.scss file.

highcharts-chart {
    width: 100%; 
    height: 500px; 
    display: block;
}

Conclusion
Finally, we have completed a demonstration on an Angular highcharts pie, lines, and bar chart. Angular HighCharts are easy to customize based on your needs. Here is an ionic slider repository of an example and you can view code in our Github repository.

Related posts

Leave a Comment

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

Scroll to Top