How to change the scale direction in Xamarin.Forms linear gauge (SfLinearGauge)
This article explains how to change the linear scale position in the Syncfusion Xamarin.Forms SfLinearGauge control, as shown in the following image.
Change the linear gauge position
Scale position can be changed by setting the ScalePosition property to BackWard in SfLinearGauge.
Step1: Create an instance of SfLinearGauge.
Step 2: Add the LinearScale into the scales collection of the linear gauge.
Step 3: Add the ScalePosition property to BackWard value. It is an Enum. It has following values:
Name | Description |
Forward | Customize the position of the linear scale to forward direction. It is default value. |
BackWard | Customize the position of the linear scale to backward direction |
[XAML]
<gauge:SfLinearGauge> <gauge:SfLinearGauge.Scales> <gauge:LinearScale ScaleBarColor="#e0e0e0" LabelColor="#424242" MinorTicksPerInterval="1" ScalePosition="BackWard" > <gauge:LinearScale.MajorTickSettings> <gauge:LinearTickSettings Thickness="1" Color="Gray" Length="15"/> </gauge:LinearScale.MajorTickSettings> <gauge:LinearScale.MinorTickSettings> <gauge:LinearTickSettings Thickness="1" Color="Gray" Length="7"/> </gauge:LinearScale.MinorTickSettings> <gauge:LinearScale.Ranges> <gauge:LinearRange StartValue="0" EndValue="100" Color="#27beb7" Offset = "-20"/> </gauge:LinearScale.Ranges> </gauge:LinearScale> </gauge:SfLinearGauge.Scales> </gauge:SfLinearGauge>
View the sample in GitHub
See also
How to set the scale in opposite position in Xamarin.Forms SfLinearGauge
How to set the corner radius type for scale in Xamarin.Forms SfLinearGauge
How to add multiple scale in Xamarin.Forms SfLinearGauge
How to set the gradient color for scale in Xamarin.Forms SfLinearGauge
How to customize the ticks in Xamarin.Forms SfLinearGauge
How to customize the pointer in Xamarin.Forms SfLinearGauge
