Pointers in Xamarin Linear Gauge (SfLinearGauge)

17 May 202124 minutes to read

SfLinearGauge provides support to mark the values using BarPointer and SymbolPointer.

Adding bar pointer to scale

BarPointer is used to mark the scale values. It starts at the beginning of gauge and ends at the pointer value.

<gauge:SfLinearGauge>

             <gauge:SfLinearGauge.Scales>
                <gauge:LinearScale ScaleBarColor="#e0e9f9" LabelColor="#424242" ScaleBarSize = "20" LabelFontSize ="14" MinorTicksPerInterval ="0">
                    <gauge:LinearScale.MajorTickSettings>
                        <gauge:LinearTickSettings Thickness="1" Color ="#9E9E9E" Length = "10"/>
                    </gauge:LinearScale.MajorTickSettings>
                    <gauge:LinearScale.Pointers>
                        <gauge:BarPointer  Value="75" EnableAnimation = "false" Color = "#36d1dc" />
                    </gauge:LinearScale.Pointers>
                </gauge:LinearScale>
            </gauge:SfLinearGauge.Scales>

        </gauge:SfLinearGauge>
SfLinearGauge linearGauge = new SfLinearGauge();
            LinearScale linearScale = new LinearScale();
            linearScale.ScaleBarColor = Color.FromHex("#e0e9f9");
            linearScale.LabelColor = Color.FromHex("#424242");
            linearScale.ScaleBarSize = 20;
            linearScale.LabelFontSize = 14;
            linearScale.MinorTicksPerInterval = 0;
            linearScale.MajorTickSettings.Color = Color.FromHex("#9E9E9E");
            linearScale.MajorTickSettings.Thickness = 1;
            linearScale.MajorTickSettings.Length = 10;

            BarPointer barPointer = new BarPointer();
            barPointer.Value = 75;
            barPointer.EnableAnimation = false;
            barPointer.Color = Color.FromHex("#36d1dc");
            linearScale.Pointers.Add(barPointer);
            linearGauge.Scales.Add(linearScale);

Linear Gauge Bar Pointer

Bar pointer customization

The bar pointer’s UI is customized by using the Color and Thickness properties.

<gauge:SfLinearGauge>

           <gauge:SfLinearGauge.Scales>
                <gauge:LinearScale ScaleBarColor="#e0e9f9" LabelColor="#424242" ScaleBarSize = "40" LabelFontSize ="14" MinorTicksPerInterval ="0">
                    <gauge:LinearScale.MajorTickSettings>
                        <gauge:LinearTickSettings Thickness="1" Color ="#9E9E9E" Length = "10"/>
                    </gauge:LinearScale.MajorTickSettings>
                    <gauge:LinearScale.Pointers>
                        <gauge:BarPointer  Value="75" EnableAnimation = "false" Color = "#36d1dc" Thickness = "20"/>
                    </gauge:LinearScale.Pointers>
                </gauge:LinearScale>
            </gauge:SfLinearGauge.Scales>

        </gauge:SfLinearGauge>
SfLinearGauge linearGauge = new SfLinearGauge();
            LinearScale linearScale = new LinearScale();
            linearScale.ScaleBarColor = Color.FromHex("#e0e9f9");
            linearScale.LabelColor = Color.FromHex("#424242");
            linearScale.ScaleBarSize = 40;
            linearScale.LabelFontSize = 14;
            linearScale.MinorTicksPerInterval = 0;
            linearScale.MajorTickSettings.Color = Color.FromHex("#9E9E9E");
            linearScale.MajorTickSettings.Thickness = 1;
            linearScale.MajorTickSettings.Length = 10;

            BarPointer barPointer = new BarPointer();
            barPointer.Value = 75;
			barPointer.Thickness = 20;
            barPointer.EnableAnimation = false;
            barPointer.Color = Color.FromHex("#36d1dc");
            linearScale.Pointers.Add(barPointer);
            linearGauge.Scales.Add(linearScale);

Linear Gauge Bar Pointer customization

Setting corner radius type for bar pointer

