Hi everyone, Welcome to this video on how to get started with the Blazor circular gauge of Syncfusion.
In general, the circular gauges are used for visualizing the numericmeasurements in a circular scale.
It usually has one ormore pointers to indicate a specific value on the scale.
Look at this online example.
Here you can see the blazor circular gauge displayed with different elements like pointer, labels and ticks.
Now I’m going to show you how to add such Blazor Circular 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 project templates 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 shown in the above YouTube card.
Now I will tell you the steps to add blazor circular gauge.
To start using the Syncfusion blazor circular gauge, first I need to install the Syncfusion nuget package into my application.
For that I will open the Nuget Package Manager by right clicking the project and choose the option Manage Nuget Packages.
Then I’ll search for Syncfusion Blazor in the browse tab and install it into my project.
Once the installation getscompleted, let me navigate to Imports.
And here I will add Syncfusion Blazor Circular Gauge namespace to start using the blazor circular gauge in any of the components available under the pages folder.
Next I will open the Startup.
cs file and here I will add Syncfusion Blazor namespace.
Then I will register the Syncfusion Blazor service by calling a method Add SyncfusionBlazor within the Configure Services method.
Also, I should register valid license key into my application.
Solet me register the trial license key using the RegisterLicense method.
Now everything is configured, so let me start to add the blazor circular gauge.
For that I need to open the Index.
razor component and here I will include the tag SfCircularGauge by replacing the default code.
Now I’m going to run this example.
So here you cansee the circular gauge rendered with default elements like pointer, labels and ticks.
Here you can see the start and end angle of the axis starting at 200 and ending at 160 degree, as the circle is drawn from top like this.
Also, you cancustomize these axis angles by setting custom values toit using the start angle and in end angle properties.
To set custom angles, I need to define CircularGaugeAxes tag which is of type array and can contain n number of CircularGaugeAxis definitions inside it.
As a gauge holds single axis so I will define a single CircularGaugeAxis tag within the circular gauge axes tag.
Now I’m going to define the properties StartAngle and EndAngle with the value 270 and 90 degrees respectively.
When you look at the circular gauge now the axis is starting at 270 degree and ending at 90degree.
By default the radius of the axis will be based on the available screen size.
In case if I would like to set custom radius for the axis, then I need to use radiusproperty of circular gauge.
To set different radius value for the axis, I will define the property radius and set its value as 200 within the CircularGaugeAxis tag.
Here I have set the radius value in pixel.
So now you can see the blazor circular gauge rendered with 200 pixel radius axis.
Here default pointer value is 0.
In case if I would like to display the pointer value at 40, then I may need to set the value property to circular gauge.
To set new value to this pointer I need to define the CircularGaugePointers tag which is of type array and can contain n number of CircularGaugePointer definitions inside it.
Currently the gauge holds asingle pointer element, so I will define a single CircularGaugePointer tag with the property Value inside the CircularGaugePointers tag.
For this Value property, I will set its value as 40 as I’m going to show the pointer value at 40 in the circular scale.
Along with this, I have alsoplanned to set custom radius for circular gauge pointer cap.
So let me define CircularGaugeCap tag and set its radius as 15.
See the output now, the circular gauge displays the pointer value at 40.
Now I’m going to show you how to set ranges for the axis.
To set ranges for axis, first I need to define CircularGaugeRanges tag which is of type array and can contain n number of CircularGaugeRange tag definitions inside it.
Now I have planned to add asingle range, so let me define a single CircularGaugeRange tag within the CircularGaugeRanges tag.
Then I will define Start and End properties with the value 40 and 80 respectively.
Look at the circular gauge, now the range is added between the values 40 and 80 on the circular scale.
By default, you can notice that the labels are placed inside the axis with the offset value 5.
In case if I would like todisplay the labels outside the axis, then I need to make use of the Position property.
To change the label position, first I need to define CircularGaugeAxisLabelStyle tag and set its Position as outside.
So here you can see the circular gauge, the labels are placed outside the axis.
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 Syncfusion Blazor Circular Gauge component in the server app.
Also, we have seen how to change the axis pointer value, start angle and end angle as well as the axis radius.
Finally, we have alsoseen how to modify the label position and start and end rangeof an axis.
If you would like to see theworking 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 acomplete Placer products if we fit into a community guidelines.
So take the link given in thedescription part to know if you’re eligible for using a community license.
Also, if youfind this video as useful, don’t forget to click the like buttonand subscribe to a channel to watch more videos like this.
Thanks for watching this video.