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

Scale.ranges

configuration

The ranges of the scale.

scale.ranges

Array

<div id="gauge"></div>
<script>
$("#gauge").kendoRadialGauge({
    renderAs: "canvas",
    pointer: {
    value: 50
    },
    scale: {
    min: 0,
    max: 100,
    ranges: [{
        from: 10,
        to: 20,
        color: "green"
    }]
    }
});
</script>

scale.ranges.color

String

The color of the range. Any valid CSS color string will work here, including hex and rgb.

<div id="gauge"></div>
<script>
$("#gauge").kendoRadialGauge({
    pointer: [{
        value: 45
    }],
    scale: {
        ranges: [{
            from: 30,
            to: 60,
            color: "#00ff00"
        }]
    }
});
</script>

scale.ranges.from

Number

The start position of the range in scale units.

<div id="gauge"></div>
<script>
$("#gauge").kendoRadialGauge({
    pointer: [{
        value: 65
    }],
    scale: {
        ranges: [{
            from: 50,
            to: 80,
            color: "orange"
        }]
    }
});
</script>

scale.ranges.opacity

Number

The opacity of the range.

<div id="gauge"></div>
<script>
$("#gauge").kendoRadialGauge({
    pointer: [{
        value: 75
    }],
    scale: {
        ranges: [{
            from: 60,
            to: 90,
            color: "red",
            opacity: 0.7
        }]
    }
});
</script>

scale.ranges.to

Number

The end position of the range in scale units.

<div id="gauge"></div>
<script>
$("#gauge").kendoRadialGauge({
    pointer: [{
        value: 30
    }],
    scale: {
        ranges: [{
            from: 20,
            to: 40,
            color: "yellow"
        }]
    }
});
</script>