Gauge charts enables you to create multiple gauge representation using radial and linear gauges to visual a numerical value. Radial gauge offers creation of speedometer, meter gauge, multi axes clock, modern activity gauge, direction compass etc. Linear gauge offers creation of cylinder gauge, thermometer, ruler, KPI and other linear scales.
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.
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.
Define the desired style for minor and major ticks by changing their height, width, and color.
To enhance readability, the position of the default axes can be changed by setting the offset value for labels, ticks, and axis lines.
Add a border to the gauge by using axis lines. The default axis line appearance can also be customized.
The gauge charts allow you to add multiple axes to a gauge to design it like a clock, speedometer, thermometer, measurement scale, and more.
A range in a gauge chart is a visual element that helps to quickly visualize where a value falls on the axis.
The position of a range can be changed or moved to any place inside the gauge.
The range width varies based on the values to enhance usage and readability.
Indicate the values on an axis using pointers. The gauge charts control supports three types of pointers: needle, marker, and bar.
The current value in the radial gauge can be pointed out by using a highly customizable needle-type element.
The needle pointer type can be changed to a rectangle 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.
A tail can be added to the pointer cap to add extra styling.
More than one needle pointer can be added to the axes to indicate multiple values.
The current value can be pointed out by using the following different types of marker pointers.
The bar pointer is used to point to the current value from the start value of the axes.
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.
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.
The corners of the ranges and range bar pointer in the circular gauge can be rounded.
The linear gauge can be positioned in either vertical or horizontal orientation. This is helpful when viewing the gauge on mobile devices.
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.
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.
The gauge charts control provides options to display details about the pointer value through a tooltip when hovering the mouse over the pointer.
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.