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.
Unfortunately, activation email could not send to your email. Please try again.

Overview

The circular gauge control is ideal for visualizing numeric values over a circular scale. All circular gauge elements are rendered using scalable vector graphics (SVG).


Axes customization

The axes of a circular gauge are a circular arc, where a set of values can be plotted based on any business logic. The appearance of the axes can be customized easily.

Label customization

The look and feel of the default labels can be customized by changing the font style, size, and color. You can also add prefixes or suffixes to the labels.

Ticks customization

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

Offset

To enhance readability, the position of the default axes can be changed by setting the offset value for labels, ticks, and axis lines.

CircularGauge

Axis line

You can add a circular border to the gauge by using axis lines. The default axis line appearance can also be customized.

CircularGauge

Multiple axes

The circular gauge allows you to add multiple axes to the gauge to design it like a clock, dashboard, speedometer, and more.

CircularGauge

Direction

The axes direction in the circular gauge can be changed to clockwise or counterclockwise.


Range customization

A range is a visual element that helps to quickly visualize where a value falls on the circular axes.

CircularGauge

Range position

You can change or move the range position to any place inside the gauge.

CircularGauge

Range width

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

CircularGauge

Multiple ranges

The circular gauge allows multiple ranges to be added inside the axes to show color variations.


Needle pointer

The current value can be pointed out by using a highly customizable needle-type element.

CircularGauge

Pointer type

The needle pointer type can be changed to a rectangle or arrow to point out or highlight values.

CircularGauge

Pointer cap

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.

CircularGauge

Tail

A tail can be added to the pointer cap to add extra styling.

CircularGauge

Multiple needle pointers

More than one needle pointer can be added to the axes to indicate multiple values.


Range pointer

The range pointer is used to point out the current value from the start value of the circular axes.

CircularGauge

Pointer position

You can change or move the range pointer to any place inside the gauge.

CircularGauge

Multiple pointers

Multiple range pointers can be added inside the axes to indicate multiple progress activity.


Marker pointer

The current value can be pointed out by using the following different types of marker pointers.

CircularGauge

Pointer type

The marker pointer type can be changed to built-in shapes such as a triangle, inverted triangle, square, or circle to highlight values.

CircularGauge

Marker pointer position

You can change or move the marker pointers to any place inside the gauge.


Pointer animation

The circular gauge 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 other.

CircularGauge


Pointer interaction

The circular gauge provides an option to drag the pointer from one place to another. This support allows you to control the pointer by swipe gestures, and change the value at run time.

CircularGauge


Annotation

Any HTML element can be displayed as an annotation at a specific point of interest in the circular gauge. Multiple annotations can be added to a gauge.


Tooltip

The circular gauge provides options to display details about the pointer value through a tooltip when hovering the mouse over the pointer.

CircularGauge


Appearance

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


45+ ESSENTIAL JS 2 CONTROLS

Transform your applications today by downloading our free evaluation versionDownload Free Trial

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.