Search results

Getting started with Blazor Circular Gauge component

08 Apr 2021 / 3 minutes to read

The Blazor Circular Gauge is an ideal component for visualizing numeric values on a circular scale with features like multiple axes, rounded corners, and more.

This section briefly explains how to include a Circular gauge in your Blazor server-side application. Refer to this Getting Started with Syncfusion Blazor for Server-side in Visual Studio 2019 documentation for the introduction and configuring the common specifications.

Importing Syncfusion Blazor Circular gauge component in the application

  1. Install Syncfusion.Blazor.CircularGauge NuGet package in the application by using the NuGet Package Manager.
  2. You can add the client-side resources through CDN or local npm package in the <head> element of the ~/Pages/_Host.cshtml page.
Copied to clipboard
<head>
    <link href="_content/Syncfusion.Blazor.Themes/bootstrap4.css" rel="stylesheet" />
    <!---CDN--->
    @*<link href="https://cdn.syncfusion.com/blazor/18.4.42/styles/bootstrap4.css" rel="stylesheet" />*@
</head>

For Internet Explorer 11 kindly refer the polyfills. Refer the documentation for more information.

Copied to clipboard
<head>
   <link href="https://cdn.syncfusion.com/blazor/18.4.42/styles/bootstrap4.css" rel="stylesheet" />
   <script src="https://github.com/Daddoon/Blazor.Polyfill/releases/download/3.0.1/blazor.polyfill.min.js"></script>
</head>

Adding component package to an application

Open the ~/_Imports.razor file and include the Syncfusion.Blazor.CircularGauge namespace.

Copied to clipboard
@using Syncfusion.Blazor.CircularGauge

Adding SyncfusionBlazor Service in Startup.cs

Open the Startup.cs file and add services required by Syncfusion components using services.AddSyncfusionBlazor() method. Add this method in the ConfigureServices function as follows.

Copied to clipboard
using Syncfusion.Blazor;

namespace BlazorApplication
{
public class Startup
{
    ....
    ....
    public void ConfigureServices(IServiceColloection services)
    {
        ....
        ....
        services.AddSyncfusionBlazor();
    }
}
}

To enable custom client-side source loading from CRG or CDN, please refer to the section about custom resources in Blazor application.

Initializing Circular Gauge component in an application

The Syncfusion Circular gauge component can be initialized in any razor page inside the ~/Pages folder. For example, the Circular gauge component is added to the ~/Pages/Index.razor page. In a new application, if Index.razor page has any default content template, then those content can be completely removed and following code can be added.

Copied to clipboard
@page "/"

<SfCircularGauge>
<CircularGaugeAxes>
    <CircularGaugeAxis>
        <CircularGaugePointers>
            <CircularGaugePointer></CircularGaugePointer>
        </CircularGaugePointers>
    </CircularGaugeAxis>
</CircularGaugeAxes>
</SfCircularGauge>

After the successful compilation of your application, press F5 to run the application. The Blazor Circular gauge component will be rendered in the web browser as shown below.

Circular Gauge Sample

Set pointer value

Pointers are used to indicate values on an axis. You can change the pointer value using the Value property in CircularGaugePointer.

In Circular gauge, you can configure multiple axes. On each axis, you can add a pointer.

Copied to clipboard
<SfCircularGauge>
<CircularGaugeAxes>
    <CircularGaugeAxis>
        <CircularGaugePointers>
            <CircularGaugePointer Value="35">
            </CircularGaugePointer>
        </CircularGaugePointers>
    </CircularGaugeAxis>
</CircularGaugeAxes>
</SfCircularGauge>

Circular Gauge with pointer value

Add title for Circular gauge

Title can be added to the circular gauge to provide a quick information to the users about the context of the rendered circular gauge. You can add a title using Title property in SfCircularGauge.

Copied to clipboard
<SfCircularGauge Title="Speedometer">
<CircularGaugeTitleStyle Color="blue" FontWeight="bold" Size="25"></CircularGaugeTitleStyle>
<CircularGaugeAxes>
    <CircularGaugeAxis>
        <CircularGaugePointers>
            <CircularGaugePointer>
            </CircularGaugePointer>
        </CircularGaugePointers>
    </CircularGaugeAxis>
</CircularGaugeAxes>
</SfCircularGauge>

Circular Gauge with title

Add ranges in the Circular gauge

Range is used to specify a group of scale values in the gauge. We can set the range start and end using Start and End properties in the CircularGaugeRange.

Copied to clipboard
<SfCircularGauge>
<CircularGaugeAxes>
    <CircularGaugeAxis>
        <CircularGaugeRanges>
            <CircularGaugeRange Start="40" End="80">
            </CircularGaugeRange>
        </CircularGaugeRanges>
    </CircularGaugeAxis>
</CircularGaugeAxes>
</SfCircularGauge>

Circular Gauge with custom range

See also