Essential JS 2 CircularGauge Components for Angular

Usage no npm install needed!

<script type="module">
  import syncfusionEj2AngularCirculargauge from 'https://cdn.skypack.dev/@syncfusion/ej2-angular-circulargauge';



The circular gauge control is ideal to visualize numeric values over a circular scale. All the circular gauge elements are rendered using Scalable Vector Graphics (SVG).

Circular Gauge

Circular gauge is part of Syncfusion Essential JS 2 commercial program. License is available in two models Community and Paid. Please refer the license file for more information. License can be obtained by registering at https://www.syncfusion.com/downloads/essential-js2


To install circular gauge and its dependent packages, use the following command

npm install @syncfusion/ej2-circulargauge


Supported Frameworks

Circular gauge component is also offered in following list of frameworks.

  1. Angular
  2. React
  3. Vue.js
  4. ASP.NET Core
  6. JavaScript (ES5)

Use case samples

Key Features

  • Axes - Axes is a collection of circular axis that can be used to indicate numeric values.
  • Ranges - Supports ranges to categorize the axis values. Any number of ranges can be added to the circular gauge.
  • Ticks and Labels - Provides options to customize the ticks and labels of the gauges.
  • Pointers - Indicates the values on axis. Circular gauge supports three types of pointers: needle, range bar, and marker.
  • Annotation - Uses any custom HTML element as annotation and place it anywhere on the gauge.
  • Tooltip - Provides information about the pointer values on mouse hover.
  • Pointer Drag - Provides support to place a pointer at the desired values by dragging it.


Product support is available for through following mediums.


Check the license detail here.


Check the changelog here

© Copyright 2022 Syncfusion, Inc. All Rights Reserved. The Syncfusion Essential Studio license and copyright applies to this distribution.