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. Image for the cookie policy date
Syncfusion Feedback

Trusted by the world’s leading companies

Syncfusion Trusted Companies

Overview

The JSP 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.


Scale Customization

A scale holds the ranges and pointers in a circular gauge. Any number of scale elements can be added to a gauge. You can also customize the scale bar size, radius, and direction.

JSP Circular gauge with scale customization


Labels Customization

Customize the look and feel of default labels in a circular gauge by changing the font style, size, and color. Prefix or suffix text can also be added to the labels.

JSP Circular gauge with customized labels


Ticks customization

Define the desired style for major ticks and minor ticks in a gauge by changing their height, width, and color.

JSP Circular gauge with customized ticks


Custom Labels

Add custom labels to visualize additional information on a circular gauge. Labels can be placed in any location of the gauge.

JSP Circular gauge with custom labels


Indicators

An indicator in the JSP Circular Gauge indicates the current status of the pointers based on its value. Each indicator can be rendered with different colors.


Legend

Legends provide additional information and are helpful in identifying individual ranges in a gauge. Circular gauge also provides various options to customize the position, alignment, shape, size, border, and font of the legend.

JSP Circular gauge with legend


Range customization

A range in the JSP Circular Gauge control is a visual element that helps quickly visualize where a value falls on the axis.

JSP circular gauge chart rendered with range

Range position

Change the position of a range or move it to any place inside the gauge.

JSP circular gauge chart rendered with modified range width

Range width

The range width varies based on the values to enhance usage and readability.

JSP circular gauge chart rendered with multiple ranges

Multiple ranges

You can add multiple ranges inside the axes to show color variations.


Pointer Types

Indicate the values on an axis using pointers. The JSP Circular Gauge control supports two types of pointers: Marker and bar.

JSP circular gauge chart rendered with marker pointer

Marker pointer

Point out the current value by using different types of marker pointers.

JSP circular gauge chart rendered with bar pointer

Needle pointer

Use needle pointer to point the current value from the start value of the axes.


Pointer Animation

The JSP 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.

JSP Circular gauge with pointer animation


Pointer interaction

The interactive circular gauge control provides an option to drag the pointer from one place to another. This allows you to control the pointer with swipe gestures and change the value at runtime.

JSP Circular gauge with pointer interaction


Tooltip

The interactive JSP Circular Gauge control provides options to display details about a pointer value using a tooltip when hovering the mouse over the labels.

JSP Circular gauge with tooltip


Export

Export the rendered circular gauge in image formats such as BMP, GIF, and JPG in client-side.

JSP Circular gauge with Export


Appearance

The appearance of each element in a circular gauge, such as scales, ranges, intervals, pointer positions, label positions and tick positions, can be customized easily.

JSP Circular gauge appearance


60+ JSP CONTROLS

Transform your applications today by downloading our free evaluation version
Download Free Trial No credit card required.

Awards

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.

Up arrow icon