Labels in UWP Linear Gauge (SfLinearGauge)

10 May 202124 minutes to read

Labels of the linear scale provide a numeric value to the major ticks that will be specified according to the range of the scale.

Label color customization

The foreground of the label is customized by setting the LabelStroke of the linear scale.

<gauge:SfLinearGauge>

            <gauge:SfLinearGauge.MainScale>

            <gauge:LinearScale     Interval="10" 
                                   MajorTickStroke="Gray" MajorTickSize="25" 
                                   MinorTickSize="12" LabelSize="15" ScaleBarSize="10"
                                   MinorTickStroke="Gray" LabelStroke="Purple"
                                   MinorTicksPerInterval="3" ScaleBarLength="300">
                
            </gauge:LinearScale>

            </gauge:SfLinearGauge.MainScale>

        </gauge:SfLinearGauge>
SfLinearGauge sfLinearGauge = new SfLinearGauge();

            LinearScale linearScale = new LinearScale();

            linearScale.Interval = 10;

            linearScale.LabelSize = 15;

            linearScale.ScaleBarSize = 10;

            linearScale.MajorTickStroke = new SolidColorBrush(Colors.Gray);

            linearScale.MinorTickStroke = new SolidColorBrush(Colors.Gray);

            linearScale.LabelStroke = new SolidColorBrush(Colors.Purple);

            linearScale.MajorTickSize = 25;

            linearScale.MinorTickSize = 12;

            linearScale.ScaleBarLength = 300;

            linearScale.MinorTicksPerInterval = 3;

            sfLinearGauge.MainScale = linearScale;

Scale label image

Label font customization

The label font can be customized using the LabelSize, FontFamily, and FontStyle properties.

<gauge:SfLinearGauge>

            <gauge:SfLinearGauge.MainScale>

            <gauge:LinearScale     Interval="10" FontFamily="Monotype Corsiva" 
                                   FontStyle="Italic"
                                   MajorTickStroke="Gray" MajorTickSize="25" 
                                   MinorTickSize="12" LabelSize="15" ScaleBarSize="10"
                                   MinorTickStroke="Gray" LabelStroke="#424242"
                                   MinorTicksPerInterval="3" ScaleBarLength="300">
                
            </gauge:LinearScale>

            </gauge:SfLinearGauge.MainScale>

        </gauge:SfLinearGauge>
SfLinearGauge sfLinearGauge = new SfLinearGauge();

            LinearScale linearScale = new LinearScale();

            linearScale.Interval = 10;

            linearScale.LabelSize = 15;

            linearScale.FontFamily = new FontFamily("Monotype Corsiva");

            linearScale.FontStyle = Windows.UI.Text.FontStyle.Italic;

            linearScale.ScaleBarSize = 10;

            linearScale.MajorTickStroke = new SolidColorBrush(Colors.Gray);

            linearScale.MinorTickStroke = new SolidColorBrush(Colors.Gray);

            linearScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x42, 0x42, 0x42));

            linearScale.MajorTickSize = 25;

            linearScale.MinorTickSize = 12;

            linearScale.ScaleBarLength = 300;

            linearScale.MinorTicksPerInterval = 3;

            sfLinearGauge.MainScale = linearScale;

Label font customization image

Setting position for labels

The labels in the scale can be placed above or below the linear scale by choosing the following options available in the LabelPosition property. The default value of LabelPosition property is below.

  1. Above
  2. Below (Default)
<gauge:SfLinearGauge>

            <gauge:SfLinearGauge.MainScale>

            <gauge:LinearScale     Interval="10" LabelPosition="Above"
                                   MajorTickStroke="Gray" MajorTickSize="25" 
                                   MinorTickSize="12" LabelSize="15" ScaleBarSize="10"
                                   MinorTickStroke="Gray" LabelStroke="#424242"
                                   MinorTicksPerInterval="3" ScaleBarLength="300">
                
            </gauge:LinearScale>

            </gauge:SfLinearGauge.MainScale>

        </gauge:SfLinearGauge>
SfLinearGauge sfLinearGauge = new SfLinearGauge();

            LinearScale linearScale = new LinearScale();

            linearScale.Interval = 10;

            linearScale.LabelSize = 15;

            linearScale.LabelPosition = LinearLabelsPosition.Above;

            linearScale.ScaleBarSize = 10;

            linearScale.MajorTickStroke = new SolidColorBrush(Colors.Gray);

            linearScale.MinorTickStroke = new SolidColorBrush(Colors.Gray);

            linearScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x42, 0x42, 0x42));

            linearScale.MajorTickSize = 25;

            linearScale.MinorTickSize = 12;

            linearScale.ScaleBarLength = 300;

            linearScale.MinorTicksPerInterval = 3;

            sfLinearGauge.MainScale = linearScale;

Label position image

Setting postfix and prefix for labels

You can postfix and prefix values to the scale labels using the LabelPostfix and LabelPrefix properties, respectively.

Setting label postfix

The LabelPostfix property allows to postfix the values to scale labels.

<gauge:SfLinearGauge>

            <gauge:SfLinearGauge.MainScale>

            <gauge:LinearScale    Minimum="0" Maximum="50"  LabelPostfix="%"
                                  Interval="10" 
                                   MajorTickStroke="Gray" MajorTickSize="25" 
                                   MinorTickSize="12" LabelSize="15" ScaleBarSize="10"
                                   MinorTickStroke="Gray" LabelStroke="#424242"
                                   ScaleBarLength="300">
                
            </gauge:LinearScale>

            </gauge:SfLinearGauge.MainScale>

        </gauge:SfLinearGauge>
SfLinearGauge sfLinearGauge = new SfLinearGauge();

            LinearScale linearScale = new LinearScale();

            linearScale.Interval = 10;

            linearScale.LabelSize = 15;

            linearScale.Minimum = 0;

            linearScale.Maximum = 50;

            linearScale.LabelPostfix = "%";

            linearScale.ScaleBarSize = 10;

            linearScale.MajorTickStroke = new SolidColorBrush(Colors.Gray);

            linearScale.MinorTickStroke = new SolidColorBrush(Colors.Gray);

            linearScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x42, 0x42, 0x42));

            linearScale.MajorTickSize = 25;

            linearScale.MinorTickSize = 12;

            linearScale.ScaleBarLength = 300;

            sfLinearGauge.MainScale = linearScale;

Label postfix image

Setting label prefix

The LabelPrefix property allows to prefix the values to scale labels.

<gauge:SfLinearGauge>

            <gauge:SfLinearGauge.MainScale>

            <gauge:LinearScale     Minimum="0" Maximum="50"  LabelPrefix="$"
                                   Interval="10" 
                                   MajorTickStroke="Gray" MajorTickSize="25" 
                                   MinorTickSize="12" LabelSize="15" ScaleBarSize="10"
                                   MinorTickStroke="Gray" LabelStroke="#424242" ScaleBarLength="300">
                
            </gauge:LinearScale>

            </gauge:SfLinearGauge.MainScale>

        </gauge:SfLinearGauge>
SfLinearGauge sfLinearGauge = new SfLinearGauge();

            LinearScale linearScale = new LinearScale();

            linearScale.Interval = 10;

            linearScale.LabelSize = 15;

            linearScale.Minimum = 0;

            linearScale.Maximum = 50;

            linearScale.LabelPostfix = "$";

            linearScale.ScaleBarSize = 10;

            linearScale.MajorTickStroke = new SolidColorBrush(Colors.Gray);

            linearScale.MinorTickStroke = new SolidColorBrush(Colors.Gray);

            linearScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x42, 0x42, 0x42));

            linearScale.MajorTickSize = 25;

            linearScale.MinorTickSize = 12;

            linearScale.ScaleBarLength = 300;

            sfLinearGauge.MainScale = linearScale;

Label prefix image

Setting label offset

The labels can be positioned far away from the ticks using the LabelOffset property.

<gauge:SfLinearGauge>

            <gauge:SfLinearGauge.MainScale>

            <gauge:LinearScale     LabelOffset="15"
                                   MajorTickStroke="Gray" MajorTickSize="25" 
                                   MinorTickSize="12" LabelSize="15" ScaleBarSize="10"
                                   MinorTickStroke="Gray" LabelStroke="#424242" ScaleBarLength="300">
                
            </gauge:LinearScale>

            </gauge:SfLinearGauge.MainScale>

        </gauge:SfLinearGauge>
SfLinearGauge sfLinearGauge = new SfLinearGauge();

            LinearScale linearScale = new LinearScale();

            linearScale.ScaleBarSize = 10;

            linearScale.LabelOffset = 15;

            linearScale.MajorTickStroke = new SolidColorBrush(Colors.Gray);

            linearScale.MinorTickStroke = new SolidColorBrush(Colors.Gray);

            linearScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x42, 0x42, 0x42));

            linearScale.MajorTickSize = 25;

            linearScale.MinorTickSize = 12;

            linearScale.ScaleBarLength = 300;

            sfLinearGauge.MainScale = linearScale;

Custom labels image

Labels visibility

Labels visibility can be customized using the ShowLabels property of linear scale.

<gauge:SfLinearGauge>

        <gauge:SfLinearGauge.MainScale>

            <gauge:LinearScale     ShowLabels="False"
                                   MajorTickStroke="Gray" MajorTickSize="25" 
                                   MinorTickSize="12" LabelSize="15" ScaleBarSize="10"
                                   MinorTickStroke="Gray" LabelStroke="#424242" ScaleBarLength="300">

            </gauge:LinearScale>

        </gauge:SfLinearGauge.MainScale>

    </gauge:SfLinearGauge>
SfLinearGauge sfLinearGauge = new SfLinearGauge();

            LinearScale linearScale = new LinearScale();

            linearScale.ScaleBarSize = 10;

            linearScale.ShowLabels = false;

            linearScale.MajorTickStroke = new SolidColorBrush(Colors.Gray);

            linearScale.MinorTickStroke = new SolidColorBrush(Colors.Gray);

            linearScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x42, 0x42, 0x42));

            linearScale.MajorTickSize = 25;

            linearScale.MinorTickSize = 12;

            linearScale.ScaleBarLength = 300;

            sfLinearGauge.MainScale = linearScale;

Labels visibility image

Customize the scale labels

The scale label are customized by using LabelFormat and Culture properties of linear scale.

LabelFormat property is used to change the format of labels by setting a formatting string on the LabelFormat property.
Culture property is used to format the group separator of the value based on the respective culture.

<gauge:SfLinearGauge>
            <gauge:SfLinearGauge.MainScale>
                <gauge:LinearScale  MaximumLabels="4"  ScaleOffset="50" Minimum="10" Maximum="50" Interval="10" ScaleBarStroke="#E0E0E0" 
                            ScaleBarSize="10"   MinorTicksPerInterval ="1" LabelStroke="#000000" LabelSize="20" LabelFormat="{}{0:c2}" LabelOffset="10">
                    <gauge:LinearScale.Pointers>
                        <gauge:LinearPointer BarPointerStrokeThickness="10" PointerType="BarPointer" Value="35"  BarPointerStroke="#DC3913" />
                    </gauge:LinearScale.Pointers>
                    <gauge:LinearScale.Ranges>
                        <gauge:LinearRange StartValue="0"  StartWidth="10" EndWidth="10"  EndValue="30" RangeStroke="#3267CC"  RangeOffset="5" />
                    </gauge:LinearScale.Ranges>
                </gauge:LinearScale>
            </gauge:SfLinearGauge.MainScale>
        </gauge:SfLinearGauge>
SfLinearGauge linearGauge = new SfLinearGauge();
            LinearScale linearScale = new LinearScale();
            linearScale.MaximumLabels = 4;
            linearScale.ScaleOffset = 50;
            linearScale.Minimum = 10;
            linearScale.Maximum = 50;
            linearScale.Interval = 10;
            linearScale.ScaleBarStroke = new SolidColorBrush(Colors.LightGray);
            linearScale.MinorTicksPerInterval = 1;
            linearScale.LabelSize = 20;
            linearScale.LabelFormat = "{0:c}";
            linearScale.LabelOffset = 10;
            linearScale.ScaleBarSize = 10;
            linearScale.MinorTicksPerInterval = 1;
            linearScale.LabelStroke = new SolidColorBrush(Colors.Black);
            LinearPointer barPointer = new LinearPointer();
            barPointer.BarPointerStrokeThickness = 10;
            barPointer.PointerType = LinearPointerType.BarPointer;
            barPointer.BarPointerStroke = new SolidColorBrush(Colors.Red);
            barPointer.Value = 35;
            linearScale.Pointers.Add(barPointer);
            LinearRange linearRange = new LinearRange();
            linearRange.StartValue = 0;
            linearRange.EndValue = 30;
            linearRange.StartWidth = 10;
            linearRange.EndWidth = 10;
            linearRange.RangeStroke = new SolidColorBrush(Colors.Blue);
            linearRange.RangeOffset = 5;
            linearScale.Ranges.Add(linearRange);
            linearGauge.MainScale=linearScale;
            linearScale.Culture = new System.Globalization.CultureInfo("fr-FR");

Label format Image