Corners of the BarPointer can be customized by setting the value to the CornerRadiusType property. All corners of bar pointer 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 ScaleBarColor="#e0e9f9" LabelColor="#424242" ScaleBarSize = "40" LabelFontSize ="14" MinorTicksPerInterval ="0">
                    <gauge:LinearScale.MajorTickSettings>
                        <gauge:LinearTickSettings Thickness="1" Color ="#9E9E9E" Length = "10"/>
                    </gauge:LinearScale.MajorTickSettings>
                    <gauge:LinearScale.Pointers>
                        <gauge:BarPointer  Value="75" EnableAnimation = "false" Color = "#36d1dc" Thickness = "20" CornerRadiusType = "Start" CornerRadius = "10"/>
                    </gauge:LinearScale.Pointers>
                </gauge:LinearScale>
            </gauge:SfLinearGauge.Scales>
        </gauge:SfLinearGauge>
SfLinearGauge linearGauge = new SfLinearGauge();

            LinearScale linearScale = new LinearScale();
            linearScale.ScaleBarColor = Color.FromHex("#e0e9f9");
            linearScale.LabelColor = Color.FromHex("#424242");
            linearScale.ScaleBarSize = 40;
            linearScale.LabelFontSize = 14;
            linearScale.MinorTicksPerInterval = 0;
            linearScale.MajorTickSettings.Color = Color.FromHex("#9E9E9E");
            linearScale.MajorTickSettings.Thickness = 1;
            linearScale.MajorTickSettings.Length = 10;

            BarPointer barPointer = new BarPointer();
            barPointer.Value = 75;
            barPointer.Thickness = 20;
            barPointer.CornerRadiusType = CornerRadiusType.Start;
            barPointer.CornerRadius = 10;
            barPointer.EnableAnimation = false;
            barPointer.Color = Color.FromHex("#36d1dc");
            linearScale.Pointers.Add(barPointer);

            linearGauge.Scales.Add(linearScale);

Linear Gauge Corner Radius

Setting gradient color for bar pointer

You can give smooth color transition to bar pointer to specifying the different colors based on bar pointer’s value by using GradientStops property.

<gauge:SfLinearGauge>

         <gauge:SfLinearGauge.Scales>
                <gauge:LinearScale ScaleBarColor="#F7EDED"  LabelColor="Black" ScaleBarSize="40" CornerRadius="20" CornerRadiusType="Both"
                               LabelFontSize="14" MinimumValue="0" MaximumValue="100" Interval="25" LabelOffset="-10" ShowTicks="False">
                    <gauge:LinearScale.Pointers>
                        <gauge:BarPointer Value="75" CornerRadiusType="Both" CornerRadius="15" Thickness="30" EnableAnimation="False">
                            <gauge:BarPointer.GradientStops>
                                <gauge:GaugeGradientStop Value="10" Color="#f8babf"/>
                                <gauge:GaugeGradientStop Value="40" Color="#ee89a7"/>
                                <gauge:GaugeGradientStop Value="50" Color="#e4548c"/>
                                <gauge:GaugeGradientStop Value="60" Color="#db2575"/>
                            </gauge:BarPointer.GradientStops>
                        </gauge:BarPointer>
                    </gauge:LinearScale.Pointers>
                </gauge:LinearScale>
            </gauge:SfLinearGauge.Scales>

      </gauge:SfLinearGauge>
SfLinearGauge linearGauge = new SfLinearGauge();
            LinearScale linearScale = new LinearScale();
            linearScale.ScaleBarColor = Color.FromRgb(247, 237, 237);
            linearScale.LabelColor = Color.Black;
            linearScale.ScaleBarSize = 40;
            linearScale.CornerRadius = 20;
            linearScale.CornerRadiusType = CornerRadiusType.Both;
            linearScale.LabelFontSize = 14;
            linearScale.MinimumValue = 0;
            linearScale.MaximumValue = 100;
            linearScale.Interval = 25;
            linearScale.LabelOffset = -10;
            linearScale.ShowTicks = false;

            BarPointer barPointer = new BarPointer();
            barPointer.Value = 75;
            barPointer.CornerRadiusType = CornerRadiusType.Both;
            barPointer.CornerRadius = 15;
            barPointer.Thickness = 30;
            barPointer.EnableAnimation = false;

            GaugeGradientStop gaugeGradientStop = new GaugeGradientStop();
            gaugeGradientStop.Value = 10;
            gaugeGradientStop.Color = Color.FromRgb(248, 186, 191);
            barPointer.GradientStops.Add(gaugeGradientStop);

            GaugeGradientStop gaugeGradientStop1 = new GaugeGradientStop();
            gaugeGradientStop1.Value = 40;
            gaugeGradientStop1.Color = Color.FromRgb(238, 137, 167);
            barPointer.GradientStops.Add(gaugeGradientStop1);

            GaugeGradientStop gaugeGradientStop2 = new GaugeGradientStop();
            gaugeGradientStop2.Value = 50;
            gaugeGradientStop2.Color = Color.FromRgb(228, 84, 140);
            barPointer.GradientStops.Add(gaugeGradientStop2);

            GaugeGradientStop gaugeGradientStop3 = new GaugeGradientStop();
            gaugeGradientStop3.Value = 60;
            gaugeGradientStop3.Color = Color.FromRgb(219, 37, 117);
            barPointer.GradientStops.Add(gaugeGradientStop3);

            linearScale.Pointers.Add(barPointer);
            linearGauge.Scales.Add(linearScale);

