Annotation in .NET MAUI Radial Gauge

17 Jul 202621 minutes to read

Radial axis allows you to add multiple views such as text, icon, and image, as an annotation to a specific point of interest in the radial gauge.

The following properties are available in Annotation to customize the position and alignment:

DirectionValue, of type double, specifies the value that indicates the direction of the annotation based on the DirectionUnit property.
DirectionUnit, of the AnnotationDirection enum, specifies whether the direction is calculated based on the axis value or the angle. The available values are AxisValue and Angle. The default value is Angle.
PositionFactor, of type double, specifies the factor value (from 0 to 1) to adjust the annotation distance from the center point. The default value is 0.
HorizontalAlignment, of the GaugeAlignment enum, specifies the horizontal alignment for positioning the annotation.
VerticalAlignment, of the GaugeAlignment enum, specifies the vertical alignment for positioning the annotation.

NOTE

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

XAML
C#
<gauge:SfRadialGauge>
    <gauge:SfRadialGauge.Axes>
        <gauge:RadialAxis>
            <gauge:RadialAxis.Annotations>
                <gauge:GaugeAnnotation>
                    <gauge:GaugeAnnotation.Content>
                        <Label Text = "50.0"
                            FontAttributes = "Bold"
                            TextColor = "Black"
                            FontSize = "20" />
                    </gauge:GaugeAnnotation.Content>
                </gauge:GaugeAnnotation>
            </gauge:RadialAxis.Annotations>
        </gauge:RadialAxis>
    </gauge:SfRadialGauge.Axes>
</gauge:SfRadialGauge>
SfRadialGauge sfRadialGauge = new SfRadialGauge();

RadialAxis radialAxis = new RadialAxis();
sfRadialGauge.Axes.Add(radialAxis);

GaugeAnnotation gaugeAnnotation = new GaugeAnnotation();
gaugeAnnotation.Content = new Label
{
    Text = "50.0",
    TextColor = Colors.Black,
    FontAttributes = FontAttributes.Bold,
    FontSize = 20
};
radialAxis.Annotations.Add(gaugeAnnotation);

this.Content = sfRadialGauge;

Annotation Position in .NET MAUI Radial Gauge

Positioning annotation

The annotation can be positioned using either the Angle or the Axis value. It can be controlled by the DirectionUnit property of Annotation. The default value is Angle.

Positioning annotation using angle

The following example shows how to position the annotation using angle.

XAML
C#
<gauge:SfRadialGauge>
    <gauge:SfRadialGauge.Axes>
        <gauge:RadialAxis>
            <gauge:RadialAxis.Pointers>
                <gauge:NeedlePointer Value = "90" />
            </gauge:RadialAxis.Pointers>
            <gauge:RadialAxis.Annotations>
                <gauge:GaugeAnnotation DirectionValue = "90"
                                       PositionFactor = "0.5">
                    <gauge:GaugeAnnotation.Content>
                         <Label Text = "90.0"
                                TextColor = "Black"
                                FontAttributes = "Bold"
                                FontSize = "20" />
                    </gauge:GaugeAnnotation.Content>
                </gauge:GaugeAnnotation>
            </gauge:RadialAxis.Annotations>
        </gauge:RadialAxis>
    </gauge:SfRadialGauge.Axes>
</gauge:SfRadialGauge>
SfRadialGauge sfRadialGauge = new SfRadialGauge();

RadialAxis radialAxis = new RadialAxis();
sfRadialGauge.Axes.Add(radialAxis);

NeedlePointer needlePointer = new NeedlePointer();
needlePointer.Value = 90;
radialAxis.Pointers.Add(needlePointer);

GaugeAnnotation gaugeAnnotation = new GaugeAnnotation();
gaugeAnnotation.DirectionValue = 90;
gaugeAnnotation.PositionFactor = 0.5;
gaugeAnnotation.Content = new Label()
{
    Text = "90.0",
    FontAttributes = FontAttributes.Bold,
    TextColor = Colors.Black,
    FontSize = 20
};
radialAxis.Annotations.Add(gaugeAnnotation);

this.Content = sfRadialGauge;

Annotation Position with Angle in .NET MAUI Radial Gauge

Positioning annotation using the axis value

The following example shows how to position the annotation using the axis value.

