Search results

Getting Started

This section briefly explains how to include a Linear 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 application using the NuGet Package Manager. Make sure to check the Include prerelease option.
  2. 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.LinearGauge package.

@using Syncfusion.EJ2.Blazor
@using Syncfusion.EJ2.Blazor.LinearGauge

Adding Linear Gauge component to an application

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

<EjsLinearGauge></EjsLinearGauge>

Run the application

After the successful compilation of your application, press F5 to run the application. The Blazor Linear Gauge component will be rendered in the web browser as illustrated in the following screenshot.

Linear Gauge Sample

Set pointer value

You can change the pointer value in the following sample using the Value property in the LinearGaugePointer tag.

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

@using Syncfusion.EJ2.Blazor.LinearGauge

<EjsLinearGauge>
    <LinearGaugeAxes>
        <LinearGaugeAxis>
            <LinearGaugePointers>
                <LinearGaugePointer Value="40">
                </LinearGaugePointer>
            </LinearGaugePointers>
        </LinearGaugeAxis>
    </LinearGaugeAxes>
</EjsLinearGauge>

Linear Gauge with pointer value

Add Linear Gauge title

You can add title to the linear gauge using Title property and you can customize this title using following properties.

@using Syncfusion.EJ2.Blazor.LinearGauge

<EjsLinearGauge Title="Speed calculator">
    <LinearGaugeTitleStyle Color="blue"
                           FontStyle="italic"
                           FontWeight="bold"
                           Size="15px"
                           Opacity="0.8">
    </LinearGaugeTitleStyle>
    <LinearGaugeAxes>
        <LinearGaugeAxis>
            <LinearGaugePointers>
                <LinearGaugePointer Value="40">
                </LinearGaugePointer>
            </LinearGaugePointers>
        </LinearGaugeAxis>
    </LinearGaugeAxes>
</EjsLinearGauge>

Linear gauge with title

Add axis ranges

You can categorize the axis values using the Start and End properties in the LinearGaugeRange. You can add any number of ranges for an axis using LinearGaugeRange.

@using Syncfusion.EJ2.Blazor.LinearGauge

<EjsLinearGauge Title="Speed calculator">
    <LinearGaugeTitleStyle Color="blue"
                           FontStyle="italic"
                           FontWeight="bold"
                           Size="15px"
                           Opacity="0.8">
    </LinearGaugeTitleStyle>
    <LinearGaugeAxes>
        <LinearGaugeAxis>
            <LinearGaugePointers>
                <LinearGaugePointer Value="40">
                </LinearGaugePointer>
            </LinearGaugePointers>
            <LinearGaugeRanges>
                <LinearGaugeRange Start="0" End="30" Color="yellow"></LinearGaugeRange>
                <LinearGaugeRange Start="30" End="60" Color="orange"></LinearGaugeRange>
                <LinearGaugeRange Start="60" End="100" Color="red"></LinearGaugeRange>
            </LinearGaugeRanges>
        </LinearGaugeAxis>
    </LinearGaugeAxes>
</EjsLinearGauge>

Linear gauge with range bar

See also