HelpBot Assistant

How can I help you?

Getting started with Angular Linear gauge component

9 Feb 202612 minutes to read

This section explains the steps required to create a simple Linear Gauge and demonstrate the basic usage of the Linear Gauge component.

Dependencies

Below is the list of minimum dependencies required to use the Linear Gauge component.

|-- @syncfusion/ej2-angular-lineargauge
    |-- @syncfusion/ej2-angular-base
    |-- @syncfusion/ej2-angular-lineargauge
    |-- @syncfusion/ej2-lineargauge
    |-- @syncfusion/ej2-base
    |-- @syncfusion/ej2-svg-base

Setup Angular Environment

Prerequisites: Node.js (LTS) and npm must be installed before creating an Angular project.

Use the Angular CLI to create and manage Angular applications. Install the CLI with one of the following approaches depending on preference.

npm install -g @angular/cli

Create an Angular Application

Create a new Angular application with the Angular CLI:

ng new my-app
cd my-app

Installing Syncfusion® Linear Gauge package

Syncfusion® packages are published on npm under the @syncfusion scope. The Angular distribution is available in two package formats:

Currently, Syncfusion® provides two types of package structures for Angular components,

  1. Ivy library distribution package format
  2. Angular compatibility compiler (ngcc) package for legacy compilation and rendering

Ivy library distribution package

Syncfusion® Angular packages(>=20.2.36) use the Ivy distribution to support the Angular Ivy rendering engine. These packages are compatible with Angular version 21 and other latest angular versions. Install the Ivy package with the following command:

Add @syncfusion/ej2-angular-lineargauge package to the application.

npm install @syncfusion/ej2-angular-lineargauge --save

Angular compatibility compiled package(ngcc)

For Angular versions earlier than 12, use the legacy ngcc package of the Syncfusion® Angular components. Install the ngcc package with:

Add @syncfusion/ej2-angular-lineargauge@ngcc package to the application.

npm install @syncfusion/ej2-angular-lineargauge@ngcc --save

To reference the ngcc package in package.json, add the -ngcc suffix to the package version, for example:

@syncfusion/ej2-angular-lineargauge:"32.1.19-ngcc"

Note: If the -ngcc suffix is not specified, the Ivy package will be installed and a compatibility warning may appear when using older Angular versions.

Add LinearGauge component

Modify the template in app.component.ts file to render the Linear Gauge component.
[src/app/app.component.ts].

import { LinearGaugeModule } from '@syncfusion/ej2-angular-lineargauge'
import { Component } from '@angular/core';

@Component({
imports: [
         LinearGaugeModule
    ],
    standalone: true,
    selector: 'app-container',
    // specifies the template string for the linear gauge component
    template: `<ejs-lineargauge id="gauge-container"></ejs-lineargauge>`
})
export class AppComponent {

}

Now use the <code>app-container</code> in the index.html instead of default one.

```
<app-container></app-container>
```

  • Now run the application in the browser using the below command.

      npm start

The below example shows a basic Linear Gauge.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { LinearGaugeModule } from '@syncfusion/ej2-angular-lineargauge'
import { GaugeTooltipService } from '@syncfusion/ej2-angular-lineargauge'



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

@Component({
imports: [
         LinearGaugeModule
    ],

providers: [ GaugeTooltipService ],
standalone: true,
    selector: 'app-container',
    // specifies the template string for the linear gauge component
    template: `<ejs-lineargauge id="gauge-container"></ejs-lineargauge>`
})
export class AppComponent {

}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Module Injection

LinearGauge component is segregated into the individual feature-wise modules. In order to use a particular feature, inject its feature module using the providers: {}. Please find the feature module name and description as follows.

  • AnnotationsService - Inject this provider to use Annotation feature.
  • GaugeTooltipService - Inject this provider to use Tooltip feature.

These modules should be injected in the providers section of the app.component.ts file as follows,

    import { LinearGaugeModule } from '@syncfusion/ej2-angular-lineargauge'
    import { Component } from '@angular/core';
    import { AnnotationsService, GaugeTooltipService} from '@syncfusion/ej2-angular-lineargauge';

    @Component({
        imports: [
            LinearGaugeModule,
        ],
        standalone: true,
        providers: [ AnnotationsService, GaugeTooltipService ]
    })