Linear Gauge Bar Pointer with Gradient

Adding symbol pointer to scale

In SymbolPointer, the value is pointed by a symbol on the scale.

<gauge:SfLinearGauge>

            <gauge:SfLinearGauge.Scales>
                <gauge:LinearScale ScaleBarColor="#e0e9f9" LabelColor="#424242" ScaleBarSize = "40" LabelFontSize ="14" MinorTicksPerInterval ="0">
                    <gauge:LinearScale.MajorTickSettings>
                        <gauge:LinearTickSettings Thickness="1" Color ="#9E9E9E" Length = "10"/>
                    </gauge:LinearScale.MajorTickSettings>
                    <gauge:LinearScale.Pointers>
                        <gauge:BarPointer  Value="75" CornerRadiusType="End" CornerRadius = "10" EnableAnimation = "false" Color = "#36d1dc" Thickness = "20"/>
                        <gauge:SymbolPointer Value ="30" EnableAnimation ="False" Color= "#5b86e5"/>
                    </gauge:LinearScale.Pointers>
                </gauge:LinearScale>
            </gauge:SfLinearGauge.Scales>

        </gauge:SfLinearGauge>
SfLinearGauge linearGauge = new SfLinearGauge();
            LinearScale linearScale = new LinearScale();
            linearScale.ScaleBarColor = Color.FromHex("#e0e9f9");
            linearScale.LabelColor = Color.FromHex("#424242");
            linearScale.ScaleBarSize = 40;
            linearScale.LabelFontSize = 14;
            linearScale.MinimumValue = 0;
            linearScale.MaximumValue = 100;
            linearScale.Interval = 10;
            linearScale.MinorTicksPerInterval = 0;
            linearScale.MajorTickSettings.Color = Color.FromHex("#9E9E9E");
            linearScale.MajorTickSettings.Thickness = 1;
            linearScale.MajorTickSettings.Length = 10;

            BarPointer barPointer = new BarPointer();
            barPointer.Value = 75;
            barPointer.Thickness = 20;
            barPointer.CornerRadiusType = CornerRadiusType.End;
            barPointer.CornerRadius = 10;
            barPointer.EnableAnimation = false;
            barPointer.Color = Color.FromHex("#36d1dc");
            linearScale.Pointers.Add(barPointer);

            SymbolPointer symbolPointer = new SymbolPointer();
            symbolPointer.Value = 30;
            symbolPointer.EnableAnimation = false;
            symbolPointer.Color = Color.FromHex("#5b86e5");
            linearScale.Pointers.Add(symbolPointer);

            linearGauge.Scales.Add(linearScale);

Linear Gauge Symbol Pointer

Symbol pointer customization

You can modify the symbol pointer’s size using the Thickness property. The color of the symbol pointer is changed using the Color property.

<gauge:SfLinearGauge>

              <gauge:SfLinearGauge.Scales>
                <gauge:LinearScale 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.Pointers>
                        <gauge:SymbolPointer Value="70" Color="DeepSkyBlue" Thickness="15"/>
                    </gauge:LinearScale.Pointers>
                </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;
            SymbolPointer symbolPointer = new SymbolPointer();
            symbolPointer.Value = 70;
            symbolPointer.Color = Color.DeepSkyBlue;
            symbolPointer.Thickness = 15;
            linearScale.Pointers.Add(symbolPointer);
            linearGauge.Scales.Add(linearScale);

Linear Gauge Symbol Pointer Customization

Positioning symbol pointer

You can position the SymbolPointer by using the following two ways:

Setting symbol pointer position

You can customize the position of the SymbolPointer by using the SymbolPointerPosition. The default symbol pointer position is Far.

