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.

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

Initialize the Radial Gauge

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

$(document).ready(function() {


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.

    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.

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

        // Default length
        // length: 1

See Also

In this article
Not finding the help you need? Improve this article