Scales in Xamarin Linear Gauge (SfLinearGauge)

17 May 202124 minutes to read

Scales is a collection of LinearScale, which integrates labels, tick marks, ranges, and pointers to customize the basic look and feel of the SfLinearGauge.

Linear scale

LinearScale contains sub elements such as ticks, labels, Ranges, and Pointers.

<gauge:SfLinearGauge>

            <gauge:SfLinearGauge.Scales>
                <gauge:LinearScale ScaleBarColor="#e0e0e0" LabelColor="#424242">
                </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");
      linearGauge.Scales.Add(linearScale);

Linear Gauge Scale

Setting minimum and maximum values for scale

To change minimum and maximum values of linear scale, use the MinimumValue and MaximumValue properties as shown in the following code snippet.

<gauge:SfLinearGauge>

            <gauge:SfLinearGauge.Scales>
                <gauge:LinearScale MinimumValue="20" MaximumValue="200" ScaleBarColor="#e0e0e0" LabelColor="#424242">
                </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.MinimumValue = 20;
      linearScale.MaximumValue = 200;
      linearGauge.Scales.Add(linearScale);

Linear Gauge Scale Value

Setting interval for scale

The Interval property allows you to set the intervals for scale. The default Interval property of scale is auto interval. Auto interval defines the count of the scale labels as 3 for 100 pixels.

<gauge:SfLinearGauge>

            <gauge:SfLinearGauge.Scales>
                <gauge:LinearScale MinimumValue="0" MaximumValue="500" Interval="100" ScaleBarColor="#e0e0e0" LabelColor="#424242">
                </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.MinimumValue = 0;
    linearScale.MaximumValue = 500;
    linearScale.Interval = 100;
    linearGauge.Scales.Add(linearScale);

Linear Gauge Interval

Setting maximum labels

The MaximumLabels property defines the count of the scale labels in the 100 pixels. By default, the maximum labels for 100 pixels is 3.

<gauge:SfLinearGauge>

           <gauge:SfLinearGauge.Scales>
                <gauge:LinearScale MaximumLabels="4" ScaleBarColor="#e0e0e0" LabelColor="#424242" MinorTicksPerInterval ="1">
				 <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.MinorTicksPerInterval = 1;
     linearScale.MaximumLabels = 4;
     linearGauge.Scales.Add(linearScale);

Linear Gauge Maximum Labels

Scale customization

You can customize the color, length, size, and position of the LinearScale by using the ScaleBarColor, ScaleBarLength, ScaleBarSize, and Offset properties, respectively.

<gauge:SfLinearGauge Orientation="OrientationVertical">

         <gauge:SfLinearGauge.Scales>
                <gauge:LinearScale ScaleBarColor="#4c88dc" LabelOffset="-5" MinorTicksPerInterval="1" Offset="10" ScaleBarLength="300" ScaleBarSize="5" LabelColor="#424242">
                    <gauge:LinearScale.MajorTickSettings>
                        <gauge:LinearTickSettings Length= "25" Color="Gray"/>
                    </gauge:LinearScale.MajorTickSettings>
                    <gauge:LinearScale.MinorTickSettings>
                        <gauge:LinearTickSettings Length="10" Color="Gray"/>
                    </gauge:LinearScale.MinorTickSettings>
                </gauge:LinearScale>
            </gauge:SfLinearGauge.Scales>

     </gauge:SfLinearGauge>
SfLinearGauge linearGauge = new SfLinearGauge();
      linearGauge.Orientation = Orientation.OrientationVertical;
      LinearScale linearScale = new LinearScale();
      linearScale.ScaleBarColor = Color.FromRgb(76, 136, 220);
      linearScale.LabelColor = Color.FromHex("#424242");
      linearScale.MinorTicksPerInterval = 1;
      linearScale.MajorTickSettings.Length = 25;
      linearScale.MinorTickSettings.Length = 10;
      linearScale.MajorTickSettings.Color = Color.Gray;
      linearScale.MinorTickSettings.Color = Color.Gray;
      linearScale.LabelOffset = -5;
      linearScale.Offset = 10;
      linearScale.ScaleBarLength = 300;
      linearScale.ScaleBarSize = 5;
      linearGauge.Scales.Add(linearScale);