XAML
C#
<gauge:SfRadialGauge>
    <gauge:SfRadialGauge.Axes>
        <gauge:RadialAxis>
            <gauge:RadialAxis.Annotations>
                <gauge:GaugeAnnotation DirectionUnit = "AxisValue"
                                       DirectionValue = "50"
                                       PositionFactor = "0.4">
                    <gauge:GaugeAnnotation.Content>
                         <Label Text = "50.0"
                                TextColor = "Black"
                                FontAttributes = "Bold"
                                FontSize = "20" />
                    </gauge:GaugeAnnotation.Content>
                </gauge:GaugeAnnotation>
            </gauge:RadialAxis.Annotations>
        </gauge:RadialAxis>
    </gauge:SfRadialGauge.Axes>
</gauge:SfRadialGauge>
SfRadialGauge sfRadialGauge = new SfRadialGauge();

RadialAxis radialAxis = new RadialAxis();
sfRadialGauge.Axes.Add(radialAxis);

GaugeAnnotation gaugeAnnotation = new GaugeAnnotation();
gaugeAnnotation.DirectionUnit = AnnotationDirection.AxisValue;
gaugeAnnotation.DirectionValue = 50;
gaugeAnnotation.PositionFactor = 0.4;
gaugeAnnotation.Content = new Label()
{
    Text = "50.0",
    FontAttributes = FontAttributes.Bold,
    TextColor = Colors.Black,
    FontSize = 20
};
radialAxis.Annotations.Add(gaugeAnnotation);

this.Content = sfRadialGauge;

Annotation Position with Axis in .NET MAUI Radial Gauge

The PositionFactor moves the annotation from the center of the axis toward its edge. For example, when PositionFactor is set to 0.5, the annotation is moved from the center to the corresponding direction by half the radius value of the axis. The default value of PositionFactor is 0, which positions the annotation at the center of the axis.

Setting image for annotation

Annotations provide options to add any image over the gauge control with respect to its offset position. You can add multiple images in a single control.

XAML
C#
<gauge:SfRadialGauge>
    <gauge:SfRadialGauge.Axes>
        <gauge:RadialAxis Interval = "10"
                          StartAngle = "0"
                          EndAngle = "360"
                          ShowTicks = "False"
                          ShowLabels = "False">
            <gauge:RadialAxis.AxisLineStyle>
                <gauge:RadialLineStyle Thickness = "30"/>
            </gauge:RadialAxis.AxisLineStyle>
            <gauge:RadialAxis.Pointers>
                <gauge:RangePointer Value = "73"
                                    PointerWidth = "30"
                                    EnableAnimation = "True"
                                    Fill = "#FFFCE38A"
                                    CornerStyle = "BothCurve" />
            </gauge:RadialAxis.Pointers>
            <gauge:RadialAxis.Annotations>
                <gauge:GaugeAnnotation>
                    <gauge:GaugeAnnotation.Content>
                        <VerticalStackLayout>
                            <Image Source = "sun.png" HeightRequest = "50" WidthRequest = "60" />
                            <Label Text = "73°F"
                                   FontSize = "22"
                                   TextColor = "Black"
                                   FontAttributes = "Bold" />
                        </VerticalStackLayout>
                    </gauge:GaugeAnnotation.Content>
                </gauge:GaugeAnnotation>
            </gauge:RadialAxis.Annotations>
        </gauge:RadialAxis>
    </gauge:SfRadialGauge.Axes>
</gauge:SfRadialGauge>
SfRadialGauge sfRadialGauge = new SfRadialGauge();

RadialAxis radialAxis = new RadialAxis();
radialAxis.Interval = 10;
radialAxis.StartAngle = 0;
radialAxis.EndAngle = 360;
radialAxis.ShowTicks = false;
radialAxis.ShowLabels = false;
radialAxis.AxisLineStyle.Thickness = 30;
sfRadialGauge.Axes.Add(radialAxis);

RangePointer rangePointer = new RangePointer();
rangePointer.Value = 73;
rangePointer.PointerWidth = 30;
rangePointer.EnableAnimation = true;
rangePointer.Fill = new SolidColorBrush(Color.FromRgb(252, 227, 138));
rangePointer.CornerStyle = CornerStyle.BothCurve;
radialAxis.Pointers.Add(rangePointer);

VerticalStackLayout layout = new VerticalStackLayout();

Image image = new Image();
image.Source = ImageSource.FromFile("sun.png");
image.HeightRequest = 50;
image.WidthRequest = 60;
layout.Add(image);

