Getting started with Angular Circular gauge component

This article describes the steps to create a simple Circular Gauge and demonstrates its basic usage.

Prerequisites

Ensure your development environment meets the System Requirements for Syncfusion® Angular UI Components, which covers supported Node.js, Angular, and @syncfusion/ej2-angular-circulargauge versions.

You also need a modern code editor such as Visual Studio Code, Cursor, or Syncfusion® CodeStudio.

Angular 21 Standalone Architecture: Standalone components are the default in Angular 21. This guide uses the modern standalone architecture. If you need more information about the standalone architecture, refer to the Standalone Guide.

Set Up the Angular Environment

Use the Angular CLI to create and manage Angular applications. Install the CLI globally:

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

Install the Syncfusion® Circular Gauge package

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

  1. Ivy library distribution package (recommended)
  2. Angular compatibility compiler (ngcc) package (legacy)

Ivy library distribution package

From package version 20.2.36 onwards, the Syncfusion® Angular components are published as Ivy partial-compilation packages and are compatible with Angular 13 and later, including the latest Angular versions (such as Angular 21).

Install the @syncfusion/ej2-angular-circulargauge package using the following command.

npm install @syncfusion/ej2-angular-circulargauge

Angular compatibility compiled package (ngcc)

Use the legacy @ngcc-tagged package only for projects that still rely on the Angular View Engine (typically Angular 12 and earlier). Angular 13 and later do not require ngcc.

Install the @syncfusion/ej2-angular-circulargauge@ngcc package using the following command.

npm install @syncfusion/ej2-angular-circulargauge@ngcc

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

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

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 the Circular Gauge component

  1. Open src/app/app.component.ts and replace its contents with the following code to render the Circular Gauge component.
import { Component } from '@angular/core';
import { CircularGaugeModule } from '@syncfusion/ej2-angular-circulargauge';

@Component({
    imports: [CircularGaugeModule],
    standalone: true,
    selector: 'app-container',
    // specifies the template string for the Circular Gauge component
    template: `<ejs-circulargauge id="circular-container"></ejs-circulargauge>`
})
export class AppComponent { }

  1. Replace the default selector in src/index.html so the new standalone component is bootstrapped.

     <app-container></app-container>

  2. Run the application in the browser with the following command.

     ng serve --open

By default, the dev server opens at http://localhost:4200/.

The following example renders a basic Circular Gauge.

import { CircularGaugeModule } from '@syncfusion/ej2-angular-circulargauge'
import { GaugeTooltipService } from '@syncfusion/ej2-angular-circulargauge'
import { Component } from '@angular/core';

@Component({
imports: [
         CircularGaugeModule
    ],

providers: [ GaugeTooltipService ],
standalone: true,
    selector: 'app-container',
    // specifies the template string for the CircularGauge component
    template: `<ejs-circulargauge id="circular-container"></ejs-circulargauge>`
})
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

The Circular Gauge component offers additional features through injectable services. To use these features, import and register the required services in the component’s providers array.

The following services enhance the Circular Gauge’s functionality:

  • AnnotationsService - Enables adding annotations (text, shapes, or custom templates) to the Circular Gauge at specific positions. Inject this service to display additional information or labels within or around the Circular Gauge.
  • GaugeTooltipService - Enables the display of tooltips for pointers and ranges when the mouse hovers over them. Inject this service to show contextual details on user interaction.
  • PrintService - Enables printing the rendered Circular Gauge directly from the browser. Inject this service to use the print method.
  • ImageExportService - Enables exporting the rendered Circular Gauge as an image (PNG, JPEG, or SVG). Inject this service to use the export method.
  • PdfExportService - Enables exporting the rendered Circular Gauge as a PDF document. Inject this service to use the export method.

These services should be injected into the providers section of the standalone component.

The following example demonstrates injecting GaugeTooltipService to enable the tooltip on the Circular Gauge:

import { CircularGaugeModule } from '@syncfusion/ej2-angular-circulargauge'
import { GaugeTooltipService } from '@syncfusion/ej2-angular-circulargauge'
import { Component, OnInit } from '@angular/core';

@Component({
imports: [CircularGaugeModule],
providers: [ GaugeTooltipService ],
standalone: true,
    selector: 'app-container',
    template:
    `<ejs-circulargauge id="circular-container" [tooltip]="tooltip">
        <e-axes>
            <e-axis>
                <e-pointers>
                    <e-pointer value=35></e-pointer>
                </e-pointers>
            </e-axis>
        </e-axes>
    </ejs-circulargauge>`
})
export class AppComponent implements OnInit {
    public tooltip?: Object;
    ngOnInit(): void {
        this.tooltip = {
            enable: true
        };
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Troubleshooting

  • Module not found: @syncfusion/ej2-angular-circulargauge – The package is not installed. Run npm install @syncfusion/ej2-angular-circulargauge.
  • Compatibility warning about Ivy/Angular version – The ngcc suffix is missing for legacy Angular. Install with @syncfusion/ej2-angular-circulargauge@ngcc.
  • ejs-circulargauge is not a known element – The module import is missing. Confirm CircularGaugeModule is imported in the imports array of the standalone component.
  • ng serve fails with port already in use – The default port 4200 is occupied. Run ng serve --port 4300 to use a different port.

See also