How to create the vertical gauge in .NET MAUI Linear Gauge (SfLinearGauge)?

This guide explains how to create a vertical gauge using the Syncfusion® .NET MAUI Linear Gauge control. The vertical orientation of the gauge allows you to visualize data along a vertical axis, which can be particularly useful for specific design requirements.

Step 1: Start by creating the SfLinearGauge control. You can refer to the Syncfusion® documentation for initial setup instructions. 

Step 2: To display the vertical scale, set the Orientation to Vertical along with the required scale customization as shown in the following code sample.

XAML

<gauge:SfLinearGauge Orientation="Vertical"
                     Maximum="50"
                     Interval="5">
 </gauge:SfLinearGauge>

Step 3: To display the different ranges, add multiple LinearRange as shown in the code sample below.

XAML

<gauge:SfLinearGauge.Ranges>
    <gauge:LinearRange StartValue="0"
                       EndValue="20"
                       Fill="#f44336" />
    <gauge:LinearRange StartValue="20"
                       EndValue="35"
                       Fill="#ff9900" />
    <gauge:LinearRange StartValue="35"
                       EndValue="50"
                       Fill="#4caf4f" />
</gauge:SfLinearGauge.Ranges>

Step 4: There are 3 types of pointers in SfLinearGauge. Those are used to represent the required values on a scale. The code example below shows how to use bar and shape pointers to represent the values.

XAML

<gauge:SfLinearGauge.BarPointers>
     <gauge:BarPointer Value="30"
                       Offset="5"
                       Fill="#0075e3"
                       CornerStyle="EndCurve"
                       Position="Outside">
     </gauge:BarPointer>
 </gauge:SfLinearGauge.BarPointers>
<gauge:SfLinearGauge.MarkerPointers>
    <gauge:LinearShapePointer Value="40"
                              IsInteractive="True"
                              Fill="#757575" />
</gauge:SfLinearGauge.MarkerPointers>

Output

See also

How to customize a scale? 

How to customize the shape pointer? 

How to customize the bar pointer? 

How to add content pointer?

How to customize the range?

Download the complete sample on GitHub.

Conclusion

I hope you enjoyed learning how to create the vertical gauge in .NET MAUI Linear Gauge.

You can refer to our .NET MAUI Linear Gauge feature tour page to learn about its other groundbreaking feature representations and documentation, and how to get started with configuration specifications quickly. Explore our .NET MAUI Linear Gauge example to understand how to create and manipulate data.

For current customers, check out our components from the License and Downloads page. If you are new to Syncfusion®, try our 30-day free trial to check out our other controls.

Please let us know in the comments section if you have any queries or require clarification. Contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!