Labels in .NET MAUI Linear Gauge (SfLinearGauge)

21 Jan 20256 minutes to read

The default style of gauge labels is as follows.

Initialize linear gauge for axis

Customize label styles

Scale labels can be customized using the LabelStyle property of SfLinearGauge. The LabelStyle property has the following properties to customize the scale labels.

  • TextColor – Allows to customize the color of the labels.
  • FontFamily – Allows to specify the font family for labels.
  • FontAttributes – Allows to specify the font weight for labels.
  • FontSize – Allows to specify the font size for labels.
<gauge:SfLinearGauge>
                <gauge:SfLinearGauge.LabelStyle>
                    <gauge:GaugeLabelStyle FontAttributes="Bold" FontSize="15" 
                                           TextColor="Red" 
                                           FontFamily="TimesNewRoman"/>
                </gauge:SfLinearGauge.LabelStyle>
            </gauge:SfLinearGauge>
SfLinearGauge gauge = new SfLinearGauge();
		gauge.LabelStyle.FontSize = 15;
		gauge.LabelStyle.FontFamily = "TimesNewRoman";
		gauge.LabelStyle.TextColor = Colors.Red;
		gauge.LabelStyle.FontAttributes = FontAttributes.Bold;
		this.Content = gauge;

Customize linear gauge axis label style

Change visibility

The ShowLabels property of SfLinearGauge allows you to show or hide the visibility of scale labels. The default value of this property is true.

<gauge:SfLinearGauge ShowLabels="False">
                
            </gauge:SfLinearGauge>
SfLinearGauge gauge = new SfLinearGauge();
		gauge.ShowLabels = false;
		this.Content = gauge;

Change visibility

Customize interval between labels

The Interval between labels can be customized using the Interval property of SfLinearGauge. The major ticks are generated based on this Interval property.

<gauge:SfLinearGauge Interval="20">
                
</gauge:SfLinearGauge>
SfLinearGauge gauge = new SfLinearGauge();
		gauge.Interval = 20;
		this.Content = gauge;

Set label interval in axis track

Change label position

The linear gauge allows to position the labels either Inside or Outside the gauge track using the LabelPosition property. By default, labels are positioned Inside the gauge track.

<gauge:SfLinearGauge  TickPosition="Outside" LabelPosition="Outside">
                
  </gauge:SfLinearGauge>
SfLinearGauge gauge = new SfLinearGauge();
		gauge.TickPosition = GaugeElementPosition.Outside;
		gauge.LabelPosition = GaugeLabelsPosition.Outside;
		this.Content = gauge;

Set linear gauge label position

Change label offset

The LabelOffset property allows you to adjust the distance between the tick-end and the labels.

<gauge:SfLinearGauge LabelOffset="20"/>
SfLinearGauge gauge = new SfLinearGauge();
		gauge.LabelOffset = 20;
		this.Content = gauge;

Set linear gauge label offset

Customize maximum number of visible labels

By default, a maximum of three labels is displayed for every 100 logical pixels in an scale. The maximum number of labels that should present within 100 logical pixels length can be customized using the MaximumLabelsCount property of the scale.

<gauge:SfLinearGauge MaximumLabelsCount="1"/>
SfLinearGauge gauge = new SfLinearGauge();
		gauge.MaximumLabelsCount = 1;
		this.Content = gauge;

Set maximum number of labels in axis track

Customize label text

You can format or change the whole numeric label text using the LabelCreated event.

<gauge:SfLinearGauge LabelCreated="Gauge_LabelCreated"/>
SfLinearGauge gauge = new SfLinearGauge();
        gauge.LabelCreated += Gauge_LabelCreated;
		this.Content = gauge;

...

private void Gauge_LabelCreated(object sender, LabelCreatedEventArgs e)
{
		if (e.Text == "0")
			e.Text = "Start";
		else if (e.Text == "50")
			e.Text = "Mid";
		else if (e.Text == "100")
			e.Text = "End";
}

Customize Label Text in axis track

Label format

The LabelFormat property is used to format the numeric labels. The default value of this property is null.

<gauge:SfLinearGauge LabelFormat="C" Interval="25"/>
SfLinearGauge gauge = new SfLinearGauge();
		gauge.LabelFormat = "C";
		gauge.Interval = 25;
		this.Content = gauge;

Customize Label Format in Axis Label