How to create impressive looking Gauge Charts using Angular 6

When necessary, a Gauge Chart or Speedometer Chart can be great in visualizing data. But how do we implement it in Angular 6?

Recently we have done a little research to find suitable Gauge chart components in Angular 6. We tried out 3 free chart component libraries, they are:

ngx-gauge@1.0.0-beta.4
angular-google-charts@0.1.2
angular-highcharts

Although all three can produce nice looking Gauge charts, the features provided are quite different, and of course, they all have their strengths and limitations.

ngx-gauge

This is the first component that I tested as it appeared on very top of the google search results.

It is a simple and good looking component with basic features. It is easy to install and use, simply follow the instructions at github. One feature to highlight is the “Threshold color Range”, it can define a “thresholdConfig” property as below, thus the color will change depending on the data value.

We created sample in stackblitz to demo this feature.

thresholdConfig = {
    '0': {color: 'green'},
    '40': {color: 'orange'},
    '75.5': {color: 'red'}
};

The shortcoming of this component is that it does not support some of the common features like plotting color bands or dial arrows. Unfortunately, the color bands are a must have for my project, so different components must be used.

angular-google-charts

Angular Google charts is wrapper of the Google Charts library for Angular 6+. Google Charts is a powerful data tool which includes a rich gallery of interactive charts.

To setup the Gauge chart in angular, first install the package

npm install angular-google-charts

Then import it into app.module.ts

imports: [
    ...
    GoogleChartsModule.forRoot(),
    ...
  ],

In the component that consume the chart

<google-chart #googlechart [title]="chart.title" [type]="chart.type" [data]="chart.data" [options]="chart.options">
</google-chart>
 
 @ViewChild('googlechart')
  googlechart: GoogleChartComponent;
  chart = {
    type: 'Gauge',
    data: [
      ['Memory', 50],
      ['CPU', 99]
    ],
    options: {
      width: 400,
      height: 120,
      greenFrom: 0,
      greenTo: 75,
      redFrom: 90,
      redTo: 100,
      yellowFrom: 75,
      yellowTo: 90,
      minorTicks: 5
    }
  };

We wrap up the above code into a stackblitz project for your reference.

While the gauge is very configurable and supports three color sections (green, yellow and red), the colors can not be customized and it does not support additional colors. It may not be a issue for a typical use case, but our project requires specific colors and more than just three colors. So the search continues.

angular-highcharts

It is a wrapper for very popular high charts js charting library based on SVG. While highcharts is extremely feature rich, the large number of properties also makes the component a bit confusing for a developer new to this library.

The installation and setup for Gauge chart using the angular-highcharts is not very straightforward, but once it is setup, it works like a charm.

First, install with npm.

npm install angular-google-charts@6.2.6
npm install highcharts@4.2.5

Please note that the version 6.2.6 works with Angular 6.

Then in app.module.ts, import the following.

import { ChartModule, HIGHCHARTS_MODULES } from 'angular-highcharts';
import * as more from 'highcharts/highcharts-more.src';
import * as solidGauge from 'highcharts/modules/solid-gauge.src';
...
  providers: [{ provide: HIGHCHARTS_MODULES, useFactory: () => [more, solidGauge] }],
...

In the component class

<div #chartTarget></div>

  //component class
  import {
  Component,
  ViewChild,
  ElementRef,
  AfterViewInit,
  OnInit
} from '@angular/core';
import { chart, SolidGaugeChart } from 'highcharts';
import * as Highcharts from 'highcharts';
import * as solidGauge from 'highcharts/modules/solid-gauge.src';

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

  @ViewChild('chartTarget')
  chartTarget: ElementRef;
  options: any;
  chart: Highcharts.ChartObject;

  ngOnInit() {}

  ngAfterViewInit() {
    this.initOptions();
    this.chart = chart(this.chartTarget.nativeElement, this.options as any);
  }

  initOptions() {
    this.options = {
      chart: {
        type: 'solidgauge'
      },
      title: {
        text: 'Solid Gauge Demo'
      },
      pane: {
        startAngle: -90,
        endAngle: 90,
        background: {
          backgroundColor: 'white',
          innerRadius: '60%',
          outerRadius: '90%',
          shape: 'arc'
        }
      },
      tooltip: {
        enabled: false
      },
      // the value axis
      yAxis: {
        stops: [
          [0.5, 'green'], // green
          [0.6, 'yellow'], // yellow
          [0.9, '#DF5353'] // red
        ],
        length: 5,
        lineWidth: 0,
        minorTickInterval: null,
        tickAmount: 2,
        title: {
          y: -70
        },
        labels: {
          y: 16
        },
        min: 0,
        max: 200,
        plotBands: [
          { from: 0, to: 100, color: 'green' },
          { from: 100, to: 120, color: 'yellow' },
          { from: 120, to: 200, color: 'red' }
        ]
      },
      plotOptions: {
        solidgauge: {
          dataLabels: {
            y: 5,
            borderWidth: 0,
            useHTML: true
          }
        }
      },
      series: [
        {
          data: [80]
        }
      ]
    };
  }
}

The result of above is as below

As you can see, there are more configurable properties in the above sample code than the other two components. And this is just a simple version, for more available API, go to highcharts API reference site.

For more Information and to build website using Angular, Hire Angular Developer from us as we give you high quality product by utilizing all the latest tools and advanced technology. E-mail us any clock at – hello@hkinfosoft.com or Skype us: “hkinfosoft“.

To develop custom web app using Angular, please visit our technology page.