Linear Gauge Overview

The Kendo UI Linear Gauge widget enables users to quickly understand in what certain range a value lies.

All graphics render on the client by using the Scalable Vector Graphics (SVG) format.

Getting Started

Create the Linear Gauge

To create the Linear Gauge, use a div element and optionally set a height and width by using CSS.

<div id="linear-gauge"></div>

Initialize the Linear Gauge

To initialize the Linear Gauge with its default configuration, use the following example.

   $(document).ready(function() {


Create Horizontal Linear Gauge with Value and Min Value

The following example demonstrates how to create a horizontal Linear Gauge with a value of 20 and a minimum value of 10.

        pointer: {
            value: 20
        scale: {
            min: 10,
            vertical: false

For a detailed list with all configuration options of the Kendo UI Linear Gauge, refer to its JavaScript API.

See Also

Other articles on the Kendo UI Linear Gauge:

In this article
Not finding the help you need? Improve this article