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.

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

Initialize the Linear Gauge

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

Example
   $(document).ready(function() {
       $("#linear-gauge").kendoLinearGauge();
   });
</p>

Configuration

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.

Example
    $("#linear-gauge").kendoLinearGauge({
        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

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