Linear Gauge Scale Customization

Scale Offset

The space between the control and linear scale can be customized using the ScaleOffset property.

<gauge:SfLinearGauge>
            <gauge:SfLinearGauge.Scales>
                <gauge:LinearScale ScaleOffset="40"  ScaleBarSize="20" CornerRadiusType="Start"  CornerRadius="10" 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>
public MainPage()
            {               
            SfLinearGauge linearGauge = new SfLinearGauge();
            LinearScale linearScale = new LinearScale();
            linearScale.ScaleBarSize = 20;
            linearScale.ScaleBarColor = Color.FromHex("#e0e0e0");
            linearScale.CornerRadiusType = CornerRadiusType.Start;
            linearScale.CornerRadius = 10;
            linearScale.ScaleOffset = 40;
            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");
            linearGauge.Scales.Add(linearScale);
            }
        }

Setting opposite position

To place the scale at opposite to its original position, set the OpposedPosition property to true in the scale.

<gauge:SfLinearGauge>

             <gauge:SfLinearGauge.Scales>
                <gauge:LinearScale OpposedPosition="True" ScaleBarColor="#e0e0e0" LabelColor="#424242" MinorTicksPerInterval="1">
                    <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.MinorTicksPerInterval = 1;
       linearScale.OpposedPosition = true;
       linearGauge.Scales.Add(linearScale);

Linear Gauge Opposed position

Setting scale direction

You can set the scale position to its forward and backward using the ScalePosition property.

<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>
            </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.MinorTicksPerInterval = 1;
        linearScale.ScalePosition = ScalePosition.BackWard;
        linearGauge.Scales.Add(linearScale);

Linear Gauge Scale Direction

Setting corner radius type for scale

Corners of the LinearScale can be customized by setting the value to the CornerRadiusType property. All corners of linear scale can be customized using the Start, End, Both, and None options.
CornerRadius property used to reduce the radius of the corners.

<gauge:SfLinearGauge>

            <gauge:SfLinearGauge.Scales>
                <gauge:LinearScale ScaleBarSize="20" CornerRadiusType="Start"  CornerRadius="10" 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.ScaleBarSize = 20;
         linearScale.ScaleBarColor = Color.FromHex("#e0e0e0");
         linearScale.CornerRadiusType = CornerRadiusType.Start;
         linearScale.CornerRadius = 10;
         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");
         linearGauge.Scales.Add(linearScale);

Linear Gauge Corner Radius

Multiple scales

It helps you to add multiple scales to the same linear gauge and customize all the scales in a Scales collection.

