scale.rangesArray
The ranges of the scale.
Example
<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.fromNumber
The start position of the range in scale units.
Example
<div id="gauge"></div>
<script>
$("#gauge").kendoRadialGauge({
pointer: [{
value: 65
}],
scale: {
ranges: [{
from: 50,
to: 80,
color: "orange"
}]
}
});
</script>scale.ranges.toNumber
The end position of the range in scale units.
Example
<div id="gauge"></div>
<script>
$("#gauge").kendoRadialGauge({
pointer: [{
value: 30
}],
scale: {
ranges: [{
from: 20,
to: 40,
color: "yellow"
}]
}
});
</script>scale.ranges.opacityNumber
The opacity of the range.
Example
<div id="gauge"></div>
<script>
$("#gauge").kendoRadialGauge({
pointer: [{
value: 75
}],
scale: {
ranges: [{
from: 60,
to: 90,
color: "red",
opacity: 0.7
}]
}
});
</script>scale.ranges.colorString
The color of the range. Any valid CSS color string will work here, including hex and rgb.
Example
<div id="gauge"></div>
<script>
$("#gauge").kendoRadialGauge({
pointer: [{
value: 45
}],
scale: {
ranges: [{
from: 30,
to: 60,
color: "#00ff00"
}]
}
});
</script>