Circular Gauge Colors

The scale of the Circular Gauge can show different colors for different values. This allows for a diversified usage of the widget. The Colors option accepts a set of ranges with a respective Color option:

    @(Html.Kendo().CircularGauge()
        .Name("gauge")
        .Value(65)
        .Scale(x => x.Min(0).Max(100))
        .CenterTemplate("<span style='color: #: color #;'>#: value #%</span>")
        .Colors(colors =>
        {
            colors.Add().From(0).To(25).Color("#0058e9");
            colors.Add().From(25).To(50).Color("#37b400");
            colors.Add().From(50).To(75).Color("#ffc000");
            colors.Add().From(75).To(100).Color("#f31700");
        })
    )

See Also

• Overview of the Circular Gauge
• Scale of the Circular Gauge