Edit this page

Radial Gauge Overview

The Kendo UI Radial 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 Radial Gauge

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

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

Initialize the Radial Gauge

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

Example
$(document).ready(function() {
    $("#radial-gauge").kendoRadialGauge();
});

Configuration

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

Create Semi- and Quarter-Circle Gauges

The startAngle and endAngle configuration options enable you to create gauges that align with your design goals.

The following example demonstrates how to create a quarter-gauge, oriented to the top-right.

Example
$("#radial-gauge").kendoRadialGauge({
    startAngle: 90,
    endAngle: 180
});

For a real-world example, refer to the Car Dashboard demo.

Multiple Pointers

The Radial Gauge enables you to highlight multiple values by rendering multiple pointers.

You can independently customize each pointer including its current value, color, and length.

Example
<div id="gauge"></div>
<script>
$("#gauge").kendoRadialGauge({
    pointer: [{
        value: 10,
        color: '#ffd246',
        length: 0.5
    }, {
        value: 20,
        color: '#28b4c8',
        length: 0.75
    }, {
        value: 30,
        color: '#78d237',

        // Default length
        // length: 1
    }]
});
</script>

See Also

Other articles on the Kendo UI Radial 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