Edit this page

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

Other articles on the Kendo UI Linear Gauge:

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy