Category / Section
How to show labels and ticks outside the rim in Xamarin.Forms Radial Gauge
1 min read
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 | Specifies the position of label from rim. | |
Customizes the start and end position of rim thickness. | ||
TickSettings | Customizes the start and end position of ticks.
| |
Range | 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:
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?
