HelpBot Assistant

How can I help you?

Getting started in EJ2 TypeScript Circular Gauge Component

10 Feb 20267 minutes to read

This guide demonstrates how to create and configure a Circular gauge component in TypeScript using Syncfusion Essential® JS 2. The Circular gauge is a data visualization control that displays values on a circular scale, useful for dashboards, monitoring systems, and data presentation applications.

By the end of this guide, you will:

  • Set up a TypeScript development environment for Syncfusion components
  • Create your first Circular gauge instance
  • Configure basic properties like pointer values and axes
  • Run the application in your browser

This guide uses the Syncfusion quickstart repository, preconfigured with webpack for TypeScript compilation. The application requires Node.js v14.15.0 or higher and leverages the webpack-cli for bundling. Learn more about webpack configuration and features.

Prerequisites

Before getting started, ensure your development environment meets these requirements:

  • Node.js: Version 14.15.0 or higher (verify with node --version in your terminal)
  • npm: Version 6.0 or higher (included with Node.js)
  • TypeScript: Basic familiarity with TypeScript syntax
  • Code Editor: Visual Studio Code or any preferred IDE with TypeScript support

Dependencies

The Circular gauge requires the following minimum Syncfusion packages:

|-- @syncfusion/ej2-circulargauge
    |-- @syncfusion/ej2-base
    |-- @syncfusion/ej2-svg-base
    |-- @syncfusion/ej2-pdf-export

These dependencies are automatically installed when you use the quickstart repository.

Set up the development environment

Step 1: Clone the quickstart project

Open the command prompt from the required directory, and run the following command to clone the Syncfusion® JavaScript (Essential® JS 2) quickstart project from GitHub.

git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack- ej2-quickstart

After cloning the application in the ej2-quickstart folder, run the following command line to navigate to the ej2-quickstart folder.

Step 2: Navigate to the project folder

Change to the newly created project directory:

cd ej2-quickstart

Add Syncfusion® JavaScript packages

Syncfusion® JavaScript (Essential® JS 2) packages are available on the npmjs.com public registry. You can install all Syncfusion® JavaScript (Essential® JS 2) controls in a single @syncfusion/ej2 package or individual packages for each control.

The quickstart application is preconfigured with the dependent @syncfusion/ej2 package in the ~/package.json file. Use the following command to install the dependent npm packages from the command prompt.

npm install

This command downloads and installs all packages specified in package.json, including the Circular gauge and its dependencies.

Create your first Circular gauge

Step 1: Define the HTML container

Add a container <div> element in the index.html file where the Circular gauge will render:

<!DOCTYPE html>
<html lang="en">

<head>
  <title>EJ2 Circular Gauge</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
</head>

<body>
  <!--container which is going to render the Circular gauge-->
  <div id='container'>
  </div>
</body>

</html>

Step 2: Initialize the Circular gauge in TypeScript

In your app.ts file, import the Circular gauge component and initialize it:

import { CircularGauge } from '@syncfusion/ej2-circulargauge';

// initialize CircularGauge component
let gauge: CircularGauge = new CircularGauge();

// render initialized CircularGauge
gauge.appendTo('#container');

The appendTo() method attaches the Circular gauge instance to the DOM element with the ID container.

Build and run the application

The quickstart project uses webpack to compile TypeScript and bundle your application. To start the development server and run the application in your browser:

npm start

The build process will compile your TypeScript code and launch the application at http://localhost:8080/ (or another port if 8080 is busy). Your browser will automatically open to display your Circular gauge.

View a complete example

The example below demonstrates a basic Circular gauge with default configuration:

import { CircularGauge } from '@syncfusion/ej2-circulargauge';

let gauge: CircularGauge = new CircularGauge();
gauge.appendTo('#element');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Animation</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-popups/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='element'></div>
    </div>
</body>

</html>

Set Pointer Value

You can change the pointer value in the above sample using value property in pointers.

import { CircularGauge } from '@syncfusion/ej2-circulargauge';
let gauge: CircularGauge = new CircularGauge({
    axes:[{
        pointers:[{
            value: 35
        }],
    }]
}, '#element');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Animation</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-popups/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='element'></div>
    </div>
</body>

</html>