ASP.NET MVC ArcGauge Overview
The ArcGauge is part of Telerik UI for ASP.NET MVC, a
professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
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.
@(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.
@(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.