<gauge:SfLinearGauge Orientation="OrientationVertical">

            <gauge:SfLinearGauge.Scales>
                <gauge:LinearScale ScaleBarLength="500" MinimumValue="0" Interval="10" MaximumValue="100" Offset="9"
                                   ScaleBarColor="Gray" ScaleBarSize="5" LabelColor="Gray" MinorTicksPerInterval="1"
                                   LabelPostfix="°F" LabelOffset="-6">
                    <gauge:LinearScale.MajorTickSettings>
                        <gauge:LinearTickSettings Color="Gray" Thickness="1"/>
                    </gauge:LinearScale.MajorTickSettings>
                    <gauge:LinearScale.MinorTickSettings>
                        <gauge:LinearTickSettings Color="Gray"/>
                    </gauge:LinearScale.MinorTickSettings>
                </gauge:LinearScale>

                <gauge:LinearScale MinimumValue="0" ScaleBarLength="500" Interval="10" MaximumValue="100"
                                   ShowTicks="False" ShowLabels="False" ScaleBarSize="5" ScaleBarColor="Transparent"
                                   CornerRadiusType="Both" LabelColor="Black" >
                    <gauge:LinearScale.MajorTickSettings>
                        <gauge:LinearTickSettings Color="Black"/>
                    </gauge:LinearScale.MajorTickSettings>
                    <gauge:LinearScale.MinorTickSettings>
                        <gauge:LinearTickSettings Color="Black"/>
                    </gauge:LinearScale.MinorTickSettings>
                    <gauge:LinearScale.Pointers>
                        <gauge:BarPointer Value="45" Thickness="7" CornerRadiusType="End" CornerRadius="3"
                                          Color="#f95c85"/>
                    </gauge:LinearScale.Pointers>
                </gauge:LinearScale>

                <gauge:LinearScale MinimumValue="0" ScaleBarLength="500" MinorTicksPerInterval="1"
                                   MaximumValue="38" Interval="2" ScaleBarColor="Gray" ScaleBarSize="5"
                                   LabelColor="Gray" OpposedPosition="True" Offset="-9" LabelPostfix="°C">
                    <gauge:LinearScale.MajorTickSettings>
                        <gauge:LinearTickSettings Color="Gray" Thickness="1"/>
                    </gauge:LinearScale.MajorTickSettings>
                    <gauge:LinearScale.MinorTickSettings>
                        <gauge:LinearTickSettings Color="Gray"/>
                    </gauge:LinearScale.MinorTickSettings>

                </gauge:LinearScale>

            </gauge:SfLinearGauge.Scales>

      </gauge:SfLinearGauge>
SfLinearGauge linearGauge = new SfLinearGauge();
        linearGauge.Orientation = Orientation.OrientationVertical;
        LinearScale linearScale = new LinearScale();
        linearScale.ScaleBarLength = 500;
        linearScale.MinimumValue = 0;
        linearScale.Interval = 10;
        linearScale.MaximumValue = 100;
        linearScale.Offset = 9;
        linearScale.ScaleBarColor = Color.Gray;
        linearScale.ScaleBarSize = 5;
        linearScale.MajorTickSettings.Color = Color.Gray;
        linearScale.MinorTickSettings.Color = Color.Gray;
        linearScale.MajorTickSettings.Thickness = 1;
        linearScale.LabelColor = Color.Gray;
        linearScale.MinorTicksPerInterval = 1;
        linearScale.LabelPostfix = "°F";
        linearScale.LabelOffset = -6;
        linearGauge.Scales.Add(linearScale);
 
        LinearScale scale = new LinearScale();
        scale.MinimumValue = 0;
        scale.ScaleBarLength = 500;
        scale.Interval = 10;
        scale.MaximumValue = 100;
        scale.ShowTicks = false;
        scale.ShowLabels = false;
        scale.ScaleBarSize = 5;
        scale.ScaleBarColor = Color.Transparent;
        scale.CornerRadiusType = CornerRadiusType.Both;
        scale.MajorTickSettings.Color = Color.Black;
        scale.MinorTickSettings.Color = Color.Black;
        scale.LabelColor = Color.Black;
        BarPointer barPointer = new BarPointer();
        barPointer.Value = 45;
        barPointer.Thickness = 7; 
        barPointer.CornerRadiusType = CornerRadiusType.End;
        barPointer.CornerRadius = 3;
        barPointer.Color = Color.FromRgb(249, 92, 133);
        scale.Pointers.Add(barPointer);
        linearGauge.Scales.Add(scale);

        LinearScale linearScale1 = new LinearScale();
        linearScale1.MinimumValue = 0;
        linearScale1.ScaleBarLength = 500;
        linearScale1.MinorTicksPerInterval = 1;
        linearScale1.MaximumValue = 38;
        linearScale1.Interval = 2;
        linearScale1.ScaleBarColor = Color.Gray;
        linearScale1.ScaleBarSize = 5;
        linearScale1.MajorTickSettings.Color = Color.Gray;
        linearScale1.MinorTickSettings.Color = Color.Gray;
        linearScale1.LabelColor = Color.Gray;
        linearScale1.OpposedPosition = true;
        linearScale1.Offset = -9;
        linearScale1.MajorTickSettings.Thickness = 1;
        linearScale1.LabelOffset = -5;
        linearScale1.LabelPostfix = "°C";

        linearGauge.Scales.Add(linearScale1);

