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

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.

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

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 the information

close
Dummy