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. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Trusted by the world’s leading companies

Syncfusion Trusted Companies

Overview

The Blazor Linear Gauge is an ideal component for visualizing numeric values on a linear scale with features like multiple axes and orientations. Completely customize the appearance of the gauge to simulate a thermometer, pressure gauge, ruler, etc.


Orientation

Position the Blazor Linear Gauge either vertically or horizontally. This is helpful when viewing the gauge on mobile devices.


Containers

A container holds the ranges and pointers in a Blazor Linear Gauge. Customize the shape of the container to a rectangle, rounded rectangle, or thermometer.


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 Blazor 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 styles for major 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.

Blazor Linear Gauge rendered with customized axis line.

Axis line

Add a border to the gauge by using axis lines. The appearance of the default axis in the Blazor Linear Gauge can also be customized.

Blazor Linear Gauge rendered with multiple axes.

Multiple axes

The Blazor Linear Gauge allows you to add multiple axes to a gauge to design it like a thermometer, ruler, and more.

Blazor Linear Gauge rendered with inversed axis.

Inverse axis

Values in Blazor Linear Gauge axes can be reversed.


Range customization

A range in a Blazor Linear Gauge is a visual element that helps to visualize where a value falls on the axis quickly.

Blazor Linear Gauge rendered with a range.

Range position

Change the position of a range or move it to any place inside the gauge.

Blazor Linear Gauge rendered with modified range width.

Range width

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

Blazor Linear Gauge rendered with multiple ranges.

Multiple ranges

Add multiple ranges to the axis to show color variations.


Pointer types

Indicate the values on an axis using pointers. The Blazor Linear Gauge component supports two types of pointers: marker and bar.

Marker pointer

Point out the current value by using the following types of marker pointers.

Blazor Linear Gauge rendered with marker pointer.

Pointer type

Change the marker pointer type to built-in inverted triangle, square, or circle shapes to highlight a value.

Blazor Linear Gauge rendered with marker pointer in modified position.

Marker pointer position

Change or move the marker pointers to any place inside the gauge.

Blazor Linear Gauge rendered with text pointer.

Text pointer

Change the marker pointer type to text to indicate the axis value.

Bar pointer

Use a bar pointer to point to the current value from the start value of the axis.

Blazor Linear Gauge rendered with bar pointer.

Pointer position

Change or move the bar pointers to any place inside the gauge graphs.

Blazor Linear Gauge rendered with multiple bar pointer.

Multiple pointers

Add more than one bar pointer to the axis to indicate multiple values.


Pointer animation

The Blazor Linear Gauge component is visually appealing with animated transitions. Experience smooth pointer transitions by moving the pointer from one place to another.

Blazor Linear Gauge rendered with animation for pointer.


Pointer interaction

The interactive Blazor Linear Gauge component provides an option to drag the pointer from one place to another. Swipe gestures are used to control the pointer, and the value is changed at runtime.

Enabled pointer dragging in Blazor Linear Gauge.


Tooltip

The interactive Blazor Linear Gauge displays details about the pointer value when the tooltip hovers over the pointer.

Blazor Linear Gauge tooltip.


Annotations

Display any HTML element as an annotation at a specific point of interest in the Linear Gauge. You can add multiple annotations in a gauge.

Blazor Linear Gauge rendered with annotations.


Appearance

The appearance of each element in the Blazor Linear Gauge, such as axes, ranges, axes intervals, pointer positions, label positions, and tick positions can be customized easily.


Gradient color

Colors applied to the range and pointer can change gradually to create a smooth color transition.

Blazor Linear Gauge rendered with gradient support.


Gauge title

Add a title to visualize additional information on the Linear Gauge. You can customize the font of the title.

Blazor Linear Gauge rendered with a title.


Touch and browser support

The interactive Linear Gauge component also supports touch interactions.

Touch illustration in Blazor Linear Gauge.

Touch support

All the features in the Blazor Linear Gauge will work on touch devices with zero configuration. Use the touch features such as tooltip and pointer drag without any customization.

Responsive illustration in Blazor Linear Gauge.

Responsive design

You can view the Blazor 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 illustration in Blazor Linear Gauge.

Cross-browser support

You can render the Blazor Linear Gauge component in all the modern browsers.


Other supported frameworks

The Linear Gauge is also available in our JavaScript, Angular, React, and Vue frameworks, which were built from their own TypeScript libraries:



Blazor Components – 85+ UI and DataViz Components

Our Customers Love Us

Having an excellent set of tools and a great support team, Syncfusion reduces customers’ development time.
Here are some of their experiences.

Rated by users across the globe

Transform your applications today by downloading our free evaluation version Download Free Trial

Awards

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.

Up arrow icon
Live Chat Icon For mobile