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.
Syncfusion Feedback

JavaScript Gauge Charts Library

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


Axes customization

The gauge axes are circular or linear scales 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. Prefix or suffix text can also be added 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.

Axis line

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

Multiple axes

The gauge charts allow you to add multiple axes to a gauge to design it like a clock, speedometer, thermometer, measurement scale, and more.

Direction

The values in the gauge axes can be reversed.


Range customization

A range in a gauge chart is a visual element that helps to quickly visualize where a value falls on the axis.

Range position

The position of a range can be changed or moved to any place inside the gauge.

Range width

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

Multiple ranges

Multiple ranges can be added inside the axes to show color variations.


Pointer types

Indicate the values on an axis using pointers. The gauge charts control supports three types of pointers: needle, marker, and bar.

Needle pointer

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

CircularGauge pointer

Pointer type

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

CircularGauge cap pointer

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 cap pointer with tail

Tail

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

Multiple pointers in CircularGauge

Multiple needle pointers

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

Marker pointer

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

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.

Marker pointer position

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

Range bar pointer

The bar pointer is used to point to the current value from the start value of the axes.

Pointer position

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

Multiple pointers

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


Pointer animation

The gauge charts 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.


Pointer interaction

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


Arc gauges

The corners of the ranges and range bar pointer in the circular gauge can be rounded.


Orientation

The linear gauge can be positioned in either vertical or horizontal orientation. This is helpful when viewing the gauge on mobile devices.


Containers

The container in linear gauge is used to hold ranges and pointers. The shape of the container can be customized as a rectangle, rounded rectangle, or thermometer.


Annotations

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


Tooltips

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


Appearance

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


50+ JAVASCRIPT CONTROLS

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

Warning Icon 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.Close Icon