Label label = new Label();
label.Text = "73°F";
label.TextColor = Colors.Black;
label.FontSize = 22;
label.FontAttributes = FontAttributes.Bold;
layout.Add(label);

GaugeAnnotation gaugeAnnotation = new GaugeAnnotation();
gaugeAnnotation.Content = layout;
radialAxis.Annotations.Add(gaugeAnnotation);

this.Content = sfRadialGauge;

Image Annotation in .NET MAUI Radial Gauge

Alignment of annotation

Annotation can be aligned to Start, Center, or End using the HorizontalAlignment and VerticalAlignment properties of the annotation. Both properties use the GaugeAlignment enum, and their default value is Center.

The following code example demonstrates how to set the HorizontalAlignment for annotation.

XAML
C#
<gauge:SfRadialGauge>
    <gauge:SfRadialGauge.Axes>
        <gauge:RadialAxis>
            <gauge:RadialAxis.Annotations>
                <gauge:GaugeAnnotation DirectionUnit = "AxisValue"
                                       DirectionValue = "50"
                                       PositionFactor = "0.4"
                                       HorizontalAlignment = "Start">
                    <gauge:GaugeAnnotation.Content>
                         <Label Text = "50.0"
                                TextColor = "Black"
                                FontAttributes = "Bold"
                                FontSize = "20" />
                    </gauge:GaugeAnnotation.Content>
                </gauge:GaugeAnnotation>
            </gauge:RadialAxis.Annotations>
        </gauge:RadialAxis>
    </gauge:SfRadialGauge.Axes>
</gauge:SfRadialGauge>
SfRadialGauge sfRadialGauge = new SfRadialGauge();

RadialAxis radialAxis = new RadialAxis();
sfRadialGauge.Axes.Add(radialAxis);

GaugeAnnotation gaugeAnnotation = new GaugeAnnotation();
gaugeAnnotation.DirectionUnit = AnnotationDirection.AxisValue;
gaugeAnnotation.DirectionValue = 50;
gaugeAnnotation.HorizontalAlignment = GaugeAlignment.Start;
gaugeAnnotation.PositionFactor = 0.4;
gaugeAnnotation.Content = new Label()
{
    Text = "50.0",
    FontAttributes = FontAttributes.Bold,
    TextColor = Colors.Black,
    FontSize = 20
};
radialAxis.Annotations.Add(gaugeAnnotation);

this.Content = sfRadialGauge;

Annotation Horizontal Alignment in .NET MAUI Radial Gauge

The following code example demonstrates how to set VerticalAlignment for annotation.

XAML
C#
<gauge:SfRadialGauge>
    <gauge:SfRadialGauge.Axes>
        <gauge:RadialAxis>
            <gauge:RadialAxis.Annotations>
                <gauge:GaugeAnnotation DirectionUnit = "AxisValue"
                                       DirectionValue = "80"
                                       PositionFactor = "0.4"
                                       VerticalAlignment = "Start">
                    <gauge:GaugeAnnotation.Content>
                         <Label Text = "50.0"
                                TextColor = "Black"
                                FontAttributes = "Bold"
                                FontSize = "20" />
                    </gauge:GaugeAnnotation.Content>
                </gauge:GaugeAnnotation>
            </gauge:RadialAxis.Annotations>
        </gauge:RadialAxis>
    </gauge:SfRadialGauge.Axes>
</gauge:SfRadialGauge>
SfRadialGauge sfRadialGauge = new SfRadialGauge();

RadialAxis radialAxis = new RadialAxis();
sfRadialGauge.Axes.Add(radialAxis);

GaugeAnnotation gaugeAnnotation = new GaugeAnnotation();
gaugeAnnotation.DirectionUnit = AnnotationDirection.AxisValue;
gaugeAnnotation.DirectionValue = 80;
gaugeAnnotation.VerticalAlignment = GaugeAlignment.Start;
gaugeAnnotation.PositionFactor = 0.4;
gaugeAnnotation.Content = new Label()
{
    Text = "50.0",
    FontAttributes = FontAttributes.Bold,
    TextColor = Colors.Black,
    FontSize = 20
};
radialAxis.Annotations.Add(gaugeAnnotation);

this.Content = sfRadialGauge;

Annotation Vertical Alignment in .NET MAUI Radial Gauge

Search docs

Ask Syncfusion AI Assistant