<gauge:SfLinearGauge>

           <gauge:SfLinearGauge.Scales>
                <gauge:LinearScale ScaleBarColor="#e0e9f9" LabelColor="#424242" ScaleBarSize = "40" LabelFontSize ="14" MinorTicksPerInterval ="0">
                    <gauge:LinearScale.MajorTickSettings>
                        <gauge:LinearTickSettings Thickness="1" Color ="#9E9E9E" Length = "10"/>
                    </gauge:LinearScale.MajorTickSettings>
                    <gauge:LinearScale.Pointers>
                        <gauge:BarPointer  Value="75" CornerRadiusType="End" CornerRadius = "10" EnableAnimation = "false" Color = "#36d1dc" Thickness = "20"/>
                        <gauge:SymbolPointer Value ="30" EnableAnimation ="False" Color= "#5b86e5" SymbolPointerPosition = "Away"/>
                    </gauge:LinearScale.Pointers>
                </gauge:LinearScale>
            </gauge:SfLinearGauge.Scales>

        </gauge:SfLinearGauge>
SfLinearGauge linearGauge = new SfLinearGauge();
            LinearScale linearScale = new LinearScale();
            linearScale.ScaleBarColor = Color.FromHex("#e0e9f9");
            linearScale.LabelColor = Color.FromHex("#424242");
            linearScale.ScaleBarSize = 40;
            linearScale.LabelFontSize = 14;
            linearScale.MinorTicksPerInterval = 0;
            linearScale.MajorTickSettings.Color = Color.FromHex("#9E9E9E");
            linearScale.MajorTickSettings.Thickness = 1;
            linearScale.MajorTickSettings.Length = 10;

            BarPointer barPointer = new BarPointer();
            barPointer.Value = 75;
            barPointer.Thickness = 20;
            barPointer.CornerRadiusType = CornerRadiusType.End;
            barPointer.CornerRadius = 10;
            barPointer.EnableAnimation = false;
            barPointer.Color = Color.FromHex("#36d1dc");
            linearScale.Pointers.Add(barPointer);

            SymbolPointer symbolPointer = new SymbolPointer();
            symbolPointer.Value = 30;
            symbolPointer.EnableAnimation = false;
            symbolPointer.SymbolPointerPosition = SymbolPointerPosition.Away;
            symbolPointer.Color = Color.FromHex("#5b86e5");
            linearScale.Pointers.Add(symbolPointer);

            linearGauge.Scales.Add(linearScale);

Linear Gauge Positioning Symbol Pointer

Setting offset for symbol pointer

You can move the SymbolPointer by using the Offset property.

<gauge:SfLinearGauge>
            <gauge:SfLinearGauge.Scales>
                <gauge:LinearScale ScaleBarColor="#e0e9f9" LabelColor="#424242" ScaleBarSize = "40" LabelFontSize ="14" MinorTicksPerInterval ="0">
                    <gauge:LinearScale.MajorTickSettings>
                      <gauge:LinearTickSettings Thickness="1" Color ="#9E9E9E" Length = "10"/>
                    </gauge:LinearScale.MajorTickSettings>
					<gauge:LinearScale.Pointers>
					<gauge:BarPointer  Value="75" CornerRadiusType="End" CornerRadius = "10" EnableAnimation = "false" Color = "#36d1dc" Thickness = "20"/>
					<gauge:SymbolPointer Value ="30" EnableAnimation ="False" Color= "#5b86e5" Offset ="40"/>
				</gauge:LinearScale.Pointers>
                </gauge:LinearScale>
            </gauge:SfLinearGauge.Scales>
        </gauge:SfLinearGauge>
SfLinearGauge linearGauge = new SfLinearGauge();
            LinearScale linearScale = new LinearScale();
            linearScale.ScaleBarColor = Color.FromHex("#e0e9f9");
            linearScale.LabelColor = Color.FromHex("#424242");
            linearScale.ScaleBarSize = 40;
            linearScale.LabelFontSize = 14;
            linearScale.MinorTicksPerInterval = 0;
            linearScale.MajorTickSettings.Color = Color.FromHex("#9E9E9E");
            linearScale.MajorTickSettings.Thickness = 1;
            linearScale.MajorTickSettings.Length = 10;

            BarPointer barPointer = new BarPointer();
            barPointer.Value = 75;
            barPointer.Thickness = 20;
            barPointer.CornerRadiusType = CornerRadiusType.End;
            barPointer.CornerRadius = 10;
            barPointer.EnableAnimation = false;
            barPointer.Color = Color.FromHex("#36d1dc");
            linearScale.Pointers.Add(barPointer);

            SymbolPointer symbolPointer = new SymbolPointer();
            symbolPointer.Value = 30;
            symbolPointer.EnableAnimation = false;
            symbolPointer.Offset = 40;
            symbolPointer.Color = Color.FromHex("#5b86e5");
            linearScale.Pointers.Add(symbolPointer);

            linearGauge.Scales.Add(linearScale);

