New to Kendo UI for jQuery? Download free 30-day trial

Color Ranges

The CircularGauge enables you to set different colors for multiple ranges of the value fill depending on the currently active state. The gauge's value fill will take the defined color from the range which matches its completeness.

To configure the range colors, set the colors option.

$("#gauge").kendoCircularGauge({
    value: 30,
    colors: [{
        to: 25,
        color: '#0058e9'
    }, {
        from: 25,
        to: 50,
        color: '#37b400'
    }, {
        from: 50,
        to: 75,
        color: '#ffc000'
    }, {
        from: 75,
        color: '#f31700'
    }]
});

See Also

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