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'
}]
});