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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Trusted by the world’s leading companies

Syncfusion Trusted Companies


The Vue Linear Gauge chart control is ideal for visualizing numeric values over a linear scale. Linear gauge offers creation of cylinder gauge, thermometer, pressure gauge, ruler, KPI and more. All linear gauge elements are rendered using scalable vector graphics (SVG).


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.

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.


To enhance readability, change the position of the default axes in the gauge by setting the offset value for labels, ticks, and axis lines.

Vue linear gauge chart 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 linear gauge can also be customized.

Vue linear gauge chart rendered with multiple axes

Multiple axes

The Vue linear gauge chart allows you to add multiple axes to a gauge to design it like a thermometer, ruler and more.

Vue linear gauge chart rendered with inversed axis

Inverse axis

Values in the linear gauge axes can be reversed.

Range customization

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

Vue linear gauge chart rendered with range

Range position

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

Vue linear gauge chart rendered with modified range width

Range width

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

Vue linear gauge chart rendered with multiple ranges

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

Vue linear gauge chart rendered with marker pointer

Pointer type

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

Vue linear gauge chart rendered with marker pointer in modified position

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.

Vue linear gauge chart rendered with bar pointer

Pointer position

You can change or move the bar pointers to any place inside the gauge graphs.

Vue linear gauge chart rendered with multiple bar pointer

Multiple pointers

You can add more than one bar pointer to the axes to indicate multiple values.

Pointer animation

The Vue 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.

Vue linear gauge chart rendered with animation for pointer

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.

Enabled pointer dragging in Vue linear gauge chart


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

LinearGauge tooltip


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.

Vue linear gauge chart rendered with annotations


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.

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.

Vue linear gauge chart rendered with title

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 illustration

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 illustration


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 illustration

Cross browser support

You can render linear gauge control in all the modern browsers.

Other supported frameworks

Linear gauge can also be used natively in JavaScript, Angular and React frameworks.


Read independent,
authenticated reviews
on G2 Crowd

Download Now Pricing

What do our customers say about us?

Double quotes

We're using the file formats and Windows/JavaScript list controls a lot. They're fast, easy to use, and the documentation is good and contains examples. Tickets with questions or suggestions were answered within a day, so we're happy to use the Syncfusion libraries.
Daniel Persidok

Daniel Persidok

wpd onshore GmbH & Co. KG

Double quotes

Using Syncfusion Angular and JavaScript controls makes front-end web development a piece of cake. Each component has many properties that can be configured as per your desire, methods that can be used to interact with the element, and a lot of events that trigger at different stages, which makes modifying your components according to the state of the application an easy task. Also, their support is amazing! They always offer a sample working project, which makes it very simple to solve your question about your code.
Carlos Rodriguez Garcia

Carlos Rodriguez Garcia


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


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.

Syncfusion Awards
Scroll up icon

Warning Icon 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.Close Icon