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.

Overview

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).


Orientation

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


Container

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.


Axes customization

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.

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.

Tick customization

Define desired styles for minor and major ticks by changing their height, width, and color.

Offset

To enhance readability, change the default axes positions by setting the offset value for labels, ticks, and axis lines.


LinearGauge

Axis line

A linear border can be added to the gauge using the axis line. The default axis line’s look can be customized.

LinearGauge

Multiple axes

Multiple axes can be added to the gauge to design it like a thermometer, pressure gauge, measurement scale, and more.

LinearGauge

Inverse axes

Values in the linear gauge axes can be reversed.


Range customization

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

LinearGauge

Range position

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

LinearGauge

Range width

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

LinearGauge

Multiple ranges

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


Pointer types

Indicate the values on an axis in the linear gauge using pointers. The gauge supports two types of pointers: bar and marker.

LinearGauge

Bar pointer

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

LinearGauge

Marker pointer

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.


Pointer animation

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.

LinearGauge


Pointer interaction

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.

LinearGauge


Annotation

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.

LinearGauge


Tooltip

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

LinearGauge


Appearance

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.


45+ ESSENTIAL JS 2 CONTROLS

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

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.