Configure the Colors of RadialGauge Ranges
Environment
| Product | Progress® Kendo UI® RadialGauge for jQuery |
| Product Version | 2018.2.620 |
Description
How can I configure the colors and range of the Kendo UI RadialGauge?
Solution
- Determine the ranges by using the
scale.rangesproperty of the RadialGauge. - Adjust the colors for each range.
$("#gauge").kendoRadialGauge({
scale: {
...
ranges: [
{
from: 0,
to: 6,
color: "green"
}, {
from: 6,
to: 8,
color: "yellow"
}, {
from: 8,
to: 10,
color: "red"
}
]
}
});
The following example demonstrates how to set the RadialGauge to display a series of ranges with unique colors.
<div id="gauge"></div>
<script>
$(document).ready(function() {
$("#gauge").kendoRadialGauge({
pointer: {
value: 0,
},
scale: {
minorUnit: .25,
startAngle: -30,
endAngle: 210,
max: 10,
labels: {
position: "inside"
},
ranges: [
{
from: 0,
to: 6,
color: "green"
}, {
from: 6,
to: 8,
color: "yellow"
}, {
from: 8,
to: 10,
color: "red"
}
]
}
});
});
</script>
<style>
#gauge {
width: 330px;
height: 330px;
margin: 0 auto 0;
}
</style>