Search results

Getting started with Blazor Linear Gauge component

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

Importing Syncfusion Blazor component in an application

Install Syncfusion.Blazor NuGet package in application using the NuGet Package Manager.

Please ensure to check the Include prerelease option for our Beta release.

Adding component package to the application

Open the ~/_Imports.razor file and import the Syncfusion.Blazor.LinearGauge package.

@using Syncfusion.Blazor.LinearGauge

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.

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. you need to disable resource loading by AddSyncfusionBlazor(true) and load the scripts in the HEAD element of the ~/Pages/Host.cshtml page

    <head>
        <environment include="Development">
            <script src="https://cdn.syncfusion.com/blazor/18.1.54/syncfusion-blazor.min.js">
            </script>
        </environment>
    </head>

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.

<SfLinearGauge>
</SfLinearGauge>

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.Blazor.LinearGauge

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

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.Blazor.LinearGauge

<SfLinearGauge 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>
</SfLinearGauge>

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.Blazor.LinearGauge

<SfLinearGauge 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>
</SfLinearGauge>

Linear gauge with range bar

See also