ASP.NET Core CircularGauge Overview

Telerik UI for ASP.NET Core Ninja image

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.

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.

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

See Also

In this article