Search results

Getting Started

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

Importing Syncfusion Blazor component in an application

  1. Install Syncfusion.EJ2.Blazor NuGet package in an application using the NuGet Package Manager. Make sure to check the Include prerelease option.
  2. You can add the client-side resources through CDN in the <head> element of the ~/wwwroot/index.html page.
<head>
    <environment include="Development">
        <script src="https://cdn.syncfusion.com/ej2/17.3.29/dist/ej2.min.js"></script>
     </environment>
</head>

Adding component package to an application

Open the ~/_Imports.razor file and import the Syncfusion.EJ2.Blazor.CircularGauge

@using Syncfusion.EJ2.Blazor
@using Syncfusion.EJ2.Blazor.CircularGauge

Adding Circular Gauge component to an application

Now, add the Syncfusion Blazor Circular Gauge component in any web page razor in the Pages folder. For example, the Circular Gauge component is added to the ~/Pages/ Index.razor page.

<EjsCircularGauge></EjsCircularGauge>

Run the application

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

You can change the pointer value in the above sample using the Value property in CircularGaugePointer.

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

<EjsCircularGauge>
    <CircularGaugeAxes>
        <CircularGaugeAxis>
            <CircularGaugePointers>
                <CircularGaugePointer Value="35">
                </CircularGaugePointer>
            </CircularGaugePointers>
        </CircularGaugeAxis>
    </CircularGaugeAxes>
</EjsCircularGauge>

Circular Gauge with pointer value

See also