HelpBot Assistant

How can I help you?

Getting started in EJ2 TypeScript Circular Gauge Component

28 Feb 20268 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.

Import the Syncfusion® CSS styles

Syncfusion® JavaScript controls come with built-in themes, which are available in the installed packages. It’s easy to adapt the Syncfusion® JavaScript controls to match the style of your application by referring to one of the built-in themes.

The quickstart application is preconfigured to use the Material theme in the ~/src/styles/styles.css file, as shown below:

@import '../../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../../node_modules/@syncfusion/ej2-circulargauge/styles/material.css';

You can check out the themes section to know more about built-in themes and CSS reference for individual controls.

Adding Circular Gauge component

You can start adding Essential® JS 2 Circular Gauge component to the application. To get started, add the Circular Gauge component in app.ts and index.html files using the following code.

Place the following Circular Gauge code in the app.ts.

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

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

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

Now, add an HTML div element with its ID attribute set to container in your index.html using the following code.

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

<head>
    <title>Essential JS 2</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>
    <div>
        <!--HTML circular gauge element, which is going to render as Essential JS 2 Circular Gauge-->
        <div id='container'></div>
    </div>
</body>

</html>

Run the application

The quickstart project is configured to compile and run the application in the browser. Use the following command to run the application.

npm start

Output will be displayed as follows.

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>

See also