Position the linear gauge either in vertical or horizontal orientation. This is helpful when viewing the gauge on mobile devices.
A container holds the ranges and pointers in linear gauge. Customize the shape of the container as a rectangle, rounded rectangle, or thermometer.
The gauge axes are linear scales where a set of values can be plotted based on any business logic. You can also easily customize the appearance of the axes.
Customize the look and feel of the default labels in the linear gauge by changing the font style, size, and color. Prefix or suffix text can also be added to the labels.
Define the desired style for major ticks and minor ticks in the gauge by changing their height, width, and color.
To enhance readability, change the position of the default axes in the gauge by setting the offset value for labels, ticks, and axis lines.
Add a border to the gauge by using axis lines. The appearance of the default axis in the linear gauge can also be customized.
Values in the linear gauge axes can be reversed.
Change the position of a range or move to any place inside the gauge.
The range width varies based on the values to enhance usage and readability.
You can add multiple ranges inside the axes as a result to show color variations.
Point out the current value by using the following different types of marker pointers.
Change the marker pointer type to built-in shapes such as a triangle, inverted triangle, square, or circle to highlight values.
You can change or move the marker pointers to any place inside the gauge.
Use bar pointer to point the current value from the start value of the axes.
You can change or move the bar pointers to any place inside the gauge.
You can add more than one bar pointer to the axes to indicate multiple values.
Display any HTML element as an annotation at a specific point of interest in the linear gauge. You can also add multiple annotations in a gauge.
The appearance of each element in the linear gauge, such as axes, ranges, axes intervals, pointer positions, label positions, tick positions, and more can be customized easily.
Colors applied to the range and pointer can vary gradually to create a smooth color transition.
Add a title to visualize additional information on the linear gauge. You can also customize the font of the title in the gauge.
The linear gauge control allows you to change its size by setting the width and height. You can also make the gauges to fill its parent container by simply setting the height and width as 100%.
The interactive linear gauge control also support touch interactions.
All the features in linear gauge will work on touch devices with zero configuration. Use the touch features such as tooltip and pointer drag without any customization.
You can view the linear gauge on various devices. It is also possible to hide specific elements in the gauges for particular screen sizes by making a very minimal change in the gauge events.
You can render linear gauge control in all the modern browsers.
The linear gauge component is also available in Blazor, React, Angular, and Vue frameworks. Check out the different linear gauge platforms from the links below,
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.