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.

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

Initialize the Radial Gauge

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

$(document).ready(function() {


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.

    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: