We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
JavaScript Circular Gauge control is ideal for visualizing numeric values over a circular scale. A Circular Gauge, also known as a radial gauge, can be used to create a speedometer, meter gauge, multi-axes clock, modern activity gauge, direction compass, and more. All Circular Gauge elements are rendered using scalable vector graphics (SVG).
The JS gauge axes are circular scales where a set of values can be plotted based on any business logic. You can also easily customize the appearance of the axes.
Customize the look and feel of the default labels in gauge by changing the font style, size, and color. Prefix or suffix text can also be added to the labels.
Define the desired style for major and minor ticks in the gauge by changing their height, width, and color.
To enhance readability, change the position of the default axes in the gauge by setting the offset value for labels, ticks, and axis lines.
Add a border to the gauge by using axis lines. The appearance of the default axis in the radial gauge can also be customized.
The JavaScript Circular Gauge allows you to add multiple axes to a gauge to design it like a clock, speedometer, meter gauge, etc.
Render the axes in the radial gauge either in a clockwise direction or in a counterclockwise direction.
A range in an HTML5 JavaScript Circular Gauge is a visual element that helps to quickly visualize where a value falls on the axis.
Change the position of a range or move it to any place inside the gauge.
The range width varies based on the values to enhance usage and readability.
You can add multiple ranges inside the axes to show color variations.
Indicate values on an axis using pointers. The JavaScript Circular Gauge control supports three types of pointers: needle, marker, and bar.
Point out the current value in the radial gauge by using a highly customizable needle-type element.
Change the needle pointer type to a triangle or arrow to point out or highlight values.
The pointer cap is a rounded ball at the end of the arrow pointer that can also be customized to enhance the pointer’s appearance.
Add extra styling to the pointer cap by adding a tail.
You can add more than one needle pointer to the JS gauge axes as a result to indicate multiple values.
Point out the current value by using the following different types of marker pointers.
Change the marker pointer type to built-in shapes such as a triangle, inverted triangle, square, or circle to highlight values.
You can change or move the marker pointers to any place inside the gauge.
Use bar pointer to point to the current value from the start value of the axes.
You can change or move the bar pointers to any place inside the gauge.
You can add more than one bar pointer to the axes to indicate multiple values.
The JavaScript Circular Gauge control provides a visually appealing way to view its pointers with animated transitions for a certain duration. Experience smooth pointer transitions by moving the pointer from one place to another.
The interactive JavaScript Circular Gauge control provides an option to drag the pointer from one place to another. Swipe gestures are used to control the pointer, and the value is changed at runtime.
The ranges and range bar pointer corners in the radial gauge are rounded to form arc gauges.
A legend provides additional information that is helpful in identifying the ranges in a Circular Gauge. It can be docked at the left, right, top, and bottom positions around the plot area.
The interactive HTML5 JavaScript Circular Gauge control provides options to display details about a pointer value through a tooltip when hovering the mouse over the pointer.
Form half or quarter circular gauges by modifying the start and end angles of a gauge. This allows the gauge to render in a very small area.
Display any HTML element as an annotation at a specific point of interest in the JavaScript Circular Gauge. You can also add multiple annotations in a gauge.
The appearance of each element in a Circular Gauge, such as axes, ranges, axes intervals, pointer positions, label positions, and tick positions, can be customized easily.
Colors applied to the range and pointer can vary gradually to create a smooth color transition.
Add a title to visualize additional information on a Circular Gauge. You can also customize the font of the title in the gauge.
The interactive Circular Gauge control also support touch interactions.
All the features in Circular Gauge will work on touch devices with zero configuration. Use the touch features such as tooltip and pointer drag without any customization.
You can view the Circular Gauge on various devices. It is also possible to hide specific elements in the gauges for particular screen sizes by making a very minimal change in the gauge events.
You can render Circular Gauge control in all the modern browsers.
Circular Gauge component is also available in Blazor, React, Angular, and Vue frameworks. Check out the different Circular Gauge platforms from the links below,
Easily get started with the JavaScript Circular Gauge using a few simple lines of HTML and TS code, as demonstrated below. Also explore our JavaScript Circular Gauge Example that shows you how to render and configure the Gauge in JavaScript.
<body>
<!--container which is going to render the Circular gauge-->
<div id='container'>
</iv>
</body>import { CircularGauge } from '@syncfusion/ej2-circulargauge';
// initialize CircularGauge component
let gauge: CircularGauge = new CircularGauge();
// render initialized CircularGauge
gauge.appendTo('#container');You can find our JavaScript Circular Gauge demo here.
No, this is a commercial product and requires a paid license. However, a free community license is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue and five or fewer developers.
A good place to start would be our comprehensive getting started documentation.
Documentation
Greatness—it’s one thing to say you have it, but it means more when others recognize it. Syncfusion is proud to hold the following industry awards.
You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.
