ASP.NET Core ArcGauge Overview
The ArcGauge is part of Telerik UI for ASP.NET Core, 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 TagHelper and HtmlHelper for ASP.NET Core are server-side wrappers 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#%")
)
<kendo-arcgauge name="arcGauge" center-template="#:value#%" value="65">
<scale min="0" max="100">
</scale>
</kendo-arcgauge>
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");
})
)
<kendo-arcgauge name="gauge" value="65" center-template="<span style='color: #: color #;'>#: value #%</span>">
<scale min="0" max="100"></scale>
<colors>
<color from="0" to="25" color="#0058e9" />
<color from="25" to="50" color="#37b400" />
<color from="50" to="75" color="#ffc000" />
<color from="75" to="100" color="#f31700" />
</colors>
</kendo-arcgauge>
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.
Next Steps
- Getting Started with the ArcGauge
Basic Usage of the ArcGauge HtmlHelper for ASP.NET Core (Demo)
Basic Usage of the ArcGauge TagHelper for ASP.NET Core (Demo)