Getting Started with Angular CircularGauge

17 Apr 202316 minutes to read

Before we start with the CircularGauge, please refer this page for general information regarding integrating Syncfusion widget’s.

Adding JavaScript and CSS Reference

To render the CircularGauge control, the following list of external dependencies are needed,

The other required internal dependencies are tabulated below,

Files Description/Usage
ej.core.min.js It is referred always before using all the JS controls. Used to handle data operation and is used while binding data to the JS controls.
ej.circulargauge.min.js CircularGauge core script file which includes CircularGauge related scripts files.

Preparing HTML document

Create an HTML page and add the scripts references in the order mentioned in the following code example.

  • HTML
  • <html>
        <title>Angular CircularGauge</title>
        <!-- Essential Studio for JavaScript  theme reference -->
        <link rel="stylesheet" href="" />
        <!-- Angular related script references -->
        <!-- 1. Load libraries -->
             <!-- Polyfill(s) for older browsers -->
        <script src="node_modules/core-js/client/shim.min.js"></script>   
        <script src="node_modules/zone.js/dist/zone.js"></script>
        <script src="node_modules/reflect-metadata/Reflect.js"></script>
        <script src="node_modules/systemjs/dist/system.src.js"></script>
        <!-- Essential Studio for JavaScript  script references -->
        <script src=""></script>
        <script src=""></script>
        <script src=""> </script> 
        <script src=""></script>
        <!-- 2. Configure SystemJS -->
        <script src="systemjs.config.js"></script>
                .then(null, console.error.bind(console));
        <!-- 3. Display the application -->
    		<div class="splash">
    	      <div class="message">Angular Syncfusion Components App</div>
    	      <div class="spinner"></div>


    Uncompressed version of library files are also available which is used for development or debugging purpose and can be generated from the custom script here.

    Control Initialization

    • Copy CircularGauge Syncfusion Angular source component(s) from the below build location and add it in src/ej folder (For ex., consider the circularGauge component).
  • (Installed Location)\Syncfusion\Essential Studio\\JavaScript\assets-src\angular2\


    core.ts file is mandatory for all Syncfusion JavaScript Angular components. The repository having the source file from Essential Studio for JavaScript v14.3.0.49.

    • Create circularGauge folder inside src folder.

    • Create circularGauge.component.html view file inside src/circularGauge folder and render ejCircularGauge Angular component using the below code example.

  • HTML
  • <ej-circularGauge id="defaultcircularGauge">
    • Create circularGauge.component.ts model file inside the folder src/circularGauge and create sample component using the below code example.
  • TS
  • import { Component, ViewEncapsulation } from '@angular/core';
      selector: 'ej-app',
      templateUrl: 'src/circularGauge/circularGauge.component.html'
    export class CircularGaugeComponent {

    Configure the routes for the Router

    Before adding router configuration for above created ejCircularGauge component, we recommend you to go through the Angular Routing configuration to get the deeper knowledge about Angular routing.

    • Now, we are going to configure the route navigation link for created circularGauge sample in src/app.component.html file.
  • HTML
  • <div>
    	<ul class="nav navbar-nav">
    		<!--Added some content ....-->
              <a data-toggle="collapse" data-target="" 
              href="#circularGauge" [routerLink]="['/circularGauge']">circularGauge </a>
    • Import the ejCircularGauge sample component and define the route in src/app.routes.ts file.
  • TS
  • import { Routes } from '@angular/router';
    . . . . 
    import { CircularGaugeComponent } from './circularGauge/circularGauge.component';
    export const rootRouterConfig: Routes = [
        { path: '', redirectTo: 'home', pathMatch: 'full' },
        . . . . 
        { path: 'circularGauge', component: CircularGaugeComponent }
    • Import and declare the Syncfusion source component and ejCircularGauge sample component into app.module.ts like the below code snippet.
  • TS
  • import { NgModule, enableProdMode, ErrorHandler } from '@angular/core';
    . . . . . 
    import { EJ_CIRCULARGAUGE_COMPONENTS } from './ej/circularGauge.component';
    import { CircularGaugeComponent } from './circularGauge/circularGauge.component';
    import { rootRouterConfig } from './app.routes';
    . . . . 
      imports: [BrowserModule, FormsModule, HttpModule, RouterModule.forRoot(rootRouterConfig, { useHash: true })],
      declarations: [. . . . , EJ_CIRCULARGAUGE_COMPONENTS, CircularGaugeComponent],
      bootstrap: [AppComponent]
    export class AppModule { }

    Running the application

    • To run the application, execute below command.
  • npm start
    • Browse to http://localhost:3000 to see the application. And navigate to circularGauge tab. The component is rendered as like the below screenshot. You can make changes in the code found under src folder and the browser should auto-refresh itself while you save files.

    Angular CircularGauge routes

    Set Background Color

    You can draw the speedometer with dark background and to vary the speed of the pointer, set the readOnly option as false for user interaction.

  • HTML
  • <ej-CircularGauge e-height="500" e-width="500" e-backgroundcolor="##3D3F3D" e-readonly="false">

    The above code example renders a Gauge as shown in the following screen shot.

    Angular CircularGauge background color

    Provide scale values

    • You can customize the pointer cap using the following options- Cap radius, Cap border color, cap background color, pointer cap border width.

    • Set the maximum speed limit in the Gauge as 200KmpH.

    • Major Ticks and Minor Ticks have the interval values 20 and 5 respectively. Show ranges and show indicators are used to display the ranges and indicators in their respective positions.

  • HTML
  • <ej-CircularGauge [height]="500" [width]="500" backgroundColor="#3D3F3D" [readOnly]="false">
              <e-scale showRanges="true" showIndicators="true" maximum="200" majorIntervalValue="20" 
                   minorIntervalValue="5" pointerCap.radius="15" pointerCap.borderWidth="0" 
                   pointerCap.backgroundColor="#797C79" pointerCap.borderColor="#797C79">

    On executing the above code, sample renders a Circular Gauge with customized labels as follows.

    Angular CircularGauge scale value

    Add Label Customization

    To display the values in the Gauge, scale labels are used. You can customize the label color.

  • HTML
  • <ej-CircularGauge>
                    <e-label color="#ffffff"></e-label>

    On executing the above code, sample renders a default Circular Gauge with customized labels as follows.

    Angular CircularGauge add label

    Add pointer data

    You can use three pointers that denote kilometer value, rotation per minute value and torque value.The torque value pointer should not be similar to other two pointers. Set the torque pointer as marker pointer. You can set other attributes for pointer such as background color, border color, Length, width and distance from scale.

  • HTML
  • <ej-CircularGauge>
                   <e-pointer [value]="140" [distanceFromScale]="60" [showBackNeedle]="false" 
                              [length]="20" type="marker" markerType="triangle"
                              [width]="10" backgroundColor="#FF940A" border.color="#FF940A">
                    <e-pointer [value]="110" [showBackNeedle]="false" [length]="150" [width]="2" 
                          needleType="rectangle" backgroundColor="#05AFFF" border.color="#05AFFF">
                    <e-pointer [value]="67" [showBackNeedle]="false" [length]="100" [width]="15" 
                               backgroundColor="#FC5D07" border.color="#FC5D07">

    On executing the above code, sample renders a customized Circular Gauge as follows.

    Angular CircularGauge add pointer

    Add Tick Details

    You can display the tick value with customization as given in the following code example. You can set width and height of the Major ticks greater than the Minor ticks. You can set dark background for tick Color to have a better visibility.

  • HTML
  • <ej-CircularGauge>
                    <e-tick type="major" [distanceFromScale]="70" [height]="20" 
                                         [width]="3" color="#ffffff"></e-tick>
                    <e-tick type="minor" [distanceFromScale]="70" [height]="12" 
                                         [width]="1" color="#ffffff"></e-tick>

    On executing the above code, sample renders a Circular Gauge with customized labels as follows.

    Angular CircularGauge add ticks

    Add Range Values

    Ranges denote the property of scale value in the speedometer. The color values of the ranges specify the speed variation. Set showRanges property to true to show the ranges in the Circular Gauge. Select safe zone for low speed, caution zone for moderate speed and high zone for high speed. You can customize the range with the properties such as start value, end value, start width, end width, background color , border color, etc.,

  • <ej-CircularGauge e-height="500" e-width="500" e-backgroundcolor="#3D3F3D" e-readonly="false">
                    <e-range [distanceFromScale]="30" [startValue]="0" [endValue]="70" 
                        backgroundColor="#5DF243" border.color="#FFFFFF"></e-range>
                    <e-range [distanceFromScale]="30" [startValue]="70" [endValue]="140" 
                        backgroundColor="#F6FF0A" border.color="#FFFFFF"></e-range>
                    <e-range [distanceFromScale]="30" [startValue]="140" [endValue]="200" 
                        backgroundColor="#FF1807" border.color="#FFFFFF"></e-range>

    On executing the above code, sample renders a Circular Gauge with customized range as follows.

    Angular CircularGauge add range