Linear Gauge Symbol Pointer Offset

Change symbol pointer shapes

Different types of shapes are used in SymbolPointer to mark the pointer value in scale. You can change the shape of SymbolPointer by using the MarkerShape property in pointer.

<gauge:SfLinearGauge>

            <gauge:SfLinearGauge.Scales>
                <gauge:LinearScale ScaleBarColor="#e0e9f9" LabelColor="#424242" ScaleBarSize = "40" LabelFontSize ="14" MinorTicksPerInterval ="0">
                    <gauge:LinearScale.MajorTickSettings>
                        <gauge:LinearTickSettings Thickness="1" Color ="#9E9E9E" Length = "10"/>
                    </gauge:LinearScale.MajorTickSettings>
                    <gauge:LinearScale.Pointers>
                        <gauge:BarPointer  Value="75" CornerRadiusType="End" CornerRadius = "10" EnableAnimation = "false" Color = "#36d1dc" Thickness = "20"/>
                        <gauge:SymbolPointer Value ="30" EnableAnimation ="False" Color= "#5b86e5" SymbolPointerPosition="Away" MarkerShape = "Circle"/>
                    </gauge:LinearScale.Pointers>
                </gauge:LinearScale>
            </gauge:SfLinearGauge.Scales>

        </gauge:SfLinearGauge>
SfLinearGauge linearGauge = new SfLinearGauge();
            LinearScale linearScale = new LinearScale();
            linearScale.ScaleBarColor = Color.FromHex("#e0e9f9");
            linearScale.LabelColor = Color.FromHex("#424242");
            linearScale.ScaleBarSize = 40;
            linearScale.LabelFontSize = 14;
            linearScale.MinorTicksPerInterval = 0;
            linearScale.MajorTickSettings.Color = Color.FromHex("#9E9E9E");
            linearScale.MajorTickSettings.Thickness = 1;
            linearScale.MajorTickSettings.Length = 10;

            BarPointer barPointer = new BarPointer();
            barPointer.Value = 75;
            barPointer.Thickness = 20;
            barPointer.CornerRadiusType = CornerRadiusType.End;
            barPointer.CornerRadius = 10;
            barPointer.EnableAnimation = false;
            barPointer.Color = Color.FromHex("#36d1dc");
            linearScale.Pointers.Add(barPointer);

            SymbolPointer symbolPointer = new SymbolPointer();
            symbolPointer.Value = 30;
            symbolPointer.EnableAnimation = false;
            symbolPointer.Thickness = 12;
            symbolPointer.MarkerShape = MarkerShape.Circle;
            symbolPointer.SymbolPointerPosition = SymbolPointerPosition.Away;
            symbolPointer.Color = Color.FromHex("#5b86e5");
            linearScale.Pointers.Add(symbolPointer);

            linearGauge.Scales.Add(linearScale);

Linear Gauge Symbol Pointer Shapes

Linear Gauge Symbol Pointers

Setting image shape for symbol pointer

You can achieve the image shape by setting the MarkerShape property to Image and setting image path to ImageSource property in SymbolPointer.

<gauge:SfLinearGauge>
            <gauge:SfLinearGauge.Scales>
                <gauge:LinearScale ScaleBarColor="#e0e9f9" LabelColor="#424242" ScaleBarSize = "40" LabelFontSize ="14" MinorTicksPerInterval ="0">
                    <gauge:LinearScale.MajorTickSettings>
                      <gauge:LinearTickSettings Thickness="1" Color ="#9E9E9E" Length = "10"/>
                    </gauge:LinearScale.MajorTickSettings>
					<gauge:LinearScale.Pointers>
					<gauge:BarPointer  Value="75" CornerRadiusType="End" CornerRadius = "10" EnableAnimation = "false" Color = "#36d1dc" Thickness = "20"/>
					<gauge:SymbolPointer Value ="30" EnableAnimation ="False" Color= "#5b86e5" Offset ="40" MarkerShape ="Image" ImageSource="location.png"/>
				</gauge:LinearScale.Pointers>
                </gauge:LinearScale>
            </gauge:SfLinearGauge.Scales>
        </gauge:SfLinearGauge>
