Edit this page

Radial Gauge Overview

The Kendo UI Radial Gauge widget is used to let users quickly understand where a value lies in a certain range. All graphics are rendered on the client using Scalable Vector Graphics (SVG).

Getting Started

Create the Radial Gauge

Create the Kendo UI Radial Gauge widget by using a simple div and optionally set a height and width via CSS.

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

Initialize the Radial Gauge

Initialize the Radial Gauge with its default configuration as demonstrated in the example below.

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

Configuration

Create Half- and Quarter-Circle Gauges

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

The example below 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 on this functionality, see the car dashboard demo.

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

See Also

Other articles on Kendo UI Radial Gauge: