New to Telerik UI for ASP.NET MVC? Start a free 30-day trial
ASP.NET MVC ArcGauge Overview
The Telerik UI ArcGauge HtmlHelper for ASP.NET MVC is a server-side wrapper for the Kendo UI ArcGauge widget.
The ArcGauge represents a single value within a specified range on a circular arc. The component can be used to visualize metrics such as speed, temperature, or any other scalar quantity.
Initializing the ArcGauge
The following example demonstrates how to define the ArcGauge.
Razor
@(Html.Kendo().ArcGauge()
.Name("arcGauge") // The name of the AcrGauge is mandatory. It specifies the "id" attribute of the HTML element.
.Value(65)
.Scale(x => x.Min(0).Max(100))
.CenterTemplate("#:value#%")
)Basic Configuration
The following example demonstrates a basic configuration of the ArcGauge component with different colors depending on the current value.
Razor
@(Html.Kendo().ArcGauge()
.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");
})
)Functionality and Features
- Scale—You can customize the scale that renders the values, pointers, and labels.
- Colors—Set different colors that will be applied based on the current ArcGauge value.
- Export—Explore the export options of the ArcGauge.