We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to show labels and ticks outside the rim in Xamarin.Forms Radial Gauge

Platform: Xamarin.Forms |
Control: SfCircularGauge |
Published Date: March 25, 2020 |
Last Revised Date: March 25, 2020

By adjusting the Offset property of Scale, TickSettings, and Range values, we can display the circular gauge labels on the outside of its rim. The following property value can be adjusted to meet our requirements.

 

Class

Property

Usage

Scale

LabelOffset

Specifies the position of label from rim.

ScaleStartOffset, ScaleEndOffset

Customizes the start and end position of rim thickness.

TickSettings

StartOffset, EndOffset

Customizes the start and end position of ticks.

 

Range

Offset

Specifies the start position of range thickness.

 

XAML:

 

    <gauge:SfCircularGauge x:Name="circularGauge" >
        <gauge:SfCircularGauge.Scales>
            <gauge:Scale StartAngle="180" SweepAngle="180" ShowLabels="True" ShowRim="True"
                   StartValue="0" EndValue="150" Interval="30" RimColor="#e0e0e0"
           RadiusFactor="0.83" RimThickness="40"    LabelOffset="0.95" ScaleStartOffset="0.83" ScaleEndOffset="0.73">
 
                <gauge:Scale.Pointers>
                    <gauge:NeedlePointer KnobRadius="0" Value="10" KnobStrokeColor="#0682F6" KnobStrokeWidth="6"
                                        Color="#F67E09"  KnobColor="White" Type="Triangle" Thickness="10" LengthFactor="0.66"/>
                </gauge:Scale.Pointers>
 
                <gauge:Scale.MajorTickSettings>
                    <gauge:TickSettings StartOffset="0.83" EndOffset="0.90" Thickness="2"/>
                </gauge:Scale.MajorTickSettings>
                <gauge:Scale.MinorTickSettings>
                    <gauge:TickSettings StartOffset="0.83" EndOffset="0.88" Thickness="2"/>
                </gauge:Scale.MinorTickSettings>
                <gauge:Scale.Ranges>
                    <gauge:Range StartValue = "0" EndValue = "10" Color = "#F67E09" Thickness = "40" Offset = "0.83" />
                </gauge:Scale.Ranges>
            </gauge:Scale>
        </gauge:SfCircularGauge.Scales>
    </gauge:SfCircularGauge>

Output:

Xamarin.Forms SfCircularGauge to show label outside of rim.

 

Download the complete sample here

 

See also:

 

How do I set the start and end values for the scale?

 

How do I customize the position of rim?

 

How do I add a needle pointer to the gauge?

 

How to change the position of ticks?

 

 

2X faster development

The ultimate Xamarin UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile