Scale in SfLinearGauge

9 Jul 202613 minutes to read

The MainScale is a linear scale that integrates ticks, labels, ranges, and pointers to customize the basic look and feel of the linear gauge.

<gauge:SfLinearGauge>

    <gauge:SfLinearGauge.MainScale>
                                               
    <gauge:LinearScale  ScaleBarStroke="#E0E0E0" MajorTickStroke="Gray" MinorTickStroke="Gray" LabelStroke="#424242"   

    ScaleBarSize="10" MinorTicksPerInterval="3"/>

    </gauge:SfLinearGauge.MainScale>

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

            linearScale.ScaleBarStroke = new SolidColorBrush(Color.FromRgb(224, 224, 224));

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

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

            linearScale.LabelStroke = new SolidColorBrush(Color.FromRgb(66, 66, 66));

            linearScale.ScaleBarSize = 10;

            linearScale.MinorTicksPerInterval = 3;

            sfLinearGauge.MainScale = linearScale;

Linear Gauge Scale

Setting minimum and maximum values for a scale

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

<gauge:SfLinearGauge>

        <gauge:SfLinearGauge.MainScale>

            <gauge:LinearScale Minimum="0" Maximum="200" ScaleBarStroke="#E0E0E0"/>

        </gauge:SfLinearGauge.MainScale>

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

            linearScale.ScaleBarStroke = new SolidColorBrush(Color.FromRgb(224, 224, 224));

            linearScale.Minimum = 0;

            linearScale.Maximum = 200;

            sfLinearGauge.MainScale = linearScale;

Linear Gauge Scale Value

Setting interval for a scale

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

<gauge:SfLinearGauge>

    <gauge:SfLinearGauge.MainScale>

    <gauge:LinearScale Minimum="0" Maximum="500" Interval="100" ScaleBarStroke="#E0E0E0" MajorTickStroke="Gray"

    MinorTickStroke="Gray" LabelStroke="#424242" ScaleBarSize="10"/>

    </gauge:SfLinearGauge.MainScale>

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

            linearScale.Minimum = 0;

            linearScale.Maximum = 500;

            linearScale.Interval = 100;

            linearScale.ScaleBarStroke = new SolidColorBrush(Color.FromRgb(224, 224, 224));

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

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

            linearScale.LabelStroke = new SolidColorBrush(Color.FromRgb(66, 66, 66));

            linearScale.ScaleBarSize = 10;

            sfLinearGauge.MainScale = linearScale;

Linear Gauge Interval

Scale customization

You can customize the color, length, size, and position of the LinearScale using the ScaleBarStroke, ScaleBarBorderThickness, and ScaleBarBorderBrush properties.

<gauge:SfLinearGauge>

    <gauge:SfLinearGauge.MainScale>

    <gauge:LinearScale ScaleBarBorderBrush="Red"  ScaleBarStroke="Blue" MajorTickStroke="Gray"

    MinorTickStroke="Gray" LabelStroke="#424242" ScaleBarBorderThickness="3"

    ScaleBarSize="20" MinorTicksPerInterval="3" />

    </gauge:SfLinearGauge.MainScale>

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

            linearScale.ScaleBarStroke = new SolidColorBrush(Colors.Blue);

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

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

            linearScale.LabelStroke = new SolidColorBrush(Color.FromRgb(66, 66, 66));

            linearScale.ScaleBarSize = 20;

            linearScale.ScaleBarBorderThickness = new Thickness(3);

            linearScale.ScaleBarBorderBrush = new SolidColorBrush(Colors.Red);

            linearScale.MinorTicksPerInterval = 3;

            sfLinearGauge.MainScale = linearScale;

Linear Gauge Scale Customization

Size customization

The size of the scale can be customized using the following two properties.

  • ScaleBarSize - Customizes the size of the scale bar (i.e., height in case of landscape orientation).
  • ScaleBarLength - Customizes the length of the scale bar (i.e., width in case of landscape orientation).
<Gauges:SfLinearGauge Background="AliceBlue" BorderBrush="Black" 
                          BorderThickness="1"
                              Height="300" Width="500">

 <Gauges:SfLinearGauge.MainScale>
         <Gauges:LinearScale ScaleBarStroke="Blue" ScaleBarSize="50" 
                  ScaleBarLength="350">
        </Gauges:LinearScale>
 </Gauges:SfLinearGauge.MainScale>
            
 </Gauges:SfLinearGauge>
SfLinearGauge sfLinearGauge = new SfLinearGauge();

            sfLinearGauge.Background = new SolidColorBrush(Colors.AliceBlue);

            sfLinearGauge.BorderBrush = new SolidColorBrush(Colors.Black);

            sfLinearGauge.BorderThickness = new Thickness(1);

            sfLinearGauge.Height = 300;

            sfLinearGauge.Width = 500;

            LinearScale linearScale = new LinearScale();

            linearScale.ScaleBarStroke = new SolidColorBrush(Colors.Blue);
           
            linearScale.ScaleBarSize = 50;

            linearScale.ScaleBarLength = 350;
           
            sfLinearGauge.MainScale = linearScale;

            grid.Children.Add(sfLinearGauge);

Linear Gauge Scale Size Customization

Setting scale direction

You can set the scale direction to forward or backward using the ScaleDirection property.

<gauge:SfLinearGauge>

    <gauge:SfLinearGauge.MainScale>

    <gauge:LinearScale ScaleDirection="Backward" ScaleBarStroke="#E0E0E0" MajorTickStroke="Gray"
                       MinorTickStroke="Gray" LabelStroke="#424242"  ScaleBarSize="10" 
                       MinorTicksPerInterval="3"/>

    </gauge:SfLinearGauge.MainScale>

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

            LinearScale linearScale = new LinearScale();

            linearScale.ScaleDirection = LinearScaleDirection.Backward;

            linearScale.ScaleBarStroke = new SolidColorBrush(Color.FromRgb(224, 224, 224));

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

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

            linearScale.LabelStroke = new SolidColorBrush(Color.FromRgb(66, 66, 66));

            linearScale.ScaleBarSize = 10;

            linearScale.MinorTicksPerInterval = 3;

            sfLinearGauge.MainScale = linearScale;

Linear Gauge Scale Direction

Setting position for a scale

You can set the scale position using the ScaleBarPositionFactor property. First, set the ElementsPositionMode to Custom, and then set the ScaleBarPositionFactor.

<gauge:SfLinearGauge>

    <gauge:SfLinearGauge.MainScale>

    <gauge:LinearScale  ElementsPositionMode="Custom"

    ScaleBarPositionFactor="0.5" TickPositionFactor="0.443"

    ScaleBarStroke="#E0E0E0" MajorTickStroke="Gray"

    MinorTickStroke="Gray" LabelStroke="#424242"

    MinorTickSize="9" MajorTickSize="15"

    ScaleBarSize="10" MinorTicksPerInterval="3" />

    </gauge:SfLinearGauge.MainScale>

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

            LinearScale linearScale = new LinearScale();

            linearScale.ElementsPositionMode = LinearScalePositionModes.Custom;

            linearScale.ScaleBarPositionFactor = 0.5;

            linearScale.TickPositionFactor = 0.443;

            linearScale.MajorTickSize = 9;

            linearScale.MinorTickSize = 15;

            linearScale.ScaleBarStroke = new SolidColorBrush(Color.FromRgb(224, 224, 224));

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

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

            linearScale.LabelStroke = new SolidColorBrush(Color.FromRgb(66, 66, 66));

            linearScale.ScaleBarSize = 10;

            linearScale.MinorTicksPerInterval = 3;

            sfLinearGauge.MainScale = linearScale;

Linear Gauge scale position