New to Kendo UI for jQuery? Start a free 30-day trial
Color Ranges
Updated on Sep 8, 2026
The ArcGauge enables you to set different colors depending on the current value.
To configure the range colors, set the colors option.
js
$("#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'
}]
});