Add Gauge Title

The title can be added to the Linear Gauge component using the title property in the Linear Gauge.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { LinearGaugeModule } from '@syncfusion/ej2-angular-lineargauge'
import { GaugeTooltipService } from '@syncfusion/ej2-angular-lineargauge'




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

@Component({
imports: [
         LinearGaugeModule
    ],

providers: [ GaugeTooltipService ],
standalone: true,
    selector: 'app-container',
    template:
    `<ejs-lineargauge id="gauge-container" [title]='Title'>
    </ejs-lineargauge>`
})
export class AppComponent implements OnInit {
    public Title?: string;
    ngOnInit(): void {
        // Title for linear gauge
        this.Title = 'linear gauge';
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Axis Range

The range of the axis can be set using the minimum and maximum properties in the Linear Gauge.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { LinearGaugeModule } from '@syncfusion/ej2-angular-lineargauge'
import { GaugeTooltipService } from '@syncfusion/ej2-angular-lineargauge'




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

@Component({
imports: [
         LinearGaugeModule
    ],

providers: [ GaugeTooltipService ],
standalone: true,
    selector: 'app-container',
    template:
    `<ejs-lineargauge id="gauge-container">
      <e-axes>
         <e-axis [minimum]='Minimum' [maximum]='Maximum'>
         </e-axis>
      </e-axes>
    </ejs-lineargauge>`
})
export class AppComponent implements OnInit {
    public Minimum?: number;
    public Maximum?: number;
    ngOnInit(): void {
       this.Minimum = 0,
       this.Maximum = 200
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

To denote the axis labels with temperature units, add the °C as suffix to each label. This can be achieved by setting the {value}°C to the format property in the labelStyle object of the axis. Here, {value} acts as a placeholder for each axis label.

To change the pointer value from the default value of the gauge, set the value property in pointers object of the axis.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { LinearGaugeModule } from '@syncfusion/ej2-angular-lineargauge'
import { GaugeTooltipService } from '@syncfusion/ej2-angular-lineargauge'




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

@Component({
imports: [
         LinearGaugeModule
    ],

providers: [ GaugeTooltipService ],
standalone: true,
    selector: 'app-container',
    template:
    `<ejs-lineargauge id="gauge-container">
      <e-axes>
         <e-axis minimum=0 maximum=200>
           <e-pointers>
             <e-pointer value=140></e-pointer>
           </e-pointers>
           <e-ranges>
             <e-range start=0 end=80 startWidth=15 endWidth=15></e-range>
             <e-range start=80 end=120 startWidth=15 endWidth=15></e-range>
             <e-range start=120 end=140 startWidth=15 endWidth=15></e-range>
             <e-range start=140 end=200 startWidth=15 endWidth=15></e-range>
           </e-ranges>
         </e-axis>
      </e-axes>
    </ejs-lineargauge>`
})
export class AppComponent implements OnInit {
    public Label?: Object;
    ngOnInit(): void {
      this.Label = {
           format: '{value}°C'
      };
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Setting the value of pointer

The pointer value is changed in the below sample using the value property in pointers object of the axis.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { LinearGaugeModule } from '@syncfusion/ej2-angular-lineargauge'
import { GaugeTooltipService } from '@syncfusion/ej2-angular-lineargauge'




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

@Component({
imports: [
         LinearGaugeModule
    ],

providers: [ GaugeTooltipService ],
standalone: true,
    selector: 'app-container',
    template:
    `<ejs-lineargauge id="gauge-container">
      <e-axes>
         <e-axis minimum=0 maximum=200>
           <e-pointers>
             <e-pointer value=40 color='green'></e-pointer>
           </e-pointers>
         </e-axis>
      </e-axes>
    </ejs-lineargauge>`
})
export class AppComponent implements OnInit {
    ngOnInit(): void {
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));