SfLinearGauge linearGauge = new SfLinearGauge();
            LinearScale linearScale = new LinearScale();
            linearScale.ScaleBarColor = Color.FromHex("#e0e9f9");
            linearScale.LabelColor = Color.FromHex("#424242");
            linearScale.ScaleBarSize = 40;
            linearScale.LabelFontSize = 14;
            linearScale.MinorTicksPerInterval = 0;
            linearScale.MajorTickSettings.Color = Color.FromHex("#9E9E9E");
            linearScale.MajorTickSettings.Thickness = 1;
            linearScale.MajorTickSettings.Length = 10;

            BarPointer barPointer = new BarPointer();
            barPointer.Value = 75;
            barPointer.Thickness = 20;
            barPointer.CornerRadiusType = CornerRadiusType.End;
            barPointer.CornerRadius = 10;
            barPointer.EnableAnimation = false;
            barPointer.Color = Color.FromHex("#36d1dc");
            linearScale.Pointers.Add(barPointer);

            SymbolPointer symbolPointer = new SymbolPointer();
            symbolPointer.Value = 30;
            symbolPointer.EnableAnimation = false;
            symbolPointer.Thickness = 12;
            symbolPointer.MarkerShape = MarkerShape.Image;
			symbolPointer.ImageSource = "location.png";
            symbolPointer.Offset = 40;
            symbolPointer.Color = Color.FromHex("#5b86e5");
            linearScale.Pointers.Add(symbolPointer);

            linearGauge.Scales.Add(linearScale);

Linear Gauge Symbol Pointer Image

Adding multiple pointers

In addition to the default pointer, you can add n number of pointers to a linear scale by using the Pointers property.

<gauge:SfLinearGauge>
     
            <gauge:SfLinearGauge.Scales>
                <gauge:LinearScale ScaleBarColor="#e0e9f9" LabelColor="#424242" CornerRadiusType="End" CornerRadius="20" ScaleBarSize = "40" LabelFontSize ="14" MinorTicksPerInterval ="0">
                    <gauge:LinearScale.MajorTickSettings>
                        <gauge:LinearTickSettings Thickness="1" Color ="#9E9E9E" Length = "10"/>
                    </gauge:LinearScale.MajorTickSettings>
                    <gauge:LinearScale.Pointers>
                        <gauge:BarPointer  Value="75" CornerRadiusType="End" EnableAnimation = "false" Color = "#36d1dc" Thickness = "30"/>
                        <gauge:SymbolPointer Value ="30" EnableAnimation ="False" Color= "#5b86e5" SymbolPointerPosition="Away" MarkerShape="Triangle"/>
                    </gauge:LinearScale.Pointers>
                </gauge:LinearScale>
            </gauge:SfLinearGauge.Scales>

        </gauge:SfLinearGauge>
SfLinearGauge linearGauge = new SfLinearGauge();
            LinearScale linearScale = new LinearScale();
            linearScale.ScaleBarColor = Color.FromHex("#e0e9f9");
            linearScale.LabelColor = Color.FromHex("#424242");
            linearScale.ScaleBarSize = 40;
            linearScale.CornerRadius = 20;
            linearScale.CornerRadiusType = CornerRadiusType.End;
            linearScale.LabelFontSize = 14;
            linearScale.MinorTicksPerInterval = 0;
            linearScale.MajorTickSettings.Color = Color.FromHex("#9E9E9E");
            linearScale.MajorTickSettings.Thickness = 1;
            linearScale.MajorTickSettings.Length = 10;

            BarPointer barPointer = new BarPointer();
            barPointer.Value = 75;
            barPointer.CornerRadiusType = CornerRadiusType.End;
            barPointer.Thickness = 30;
            barPointer.EnableAnimation = false;
            barPointer.Color = Color.FromHex("#36d1dc");
            linearScale.Pointers.Add(barPointer);

            SymbolPointer symbolPointer = new SymbolPointer();
            symbolPointer.Value = 30;
            symbolPointer.Thickness = 12;
            symbolPointer.EnableAnimation = false;
            symbolPointer.Color = Color.FromHex("#5b86e5");
            symbolPointer.MarkerShape = MarkerShape.Triangle;
            symbolPointer.SymbolPointerPosition = SymbolPointerPosition.Away;
            linearScale.Pointers.Add(symbolPointer);
            linearGauge.Scales.Add(linearScale);

Linear Gauge Multiple Pointers