Hi everyone, Welcome to this video on how to get started with the Blazor linear gauge of Syncfusion.

In general, the linear gauges are used for visualizing the numeric measurements in ahorizontal or vertical scale.

It usually has one or morepointers to indicate a specific value on the scale.

Look at this online example.

Here you can see the Blazor  linear gauge displayed with different elements like axis line, pointer, labels and ticks.

Now I’m going to show you how to add such Blazor linear gauge of Syncfusion to a Blazor Server App using Visual Studio 2019 with these elements.

So let me start with the Blazor application creation process.

For that I need to make sure whether.

NET Core SDK 3.


2 or later versions are installed in my machine and I should have Visual Studio Codeor Visual Studio 2019 to create a Blazor application.

In this tutorial I’m going to create a new server side Blazor  app, so let me open the VisualStudio 2019 first and create a new project from the dashboard.

From the list of projecttemplates I will choose Blazor App and click Next to proceed further with the project creation.

Here I will name my project as BlazorExample and click the Create button.

Next I will choose this Blazor Server App option and click this Create button finally to complete the project creation.

Now the project has been createdand ready to use.

If you want to know more about the Blazor server app and how to add Syncfusion components to it then you can listen to the video link that is shownin the above YouTube card.

Now I will tell you the steps to add Blazor linear gauge.

To start using the Syncfusion Blazor linear gauge, first I need to install the Syncfusion Blazor Nuget package into my application.

For that I will open nuget package manager by right clicking theproject and choose the option Manage Nuget Packages.

Then I will search for Syncfusion Blazor in the browse tab and install itinto my project.

Once the installation getscompleted, let me navigate to Imports.

razor file and here I will add Syncfusion Blazor  LinearGauge namespace to start using the Blazor linear gauge in any of the components availableunder the pages folder.

Next I will open the Startup.

cs file and here I will add the Syncfusion.

Blazor namespace.

Then I will register the Syncfusion Blazor service by calling a method AddSyncfusionBlazor within the ConfigureServices method.

Also, I should register validlicense key into my application.

So let meregister trial license key using the RegisterLicense method.

Now everything is configured, so let me start to add the Blazor  linear gauge.

For that I need to open the Index.

razor component and here I will include the tag SfLinearGauge by replacing the default code.

Now I’m going torun this example.

Here you can see the Blazor linear gauge displayed with different elements like axis line, pointer, labels and ticks.

By default, the axis line height will be based on base element’s height and default width will be 2 pixel.

Suppose if I would like to setcustom height and width to the axis line, then I can make use of height and width properties of the lineargauge.

To set custom height and width to the axis line, first I need to define the LinearGaugeAxes tag which is of type array and can contain n number of Linear GaugeAxis definitions inside it.

Since the gauge holds a single axis, so let me define a single LinearGaugeAxis tag.

Then to customize the axis line height and width, I need to define the LinearGaugeLine tag and set custom height and width to it.

Along with this, I will also set color for the axis line so that I can display the axis line in different color.

So now you can see the linear gauge the axis line is displayed with custom height and width.

Also, you can notice that the axis line is shown in blue color.

Here the default pointer valueszero.

In case if I would like to display the pointer value at 80, then I may need to set the value property to linear gauge.

To set new value to this pointer I need to define the Linear GaugePointers tag which is of type array and can contain n number of LinearGaugePointer definitions inside it.

Currently this linear gaugeholds a single pointer element, so I will define a single Linear GaugePointer tag with the property Value inside the linear gauge pointers tag.

For this Value property, I will set the value as 80 as I’m going to show the pointer value 80 in the linear scale.

See the output now, the linear gauge displays the pointer value at 80.

Next I will proceed toshow you how to set ranges for the axis.

To set ranges for the access, first I need to define Linear GaugeRanges tag which is of type array and can contain n number of LinearGaugeRange definitions inside it.

As I have planned to add a single range to this linear gauge, therefore I’m going to define a single LinearGaugeRange tag within this LinearGaugeRanges tag.

Then I will define Start and End properties with the value 30 and 60 respectively.

Look at the linear gauge, now the range is added between the values 30 and 60 on the axis scale.

Now I will proceed to show youhow to add multiple ranges to the linear gauge and displaythem with different colors.

To add another axis range, I need to define one more  LinearGaugeRange  tag within this LinearGaugeRanges tag.

Now I’m going to set the range from 60 to 100, so let me define Start and End properties with the value 60 and 100 respectively.

Along with this, Iwill also set color for the axis range to display this axis range in different color.

When you look at the lineargauge now, the newly added ranges shown from 60 to 100 in green color.

Next, look at the labels here, that displays numeric values by default.

Suppose if I wouldlike to display the customized it takes labelhere, say for example in degrees Celsius, then Ishould make use of the format property.

To set such custom format, I need to define LinearGaugeAxisLabelStyle tag within the linear gauge axis tag.

Then I will define Format property and set a customized to value to it with an additionalsuffix degree Celsius.

So now you can see thelinear gauge labels displaying the values indegrees Celsius format.

Now let me make a quick recap ofwhat we have seen so far.

We have seen how to create a Blazor project using Visual Studio 2019 and added as Syncfusion Blazor Linear Gauge component in the server app.

Also, we have seen how to change the axis pointer value and how to set custom height and width to the axis line.

Finally, we have also seenhow to add multiple ranges to the axis.

If you would like to see the working of this example, you can download it from the GitHub link, which is shared in the description part below.

You canalso grab your chance of getting free license key to use a complete Blazor products if you fit into a community guidelines, so check the link given in the description part to know ifyou’re eligible for community license.

Also, if you find thisvideo as useful, don’t forget to click the like button andsubscribe to a channel to watch more videos like this.

Thanks for watching this video.

Leave a Reply