How to create a gauge in Angular

3 min readJul 18, 2021

In this article, we are going to see how to create a gauge easily in Angular. To make our application look cooler and to show our data in a cooler fashion we can use gauges of different styles based on the needs of our application.

Installation

To start with the creation of gauge's first we need to install our package using the command which is given below. You can find the link to the npx-gauge here.

 $ npm i ngx-gauge

Before downloading the gauge download the appropriate gauge whichever suits your application.

Imports

Make sure you import NgxGaugeModule in your Module file.

import { NgxGaugeModule } from 'ngx-gauge';

@NgModule({
    ...
    imports: [NgxGaugeModule],
    ...
})
export class AppModule { }

Types of Gauges

There are 3 different gauges available

Semi 2. Arch 3. Full

Usage

In your HTML file add <ngx-gauge></ngx-gauge> along with some of the required properties to render the gauge in your application.

<ngx-gauge [type]="'semi'" 
           [value]="10" 
           [label]="'Speed'"  
           [append]="'mph'">
</ngx-gauge>

Additional Properties

There are many properties available to customize your gauge as per the needs of the application.

size - This property specifies the size of the canvas in which the gauge will be rendered. The default value is 200. This has to be a positive Integer value.
type - This property specifies the type of gauge. This can one of the three values which are available full, semi, arch. The default value is full.
min - This property specifies the minimum value of the gauge. The default value is 0.
max - This property specifies the maximum value of the gauge. The default Value is 100.
cap - This specifies the rear end style of the gauge. You can select either on of the two values available buttand round.
thick- This specifies the thickness of the gauge. The default value is 6. This value can be any positive integer value.
label - This specifies the label for the gauge.
foregroundColor- This specifies the foreground color of the gauge.The default value is rgba(0, 150, 136, 1).
backgroundColor - This specifies the background color of the gauge. The default value is rgba(0, 0, 0, 0.1).
append- This is used to append a string to the value displayed in the gauge. For Eg. %, mph, km/hr.
prepend- This is used to prepend a string the value displayed in the gauge.For eg. $ ,INR(Financial Symbol before the price) etc
duration- This specifies the duration of the animation.This value should be given in milliseconds and the default value is 1500.
thresholds- This is a cool property which is available. Using this property we can change the color of the guage based on the condition we have given.Eg. Red- Below 40 Green- Above 90 Yellow 40–90
animate - This is enable the animation of the gauge.
aria-label - This specifies the label used by screen readers.
aria-labelledby - This specifies the ID of any external element to be used as label by screen readers.

Custom Directives for displaying Values, Labels

If you want to create customized values and labels present inside the gauge. Use the code given below

<ngx-gauge [value]="value">
    <ngx-gauge-append>
        <!-- custom append text or HTML goes here -->
    </ngx-gauge-append>
    <ngx-gauge-label>
        <!-- custom label text or HTML goes here -->
    </ngx-gauge-label>
    <ngx-gauge-prepend>
        <!-- custom prepend text or HTML goes here -->
    </ngx-gauge-prepend>
    <ngx-gauge-value>
        {{ value * }}
    </ngx-gauge-value>
</ngx-gauge>

If the value property is undefined then NaN will be displayed. Make sure you give the value property for the gauge.

Threshold Property

As I have mentioned at the top that this property can be used to change the color of the gauge based on the condition provided in this property. It takes an object with the threshold value as key and an object with color property as value

export class AppComponent {    thresholdConfig = {
        '1': {color: 'red'},
        '41': {color: 'yellow'},
        '90': {color: 'green'}
    };
}

If the values are between 1to 40 then the red color will be applied to gauge. If the value is between 41–89 then yellow is applied and if it is more than ≥ 90 then green is applied.

A demo link has been provided here