Arc Gauge Overview

The Kendo UI Arc Gauge widget displays a value range which is represented by an arc.

All graphics render on the client by using the Scalable Vector Graphics (SVG) format.

Getting Started

Create the Arc Gauge

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

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

Initialize the Arc Gauge

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

$(document).ready(function() {

Center Template

You can customize the content inside the center of the Arc Gauge by using the center template.

To render the center template of an Arc Gauge specify the centerTemplate.

The following example demonstrates how to create a custom center template.

    value: 30,
    centerTemplate: '#: value #%'

Color Ranges

The Arc Gauge enables you to set different colors depending on the current value.

To configure the range colors, set the colors option.

    value: 30,
    colors: [{
        to: 25,
        color: '#0058e9'
    }, {
        from: 25,
        to: 50,
        color: '#37b400'
    }, {
        from: 50,
        to: 75,
        color: '#ffc000'
    }, {
        from: 75,
        color: '#f31700'

Scale Options

The Arc Gauge enables you to customize the options of the scale.

For example, you can change the start and end angle, the appearance of the label and ticks, customize the ranges, and others. For the full list of options, refer to the API reference of the Arc Gauge.

    scale: {
        min: 0,
        max: 100,
        labels: {
            template: "#: value #%",
            position: "outside"
        minorUnit: 10,
        majorUnit: 100

See Also

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