Labels in Xamarin Linear Gauge (SfLinearGauge)
17 May 202124 minutes to read
LinearScale labels associate a numeric value with major scale tick marks.
Label color customization
The label color can be changed using the LabelColor property.
<gauge:SfLinearGauge>
<gauge:SfLinearGauge.Scales>
<gauge:LinearScale ScaleBarColor="#e0e0e0" LabelColor="Purple">
<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>
</gauge:SfLinearGauge.Scales>
</gauge:SfLinearGauge>SfLinearGauge linearGauge = new SfLinearGauge();
LinearScale linearScale = new LinearScale();
linearScale.ScaleBarColor = Color.FromHex("#e0e0e0");
linearScale.MajorTickSettings.Thickness = 1;
linearScale.MajorTickSettings.Length = 15;
linearScale.MajorTickSettings.Color = Color.Gray;
linearScale.MinorTickSettings.Color = Color.Gray;
linearScale.MinorTickSettings.Length = 7;
linearScale.MinorTickSettings.Thickness = 1;
linearScale.LabelColor = Color.Purple;
linearGauge.Scales.Add(linearScale);
Label font customization
The label font can be customized using the LabelFontSize, FontAttribute, and FontFamily properties.
<gauge:SfLinearGauge>
<gauge:SfLinearGauge.Scales>
<gauge:LinearScale ScaleBarColor="#e0e0e0" LabelColor="#424242" LabelFontSize ="15" FontAttributes="Bold">
<gauge:LinearScale.FontFamily>
<OnPlatform x:TypeArguments="x:String" iOS="Chalkduster" Android="algerian.ttf" WinPhone="Chiller" />
</gauge:LinearScale.FontFamily>
<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>
</gauge:SfLinearGauge.Scales>
</gauge:SfLinearGauge>SfLinearGauge linearGauge = new SfLinearGauge();
LinearScale linearScale = new LinearScale();
linearScale.LabelFontSize = 15;
linearScale.ScaleBarColor = Color.FromHex("#e0e0e0");
linearScale.FontAttributes = FontAttributes.Bold;
linearScale.MajorTickSettings.Thickness = 1;
linearScale.MajorTickSettings.Length = 15;
linearScale.MajorTickSettings.Color = Color.Gray;
linearScale.MinorTickSettings.Color = Color.Gray;
linearScale.MinorTickSettings.Length = 7;
linearScale.MinorTickSettings.Thickness = 1;
linearScale.LabelColor = Color.FromHex("#424242");
linearScale.FontFamily = Device.RuntimePlatform == Device.iOS ? "Chalkduster" : Device.RuntimePlatform == Device.Android ? "algerian.ttf" : "Chiller";
linearGauge.Scales.Add(linearScale);
Setting a position for labels
The labels can be positioned far away from the ticks using the LabelOffset property in pixel.
<gauge:SfLinearGauge>
<gauge:SfLinearGauge.Scales>
<gauge:LinearScale ScaleBarColor="#e0e0e0" LabelColor="#424242" LabelOffset ="5">
<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>
</gauge:SfLinearGauge.Scales>
</gauge:SfLinearGauge>SfLinearGauge linearGauge = new SfLinearGauge();
LinearScale linearScale = new LinearScale();
linearScale.ScaleBarColor = Color.FromHex("#e0e0e0");
linearScale.MajorTickSettings.Thickness = 1;
linearScale.MajorTickSettings.Length = 15;
linearScale.MajorTickSettings.Color = Color.Gray;
linearScale.MinorTickSettings.Color = Color.Gray;
linearScale.MinorTickSettings.Length = 7;
linearScale.MinorTickSettings.Thickness = 1;
linearScale.LabelColor = Color.FromHex("#424242");
linearScale.LabelOffset = 5;
linearGauge.Scales.Add(linearScale);
Setting postfix and prefix for labels
You can postfix or prefix values to the scale labels using the LabelPostfix and LabelPrefix properties, respectively.
Setting a label postfix
The LabelPostfix property allows you to postfix the values to scale labels.
<gauge:SfLinearGauge>
<gauge:SfLinearGauge.Scales>
<gauge:LinearScale MinimumValue = "0" MaximumValue ="1000" Interval ="200" LabelPostfix ="K" ScaleBarColor="#e0e0e0" LabelColor="#424242">
<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>
</gauge:SfLinearGauge.Scales>
</gauge:SfLinearGauge>SfLinearGauge linearGauge = new SfLinearGauge();
LinearScale linearScale = new LinearScale();
linearScale.MinimumValue = 0;
linearScale.MaximumValue = 1000;
linearScale.Interval = 200;
linearScale.ScaleBarColor = Color.FromHex("#e0e0e0");
linearScale.MajorTickSettings.Thickness = 1;
linearScale.MajorTickSettings.Length = 15;
linearScale.MajorTickSettings.Color = Color.Gray;
linearScale.MinorTickSettings.Color = Color.Gray;
linearScale.MinorTickSettings.Length = 7;
linearScale.MinorTickSettings.Thickness = 1;
linearScale.LabelColor = Color.FromHex("#424242");
linearScale.LabelPostfix = "K";
linearGauge.Scales.Add(linearScale);
Setting a label prefix
The LabelPrefix property allows you to prefix the values to scale labels.
<gauge:SfLinearGauge>
<gauge:SfLinearGauge.Scales>
<gauge:LinearScale ScaleBarColor="#e0e0e0" LabelColor="#424242" LabelPrefix ="$">
<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>
</gauge:SfLinearGauge.Scales>
</gauge:SfLinearGauge>SfLinearGauge linearGauge = new SfLinearGauge();
LinearScale linearScale = new LinearScale();
linearScale.ScaleBarColor = Color.FromHex("#e0e0e0");
linearScale.LabelColor = Color.FromHex("#424242");
linearScale.MajorTickSettings.Thickness = 1;
linearScale.MajorTickSettings.Length = 15;
linearScale.MajorTickSettings.Color = Color.Gray;
linearScale.MinorTickSettings.Color = Color.Gray;
linearScale.MinorTickSettings.Length = 7;
linearScale.MinorTickSettings.Thickness = 1;
linearScale.LabelPrefix = "$";
linearGauge.Scales.Add(linearScale);
Custom labels
Linear scale supports custom label format using the CustomLabels property.
You can give labels in an array that you want to place in scale.
Namespace:
xmlns:sys="clr-namespace:System;assembly=mscorlib"
...
<gauge:SfLinearGauge>
<gauge:SfLinearGauge.Scales>
<gauge:LinearScale ScaleBarColor="#e0e0e0" LabelColor="#424242" >
<gauge:LinearScale.CustomLabels>
<x:Array Type="{x:Type x:Double}">
<sys:Double>0</sys:Double>
<sys:Double>23</sys:Double>
<sys:Double>45</sys:Double>
<sys:Double>67</sys:Double>
<sys:Double>85</sys:Double>
<sys:Double>100</sys:Double>
</x:Array>
</gauge:LinearScale.CustomLabels>
<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>
</gauge:SfLinearGauge.Scales>
</gauge:SfLinearGauge>SfLinearGauge linearGauge = new SfLinearGauge();
LinearScale linearScale = new LinearScale();
linearScale.ScaleBarColor = Color.FromHex("#e0e0e0");
linearScale.MajorTickSettings.Thickness = 1;
linearScale.MajorTickSettings.Length = 15;
linearScale.MajorTickSettings.Color = Color.Gray;
linearScale.MinorTickSettings.Color = Color.Gray;
linearScale.MinorTickSettings.Length = 7;
linearScale.MinorTickSettings.Thickness = 1;
linearScale.LabelColor = Color.FromHex("#424242");
linearScale.CustomLabels = new double[] { 0, 23, 45, 67, 85, 100};
linearGauge.Scales.Add(linearScale);
Content = linearGauge;
Labels visibility
Labels visibility can be customized using the ShowLabels property of linear scale.
<gauge:SfLinearGauge>
<gauge:SfLinearGauge.Scales>
<gauge:LinearScale ScaleBarColor="#e0e0e0" ShowLabels = "False" ScaleBarSize ="40">
<gauge:LinearScale.MajorTickSettings>
<gauge:LinearTickSettings Thickness="1" Color ="Black" Length ="40" Offset ="-40" />
</gauge:LinearScale.MajorTickSettings>
<gauge:LinearScale.MinorTickSettings>
<gauge:LinearTickSettings Color ="Black" Length = "20" Offset ="-20" />
</gauge:LinearScale.MinorTickSettings>
</gauge:LinearScale>
</gauge:SfLinearGauge.Scales>
</gauge:SfLinearGauge>SfLinearGauge linearGauge = new SfLinearGauge();
LinearScale linearScale = new LinearScale();
linearScale.ScaleBarSize = 40;
linearScale.ScaleBarColor= Color.FromHex("#e0e0e0");
linearScale.MajorTickSettings.Color = Color.Black;
linearScale.MinorTickSettings.Color = Color.Black;
linearScale.MajorTickSettings.Length = 40;
linearScale.MinorTickSettings.Offset = -20;
linearScale.MajorTickSettings.Offset = -40;
linearScale.MajorTickSettings.Thickness = 1;
linearScale.MinorTickSettings.Length = 20;
linearScale.MinorTicksPerInterval = 4;
linearScale.ShowLabels = false;
linearGauge.Scales.Add(linearScale);
Customize the scale labels
The scale labels are customized using the LabelFormat and Culture properties of linear scale.
LabelFormat property is used to change the format of labels.
Culture property is used to set the default format of currency values, numbers, casing conventions, and string comparisons, etc.. to the scale labels.
<gauge:SfLinearGauge>
<gauge:SfLinearGauge.Scales>
<gauge:LinearScale x:Name="scale" MaximumLabels="4" ScaleOffset="50" MinimumValue="10" MaximumValue="50" Interval="10" ScaleBarColor="#E0E0E0"
MinorTicksPerInterval ="1" LabelColor="#000000" LabelFontSize="20" LabelFormat="{}{0:C}" LabelOffset="10">
<gauge:LinearScale.Pointers>
<gauge:BarPointer Value="35" Color="#DC3913" />
</gauge:LinearScale.Pointers>
<gauge:LinearScale.Ranges>
<gauge:LinearRange StartValue="10" EndValue="30" Color="#3267CC" Offset = "-55" />
</gauge:LinearScale.Ranges>
</gauge:LinearScale>
</gauge:SfLinearGauge.Scales>
</gauge:SfLinearGauge>SfLinearGauge linearGauge = new SfLinearGauge();
LinearScale linearScale = new LinearScale();
linearScale.MaximumLabels = 4;
linearScale.ScaleOffset = 50;
linearScale.MinimumValue = 10;
linearScale.MaximumValue = 50;
linearScale.Interval = 10;
linearScale.ScaleBarColor = Color.FromHex("#E0E0E0");
linearScale.MinorTicksPerInterval = 1;
linearScale.LabelColor = Color.FromHex("#000000");
linearScale.LabelFontSize = 20;
linearScale.LabelFormat = "{0:C}";
linearScale.LabelOffset = 10;
BarPointer barPointer = new BarPointer();
barPointer.Value = 35;
barPointer.Color = Color.FromHex("#DC3913");
linearScale.Pointers.Add(barPointer);
LinearRange linearRange = new LinearRange();
linearRange.StartValue = 10;
linearRange.EndValue = 30;
linearRange.Color = Color.FromHex("#3267CC");
linearRange.Offset = -55;
linearScale.Ranges.Add(linearRange);
linearScale.Culture = new System.Globalization.CultureInfo("fr-FR");
linearGauge.Scales.Add(linearScale);