Linear Gauge Multiple Scales

Setting gradient color for scale

You can give smooth color transition to scale to specifying the different colors based on scale value by using GradientStops property.

<gauge:SfLinearGauge>

            <gauge:SfLinearGauge.Scales>
                <gauge:LinearScale ScaleBarSize="15" MinorTicksPerInterval="1" LabelColor="Black">

                    <gauge:LinearScale.MajorTickSettings>
                        <gauge:LinearTickSettings Thickness="1"  Color="Black" Length="15"/>
                    </gauge:LinearScale.MajorTickSettings>
                    <gauge:LinearScale.MinorTickSettings>
                        <gauge:LinearTickSettings Thickness="1"  Color="Black" Length="7"/>
                    </gauge:LinearScale.MinorTickSettings>
                    
                    <gauge:LinearScale.GradientStops>
                        <gauge:GaugeGradientStop Value="10" Color="#51c9e1"/>
                        <gauge:GaugeGradientStop Value="40" Color="#93e9e1"/>
                        <gauge:GaugeGradientStop Value="50" Color="#c5e692"/>
                        <gauge:GaugeGradientStop Value="60" Color="#fedd2b"/>
                        <gauge:GaugeGradientStop Value="100" Color="#e87813"/>

                    </gauge:LinearScale.GradientStops>
                </gauge:LinearScale>
            </gauge:SfLinearGauge.Scales>

       </gauge:SfLinearGauge>
SfLinearGauge linearGauge = new SfLinearGauge();
     LinearScale linearScale = new LinearScale();

     GaugeGradientStop gaugeGradientStop = new GaugeGradientStop();
     gaugeGradientStop.Value = 10;
     gaugeGradientStop.Color = Color.FromRgb(81, 201, 225);
     linearScale.GradientStops.Add(gaugeGradientStop);

      GaugeGradientStop gaugeGradientStop1 = new GaugeGradientStop();
      gaugeGradientStop1.Value = 40;
      gaugeGradientStop1.Color = Color.FromRgb(147, 233, 225);
      linearScale.GradientStops.Add(gaugeGradientStop1);

      GaugeGradientStop gaugeGradientStop2 = new GaugeGradientStop();
      gaugeGradientStop2.Value = 50;
      gaugeGradientStop2.Color = Color.FromRgb(197, 230, 146);
      linearScale.GradientStops.Add(gaugeGradientStop2);

      GaugeGradientStop gaugeGradientStop3 = new GaugeGradientStop();
      gaugeGradientStop3.Value = 60;
      gaugeGradientStop3.Color = Color.FromRgb(254, 221, 43);
      linearScale.GradientStops.Add(gaugeGradientStop3);

      GaugeGradientStop gaugeGradientStop4 = new GaugeGradientStop();
      gaugeGradientStop4.Value = 100;
      gaugeGradientStop4.Color = Color.FromRgb(232, 120, 19);
      linearScale.GradientStops.Add(gaugeGradientStop4);

      linearScale.ScaleBarSize = 15;
      linearScale.MajorTickSettings.Color = Color.Black;
      linearScale.MinorTickSettings.Color = Color.Black;
      linearScale.MajorTickSettings.Thickness = 1;
      linearScale.MajorTickSettings.Length = 15;
      linearScale.MinorTickSettings.Length = 7;
      linearScale.MinorTickSettings.Thickness = 1;
      linearScale.MinorTicksPerInterval = 1;
      linearScale.LabelColor = Color.Black;
      linearGauge.Scales.Add(linearScale);

Linear Gauge Scale With Gradient