Labels in .NET MAUI Linear Gauge (SfLinearGauge)

13 Jul 20266 minutes to read

The default style of gauge labels is as follows.

NOTE

Prerequisite: Ensure that the required NuGet package is installed, the necessary namespaces are imported, and the .NET MAUI Linear Gauge control is properly configured in your application. For detailed setup and configuration instructions, refer to the Getting Started guide.

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 you to customize the color of the labels.
• FontFamily – Allows you to specify the font family for labels.
• FontAttributes – Allows you to specify the font weight for labels.
• FontSize – Allows you to specify the font size for labels.

XAML

<gauge:SfLinearGauge>
    <gauge:SfLinearGauge.LabelStyle>
        <gauge:GaugeLabelStyle FontAttributes="Bold" FontSize="15" 
                               TextColor="Red" 
                               FontFamily="TimesNewRoman"/>
    </gauge:SfLinearGauge.LabelStyle>
</gauge:SfLinearGauge>

C#

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;

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.

XAML

<gauge:SfLinearGauge ShowLabels="False"/>

C#

SfLinearGauge gauge = new SfLinearGauge();
gauge.ShowLabels = false;
this.Content = gauge;

Customize interval between labels

The interval between labels can be customized using the Interval property of SfLinearGauge. By default, the interval is auto-calculated. The major ticks are generated based on this Interval property.

XAML

<gauge:SfLinearGauge Interval="20"/>

C#

SfLinearGauge gauge = new SfLinearGauge();
gauge.Interval = 20;
this.Content = gauge;

Change label position

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

XAML

<gauge:SfLinearGauge LabelPosition="Outside"/>

C#

SfLinearGauge gauge = new SfLinearGauge();
gauge.LabelPosition = GaugeLabelsPosition.Outside;
this.Content = gauge;

Change label offset

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

XAML

<gauge:SfLinearGauge LabelOffset="20"/>

C#

SfLinearGauge gauge = new SfLinearGauge();
gauge.LabelOffset = 20;
this.Content = gauge;

Customize maximum number of visible labels

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

XAML

<gauge:SfLinearGauge MaximumLabelsCount="1"/>

C#

SfLinearGauge gauge = new SfLinearGauge();
gauge.MaximumLabelsCount = 1;
this.Content = gauge;

Customize label text

You can format or change the entire numeric label text using the LabelCreated event. The event provides a LabelCreatedEventArgs parameter containing the label’s Text property, which can be modified to customize the displayed text.

XAML

<gauge:SfLinearGauge LabelCreated="Gauge_LabelCreated"/>

C#

SfLinearGauge gauge = new SfLinearGauge();
gauge.LabelCreated += Gauge_LabelCreated;
this.Content = gauge;

//code omitted for brevity

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";
}

Label format

The LabelFormat property is used to format the numeric labels using standard .NET numeric format strings (e.g., C for currency, N for number, P for percent). The default value of this property is null.

XAML

<gauge:SfLinearGauge LabelFormat="C"/>

C#

SfLinearGauge gauge = new SfLinearGauge();
gauge.LabelFormat = "C";
this.Content = gauge;