New to Kendo UI for jQuery? Start a free 30-day trial
Color Ranges
Updated on Dec 10, 2025
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'
}]
});