ASP.NET Core CircularGauge Overview

The CircularGauge 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.

Download Free Trial

The Telerik UI CircularGauge TagHelper and HtmlHelper for ASP.NET Core are server-side wrappers for the Kendo UI CircularGauge widget.

The CircularGauge represents a value on a circular scale. It allows you to visualize numeric values in an attractive manner that matches the other widgets on the page.

• Demo page for the CircularGauge HtmlHelper

• Demo page for the CircularGauge TagHelper

It is essentially very similar to the ArcGauge with the difference that the CircularGauge is a complete circle. There are bigger differences with RadialGauge, however, since the Radial widget is focusing on displaying a value on a scale with the help of a pointer element. Also, setting range colors on the RadialGauge happens for the scale itself, while the color ranges for the CircularGauge happen for the value fill.

Initializing the CircularGauge

1. Create a new action method which renders the view.

   public ActionResult Index()
   {
       return View();
   }
   

2. Add the CircularGauge.

       @(Html.Kendo().CircularGauge()
           .Name("circularGauge") // The name of the CircularGauge is mandatory. It specifies the "id" attribute of the widget.
           .Value(65)
           .Scale(x => x.Min(0).Max(100))
           .CenterTemplate("#:value#%")
       )
   

       <kendo-circulargauge name="circulargauge" value="65" center-template="#:value#%">
           <scale min="0" max="100">
           </scale>
       </kendo-circulargauge>
   

Functionality and Features

• Scale—You can control how the scale of the Circular Gauge renders the values, pointers and labels.
• Colors—The scale of the Circular Gauge can be configured to show different colors for different values.
• Export—You can export the Circular Gauge as an image, SVG, or a PDF file.

Next Steps

• Getting Started with Circular Gauge

• Basic Usage of the CircularGauge HtmlHelper for ASP.NET Core (Demo)

• Basic Usage of the CircularGauge TagHelper for ASP.NET Core (Demo)

See Also

• Using the API of the Circular Gauge for ASP.NET Core (Demo)
• Knowledge Base Section