The linear gauge control is used to visualize numerical values on an axis in linear manner. All linear gauge elements are rendered using scalable vector graphics (SVG).
The linear gauge can be positioned either in vertical or horizontal orientation. This is helpful when viewing the gauge on mobile devices.
The container is used to hold the ranges and pointers. The shape of the container can be customized as a rectangle, rounded rectangle, or thermometer based on the user requirements.
The gauge axes are 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 desired styles for minor and major ticks by changing their height, width, and color.
To enhance readability, change the default axes positions by setting the offset value for labels, ticks, and axis lines.
A linear border can be added to the gauge using the axis line. The default axis line’s look can be customized.
Multiple axes can be added to the gauge to design it like a thermometer, pressure gauge, measurement scale, and more.
Values in the linear gauge axes can be reversed.
A range in the linear gauge is a visual element that helps to quickly visualize where a value falls on the axis.
The position of the 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.
Multiple ranges can be added inside the axes to show color variations.
Indicate the values on an axis in the linear gauge using pointers. The gauge supports two types of pointers: bar and marker.
The bar pointer is used to point to the current value from the start value of the linear axes.
The current value in the axes can be pointed out by using marker pointers. This pointer type can be changed to built-in shapes such as a triangle, inverted triangle, square, or circle to highlight the values.
The linear gauge provides a visually appealing way to view pointers with animated transitions for a certain duration. Experience smooth pointer transitions by moving the pointer from one value to another.
The linear gauge provides an option to drag the pointer from one value to another. This support allows users to control the pointer with swipe gestures, and change the value at run time.
Any HTML element can be displayed as an annotation at a specific point of interest in the linear gauge. Multiple annotations can be added in a gauge.
The linear gauge 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 a linear gauge, such as axes, ranges, axes intervals, pointer positions, label positions, tick positions, and more can be customized easily.