Everything You Need to Know About .NET MAUI Radial Gauge Control
Tags: dotnet, csharp, mobile, android
Published: 2021-12-29 12:59:15

---
title: Everything You Need to Know About .NET MAUI Radial Gauge Control
published: true
date: 2021-12-29 11:16:56 UTC
tags: dotnet, csharp, mobile, android
canonical_url: https://www.syncfusion.com/blogs/post/dotnet-maui-radial-gauge-control.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cko1u932y2drt3n3sqq7.png
---

The [.NET MAUI Radial Gauge](https://www.syncfusion.com/maui-controls/maui-radial-gauge "Link to .NET MAUI Radial Gauge") control is a multi-purpose data visualization control. It displays numerical values on a circular scale. Its rich feature set includes axes, ranges, pointers, and annotations that are fully customizable and extendable. You can use this control to design speedometers, temperature monitors, sleep trackers, circular progress indicators, watches, compasses, and more.

![.NET MAUI Radial Gauge](https://www.syncfusion.com/blogs/wp-content/uploads/2021/12/NET-MAUI-Radial-Gauge.png)
<figcaption>.NET MAUI Radial Gauge</figcaption>

Let’s explore the following features of our .NET MAUI Radial Gauge control:

- [Axes](#radial-axis)
- [Ranges](#radial-range)
- [Pointers](#pointers)
- [Annotations](#annotation)
- [Pointer animations](#pointer-animation)
- [Initial loading animation](#initial-loading-animation)
- [Pointer interactions](#pointer-interaction)

## Radial axis

The [radial axis](https://help.syncfusion.com/maui/radialgauge/axes "Documentation link to Axis in .NET MAUI Radial Gauge") is a circular arc in which values are displayed along a linear or custom scale. You can add any number of axes inside the Radial Gauge.

You can customize the radial axis elements to enhance axis readability and usability. Change scale ranges, labels, label rotation, label style, tick style, inversed axes, outside axis position, and the background frame.

![Axis Customization in .NET MAUI Radial Gauge](https://www.syncfusion.com/blogs/wp-content/uploads/2021/12/Axis-Customization-in-.NET-MAUI-Radial-Gauge-1.png)
<figcaption>Axis Customization in .NET MAUI Radial Gauge</figcaption>

## Radial range

The [radial range](https://help.syncfusion.com/maui/radialgauge/ranges "Documentation link to Radial Range in the .NET MAUI Radial Gauge") is a color element that helps quickly visualize where a value falls on an axis. You can add any number of ranges inside a radial axis. Customize the range direction, position, and start and end widths, and annotate the text in annotations to improve readability.

![Range Customization in .NET MAUI Radial Gauge](https://www.syncfusion.com/blogs/wp-content/uploads/2021/12/Range-Customization-in-.NET-MAUI-Radial-Gauge-1.png)
<figcaption>Range Customization in .NET MAUI Radial Gauge</figcaption>

## Pointers

Pointers indicate values on the radial axis. The Radial Gauge supports three types of pointers:

- Needle pointer
- Marker pointer
- Range pointer

You can customize all these pointers as needed.

In the [needle pointer](https://help.syncfusion.com/maui/radialgauge/needle-pointer "Documentation link to Needle Pointer in .NET MAUI Radial Gauge"), one end of the needle is positioned at the middle of the Radial Gauge, and the other endpoints to the value on the radial axis. We can easily customize the knob and tail elements in the needle pointer to enhance the pointer appearance.

The [marker pointer](https://help.syncfusion.com/maui/radialgauge/marker-pointer "Documentation link to Marker Pointer in .NET MAUI Radial Gauge") is used to indicate a value with built-in shapes, such as a circle, diamond, triangle, inverted triangle, or rectangle. You can also use custom marker elements such as images, icons, or shapes using the marker template support.

The [range pointer](https://help.syncfusion.com/maui/radialgauge/range-pointer "Documentation link to Range Pointer in .NET MAUI Radial Gauge") is an arc element used to indicate the current value relative to the starting value of the radial axis. You can customize the pointer corner style to be rounded or curved and change its position.

![Pointer Customization in .NET MAUI Radial Gauge](https://www.syncfusion.com/blogs/wp-content/uploads/2021/12/Pointer-Customization-in-.NET-MAUI-Radial-Gauge.png)
<figcaption>Pointer Customization in .NET MAUI Radial Gauge</figcaption>

## Annotation

You can add multiple types of content, such as text, images, and other custom content, as annotations inside the control. You can also customize the position of the annotations inside the gauge.

![Annotation Customization in .NET MAUI Radial Gauge](https://www.syncfusion.com/blogs/wp-content/uploads/2021/12/Annotation-Customization-in-.NET-MAUI-Radial-Gauge.png)
<figcaption>Annotation Customization in .NET MAUI Radial Gauge</figcaption>

## Pointer animation

You can animate the pointer in a visually appealing way when it moves from one value to another. Also, customize the animation with various easing options and duration.

![Pointer Animation in .NET MAUI Radial Gauge](https://www.syncfusion.com/blogs/wp-content/uploads/2021/12/Pointer-Animation-in-.NET-MAUI-Radial-Gauge.gif)
<figcaption>Pointer Animation in .NET MAUI Radial Gauge</figcaption>

## Initial loading animation

The .NET MAUI Radial Gauge allows us to animate all of its elements on initial loading. We can control the animation duration based on the elements count.

![Initial Loading Animation in .NET MAUI Radial Gauge](https://www.syncfusion.com/blogs/wp-content/uploads/2021/12/Initial-Loading-Animation-in-.NET-MAUI-Radial-Gauge.gif)
<figcaption>Initial Loading Animation in .NET MAUI Radial Gauge</figcaption>

## Pointer interaction

Drag a pointer from one value to another to change the value at the run time. We can also select discrete values while dragging the pointer.

Refer to the following GIF image.

![Interacting With Pointer in .NET MAUI Radial Gauge](https://www.syncfusion.com/blogs/wp-content/uploads/2021/12/Interacting-With-Pointer-in-.NET-MAUI-Radial-Gauge.gif)
<figcaption>Interacting With Pointer in .NET MAUI Radial Gauge</figcaption>

## Add the .NET MAUI Radial Gauge to your application

Let’s see how to create a simple .NET MAUI app with the Radial Gauge control to demonstrate its basic usage.

### Step 1: Create a .NET MAUI app.

First, [create a new .NET MAUI app](https://docs.microsoft.com/en-us/dotnet/maui/get-started/first-app "Link to Build your first .NET MAUI app") in [Visual Studio](https://visualstudio.microsoft.com/ "Link to Visual Studio").

### **Step 2: Install the NuGet packages.**

The Syncfusion .NET MAUI controls are available in [nuget.org](https://www.nuget.org/packages/Syncfusion.Maui.Gauges/19.3.59-preview "Link to the Syncfusion.Maui.Gauges NuGet package"). To add SfRadialGauge to your project, open the NuGet package manager in Visual Studio. Search for **Syncfusion.Maui.Gauges** and then install it.

### Step 3: Import the namespace.

Then, import the control namespace **Syncfusion.Maui.Gauges** in your XAML or C# code.

```html
xmlns:gauge="clr-namespace:Syncfusion.Maui.Gauges;assembly=Syncfusion.Maui.Gauges"
```

### Step 4: Initialize the Radial Gauge.

Now, initialize the SfRadialGauge control.

```html
<gauge:SfRadialGauge />
```

### Step 5: Handler registration.

The **Syncfusion.Maui.Core** NuGet package is a dependent package for all our Syncfusion .NET MAUI controls. In the **MauiProgram.cs** file, register the handler for Syncfusion core using the **ConfigureSyncfusionCore()** method.

```csharp
public static MauiApp CreateMauiApp() 
     {
	var builder = MauiApp.CreateBuilder();
	builder
	     .UseMauiApp<App>()
	     .ConfigureSyncfusionCore()
	     .ConfigureFonts(fonts =>
	     {
		 fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
	      });

	return builder.Build();
      }
```

### Step 6: Add an axis to the Radial Gauge.

Axes contain a list of axis elements, and we can add any number of radial axes inside the gauge. Specify the minimum and maximum values of the axis using the [Minimum](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Gauges.RadialAxis.html#Syncfusion_Maui_Gauges_RadialAxis_Minimum "Link to the Minimum property of .NET MAUI Radial Gauge") and [Maximum](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Gauges.RadialAxis.html#Syncfusion_Maui_Gauges_RadialAxis_Maximum "Link to the Maximum property of .NET MAUI Radial Gauge") properties, respectively.

Refer to the following code example.

```html
<gauge:SfRadialGauge>
    <gauge:SfRadialGauge.Axes>
         <gauge:RadialAxis Minimum="0" Interval="10"
                           Maximum="150" />
    </gauge:SfRadialGauge.Axes>
</gauge:SfRadialGauge>
```

### Step 7: Add a range to the Radial Gauge.

Ranges contain a list of range elements, and we can add any number of ranges inside the axis. Specify the start value, end value, and color for a range using the [StartValue](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Gauges.RadialRange.html#Syncfusion_Maui_Gauges_RadialRange_StartValue "Link to the StartValue property of .NET MAUI Radial Gauge"), [EndValue](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Gauges.RadialRange.html#Syncfusion_Maui_Gauges_RadialRange_EndValue "Link to the EndValue property of .NET MAUI Radial Gauge"), and [Fill](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Gauges.RadialRange.html#Syncfusion_Maui_Gauges_RadialRange_Fill "Link to the Fill property of .NET MAUI Radial Gauge") properties, respectively.

Refer to the following code example.

```html
<gauge:SfRadialGauge>
    <gauge:SfRadialGauge.Axes>
        <gauge:RadialAxis Minimum="0" Interval="10"
                          Maximum="150" >
              <gauge:RadialAxis.Ranges>
                  <gauge:RadialRange StartValue="0"
                                     EndValue="50"
                                     Fill="Red" />
                  <gauge:RadialRange StartValue="50"
                                     EndValue="100"
                                     Fill="Orange" />
                  <gauge:RadialRange StartValue="100"
                                     EndValue="150"
                                     Fill="Green" />
              </gauge:RadialAxis.Ranges>
        </gauge:RadialAxis>
   </gauge:SfRadialGauge.Axes>
</gauge:SfRadialGauge>
```

### Step 8: Add a pointer to the Radial Gauge.

Pointers contain a list of pointer elements, and we can add any kind of gauge pointer such as a NeedlePointer, RangePointer, and MarkerPointer inside the axis to indicate the value.

In this example, we will add the NeedlePointer to denote the value using the [Value](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Gauges.RadialPointer.html#Syncfusion_Maui_Gauges_RadialPointer_Value "Link to the Value property of .NET MAUI Radial Gauge") property.

```html
<gauge:SfRadialGauge>
   <gauge:SfRadialGauge.Axes>
       <gauge:RadialAxis Minimum="0" Interval="10"
                         Maximum="150" >
        ...
            <gauge:RadialAxis.Pointers>
                 <gauge:NeedlePointer Value="90" />
            </gauge:RadialAxis.Pointers>
       </gauge:RadialAxis>
   </gauge:SfRadialGauge.Axes>
</gauge:SfRadialGauge>
```

### Step 9: Add annotations to the Radial Gauge.

You can add any type of content, such as text or images, as an annotation inside the axis. You can customize the position of annotations using the [DirectionUnit](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Gauges.GaugeAnnotation.html#Syncfusion_Maui_Gauges_GaugeAnnotation_DirectionUnit "Link to the DirectionUnit property of .NET MAUI Radial Gauge"), [DirectionValue,](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Gauges.GaugeAnnotation.html#Syncfusion_Maui_Gauges_GaugeAnnotation_DirectionValue "Link to the DirectionValue property of .NET MAUI Radial Gauge") and [PositionFactor](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Gauges.GaugeAnnotation.html#Syncfusion_Maui_Gauges_GaugeAnnotation_PositionFactor "Link to the PositionFactor property of .NET MAUI Radial Gauge") properties.

Refer to the following code example.

```html
<gauge:SfRadialGauge>
    <gauge:SfRadialGauge.Axes>
         <gauge:RadialAxis Minimum="0" Interval="10"
                           Maximum="150" >
             <gauge:RadialAxis.Pointers>
              ...
                  <gauge:NeedlePointer x:Name="pointer" Value="90" />
             </gauge:RadialAxis.Pointers>
             <gauge:RadialAxis.Annotations>
                 <gauge:GaugeAnnotation x:Name="annotation"
                                       DirectionUnit="Angle"
                                       DirectionValue="90"
                                       PositionFactor="0.5">
                 <gauge:GaugeAnnotation.Content>
                 <Label Text="{Binding Source={x:Reference pointer}, Path=Value}"
                                       FontSize="25"
                                       FontAttributes="Bold" 
                                       TextColor="Black"/>
                 </gauge:GaugeAnnotation.Content>
             </gauge:GaugeAnnotation>
          </gauge:RadialAxis.Annotations>
      </gauge:RadialAxis>
   </gauge:SfRadialGauge.Axes>
</gauge:SfRadialGauge>
```

## GitHub reference

For more information, refer to our [.NET MAUI Radial Gauge Getting Started demo](https://github.com/SyncfusionExamples/MAUI-Radial-Gauge-Getting-Started- "Link to the Getting started with .NET MAUI Radial Gauge Control GitHub demo") project.

## Conclusion

Thanks for reading! I hope you enjoyed learning about the Syncfusion [.NET MAUI Radial Gauge](https://www.syncfusion.com/maui-controls/maui-radial-gauge "Link to .NET MAUI Radial Gauge") control and its features. This control was developed from scratch with restructured APIs and the .NET MAUI graphics library with consideration for various use cases and performance aspects. For more details, check out the [.NET MAUI Radial Gauge NuGet package](https://www.nuget.org/packages/Syncfusion.Maui.Gauges/19.3.59-preview "Link to the Syncfusion.Maui.Gauges NuGet package"), [user guide](https://help.syncfusion.com/maui/radialgauge/getting-started "Documentation link to Getting Started with .NET MAUI Radial Gauge"), and [GitHub demos](https://github.com/syncfusion/maui-demos/tree/master/SampleBrowser.Maui/Samples/SfRadialGauge/Samples "Link to the .NET MAUI Radial Gauge GitHub demos").

Let’s use this marvelous .NET MAUI Radial Gauge data visualization control to design our speedometers, temperature monitors, sleep trackers, circular progress indicators, and more real-time applications!

If you need a specific feature in our .NET MAUI Radial Gauge control, please let us know in the comments section below. Also, you can contact us through our [support forums](https://www.syncfusion.com/forums "Link to the Syncfusion support forum"), [support portal](https://support.syncfusion.com/ "Link to the Syncfusion support portal"), or [feedback portal](https://www.syncfusion.com/feedback/maui "Link to Syncfusion Feedback Portal"). We are always happy to assist you!

## Related blogs

- [Learn How to Use Dependency Injection in .NET MAUI](https://dev.to/kartik110895/learn-how-to-use-dependency-injection-in-net-maui-2cjb-temp-slug-7779445 "Link to Learn How to Use Dependency Injection in .NET MAUI blog")
- [What’s New in .NET MAUI: 2021 Volume 4](https://dev.to/sureshmohan/whats-new-in-net-maui-2021-volume-4-29m3-temp-slug-4690117 "Link to What’s New in .NET MAUI: 2021 Volume 4 blog")
- [Introducing the First Set of Syncfusion .NET MAUI Controls](https://dev.to/karthickramasamy08/introducing-the-first-set-of-syncfusion-net-maui-controls-51ej-temp-slug-8053526 "Link to Introducing the First Set of Syncfusion .NET MAUI Controls blog")
- [How to Customize .NET MAUI Controls with Handler Architecture](https://dev.to/syncfusion/how-to-customize-net-maui-controls-with-handler-architecture-4nfo "Link to How to Customize .NET MAUI Controls with Handler Architecture blog")