Overview
The HTML5 JavaScript Linear Gauge is an ideal control for visualizing numeric values in a linear scale with features like multiple axes, different orientations, and more. Completely customize the appearance of the gauge to simulate a thermometer, pressure gauge, ruler, etc.
Orientation
Position the linear gauge either in vertical or horizontal orientation. This is helpful when viewing the gauge on mobile devices.
JavaScript linear gauge chart rendered in vertical orientation
JavaScript linear gauge chart rendered in horizontal orientation
Previous
Next
Containers
A container holds the ranges and pointers in linear gauge. Customize the shape of the container as a rectangle, rounded rectangle, or thermometer.
JavaScript linear gauge chart rendered with rectangle container
JavaScript linear gauge chart rendered with rounded rectangle container
JavaScript linear gauge chart rendered with thermometer container
Previous
Next
Axes customization
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.
Label customization
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.
Ticks customization
Define the desired style for major ticks and minor ticks in the gauge by changing their height, width, and color.
Offset
To enhance readability, change the position of the default axes in the gauge by setting the offset value for labels, ticks, and axis lines.
Axis line
Add a border to the gauge by using axis lines. The appearance of the default axis in the linear gauge can also be customized.
Multiple axes
The JavaScript linear gauge chart allows you to add multiple axes to a gauge to design it like a thermometer, ruler and more.
Inverse axis
Values in the linear gauge axes can be reversed.
Range customization
A range in an HTML5 JavaScript linear gauge chart is a visual element that helps to quickly visualize where a value falls on the axis.
Range position
Change the position of a range or move to any place inside the gauge.
Range width
The range width varies based on the values to enhance usage and readability.
Multiple ranges
You can add multiple ranges inside the axes as a result to show color variations.
Pointer types
Indicate the values on an axis using pointers. The HTML5 JavaScript linear gauge chart control supports two types of pointers: marker, and bar.
Marker pointer
Point out the current value by using the following different types of marker pointers.
Pointer type
Change the marker pointer type 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.
Bar pointer
Use bar pointer to point 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 graphs.
Multiple pointers
You can add more than one bar pointer to the axes to indicate multiple values.
Pointer animation
The HTML5 JavaScript linear gauge chart 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 interactive linear gauge chart control provides an option to drag the pointer from one place to another. Control the pointer with swipe gestures and change the value at runtime.
Tooltips
The interactive HTML5 JavaScript linear gauge chart control provides options to display details about the pointer value through a tooltip when hovering the mouse over the pointer.
Annotations
Display any HTML element as an annotation at a specific point of interest in the linear gauge chart. You can also add multiple annotations in a gauge.
Appearance
The appearance of each element in the linear gauge chart, such as axes, ranges, axes intervals, pointer positions, label positions, tick positions, and more can be customized easily.
JavaScript linear gauge chart rendered with customized appearance
JavaScript linear gauge chart rendered with customized appearance
JavaScript linear gauge chart rendered with customized appearance
Previous
Next
Gradient color
Colors applied to the range and pointer can vary gradually to create a smooth color transition.
Gauge title
Add a title to visualize additional information on the linear gauge chart. You can also customize the font of the title in the gauge.
Width and Height
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%.
Touch and Browser support
The interactive linear gauge control also support touch interactions.
Touch support
All the features in linear gauge chart will work on touch devices with zero configuration. Use the touch features such as tooltip and pointer drag without any customization.
Responsive
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.
Cross browser support
You can render linear gauge control in all the modern browsers.
Other supported frameworks
The Linear Gauge Chart component is also available in Blazor, React, Angular, and Vue frameworks. Check out the different Linear Gauge Chart platforms from the links below,