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

Colors

configuration

The color ranges of the value pointer. The pointer color will be set to the color from the range that contains the current value.

colors

Array

<div id="gauge"></div>
<script>
 $("#gauge").kendoArcGauge({
    value: 30,
    colors: [{
        to: 25,
        color: '#0058e9'
    }, {
        from: 25,
        to: 50,
        color: '#37b400'
    }, {
        from: 50,
        to: 75,
        color: '#ffc000'
    }, {
        from: 75,
        color: '#f31700'
    }]
 });
</script>

colors.color

String

The color of the pointer in the specified range.

<div id="gauge"></div>
<script>
$("#gauge").kendoArcGauge({
    value: 30,
    colors: [{
        to: 50,
        color: '#ff6800'
    }, {
        from: 50,
        color: '#37b400'
    }]
});
</script>

colors.from

Number

The lower range value of the applied color.

<div id="gauge"></div>
<script>
$("#gauge").kendoArcGauge({
    value: 60,
    colors: [{
        from: 0,
        to: 50,
        color: '#0058e9'
    }, {
        from: 50,
        to: 100,
        color: '#f31700'
    }]
});
</script>

colors.to

Number

The upper range value of the applied color.

<div id="gauge"></div>
<script>
$("#gauge").kendoArcGauge({
    value: 30,
    colors: [{
        from: 0,
        to: 50,
        color: '#37b400'
    }, {
        from: 50,
        to: 100,
        color: '#ffc000'
    }]
});
</script>