How to add a benchmark line to the.NET MAUI Cartesian Chart?

This article will guide you through adding a benchmark line to your .NET MAUI Cartesian Chart’s feature tour. We can achieve this using two methods, which are explained below:

Method 1: Annotation

You can represent a benchmark line in a chart using the annotation feature and set the target value to the Y1 position of HorizontalLineAnnotation. For example, the target value has been set to 62 in the following data.

Data:

Target Value: 62%

The following code demonstrates how to add benchmark line in a chart using the annotation feature.

XAML

<chart:SfCartesianChart>
…
     <chart:ColumnSeries ItemsSource="{Binding Data}"
                   XBindingPath="XValue"
                   YBindingPath="YValue"
                   ShowDataLabels="True">
   <chart:ColumnSeries.DataLabelSettings>
       <chart:CartesianDataLabelSettings>
           <chart:CartesianDataLabelSettings.LabelStyle>
               <chart:ChartDataLabelStyle TextColor="White" LabelFormat="0'%"></chart:ChartDataLabelStyle>
           </chart:CartesianDataLabelSettings.LabelStyle>
       </chart:CartesianDataLabelSettings>
   </chart:ColumnSeries.DataLabelSettings>
</chart:ColumnSeries>
<chart:SfCartesianChart.Annotations>
   <chart:HorizontalLineAnnotation Y1="62" StrokeWidth="6" Stroke="Orange" Text="Benchmark">
       <chart:HorizontalLineAnnotation.LabelStyle>
           <chart:ChartAnnotationLabelStyle HorizontalTextAlignment="Start" VerticalTextAlignment="End"/>
       </chart:HorizontalLineAnnotation.LabelStyle>
   </chart:HorizontalLineAnnotation>
</chart:SfCartesianChart.Annotations>

</chart:SfCartesianChart> 

C#

var chart = new SfCartesianChart();
…

var series = new ColumnSeries();
series.ItemsSource = new ViewModel().Data;
series.XBindingPath = "XValue";
series.YBindingPath = "YValue";
series.ShowDataLabels = true;
series.DataLabelSettings = new CartesianDataLabelSettings()
{
 LabelStyle = new ChartDataLabelStyle()
 {
    LabelFormat = "0'%",
    TextColor = Colors.White,
 }
};

chart.Series.Add(series);

var horizontalLineAnnotation = new HorizontalLineAnnotation()
{
 Y1 = 62,
 StrokeWidth = 6,
 Stroke = Colors.Orange,
 Text = "Benchmark",
 LabelStyle = new ChartAnnotationLabelStyle()
 {
   HorizontalTextAlignment = ChartLabelAlignment.Start,
   VerticalTextAlignment = ChartLabelAlignment.End,
 },
};

chart.Annotations.Add(horizontalLineAnnotation);

this.Content = chart; 

Ouptut:

Creating a benchmark line in a .NET MAUI Cartesian Chart can effectively compare data points against a specific reference value visually.

Step 1: Create an extension class inheriting from the series class you used to add a benchmark line.
Step 2: Additionally, add a bindable property named SpecificYValueProperty for retrieving the specific y-axis value.

Here, an extension class is created that inherits from the ColumnSeries class.

C#

public class SeriesExt : ColumnSeries
{
   public static readonly BindableProperty SpecificYValueProperty = BindableProperty.Create(nameof(SpecificYValue), typeof(double), typeof(SeriesExt),0.0,BindingMode.Default);

   public double SpecificYValue
   {
       get { return (double)GetValue(SpecificYValueProperty); }
       set { SetValue(SpecificYValueProperty, value); }
   }   
} 

Step 3: Override the DrawSeries() method to draw a horizontal line at the specified y-value, as shown in the following code sample.

C#

public class SeriesExt : ColumnSeries
{
   . . .   
   protected override void DrawSeries(ICanvas canvas, ReadOnlyObservableCollection<chartsegment> segments, RectF clipRect)
   {
       base.DrawSeries(canvas, segments, clipRect);
       if (ActualXAxis != null && ActualYAxis != null)
       {
           float startPoint = (float)clipRect.Left;
           float endPoint = (float)clipRect.Right;
           var yPoint = ActualYAxis.ValueToPoint(SpecificYValue);
           canvas.StrokeColor = Colors.Black;
           canvas.StrokeSize = 5;
           canvas.DrawLine(startPoint, yPoint, endPoint, yPoint);
       }
   }
} 

In the following section, where a SeriesExt is added to the chart, the SpecificYValue property is set to 65. This indicates that a horizontal line will be drawn on the chart at the position of 65 on the y-axis.

XAML

<chart:SfCartesianChart>
. . .
   <model:SeriesExt ItemsSource="{Binding Data}" 
                    XBindingPath="XValue" 
                    YBindingPath="YValue" 
                    SpecificYValue="65"/>

</chart:SfCartesianChart> 

Output

Explore the runnable demo from this GitHub location.

Conclusion
I hope you enjoyed learning how to add benchmark lines in the .NET MAUI Cartesian chart.
Refer to our .NET MAUI Cartesian Chart’s feature tour page to learn about its other groundbreaking feature representations. You can also explore our .NET MAUI Chart documentation to understand how to present and manipulate data.

For current customers, check out our .NET MAUI from the License and Downloads page. If you are new to Syncfusion, try our 30-day free trial to check out our .NET MAUI Chart and other .NET MAUI components.

Please let us know in the following comments section if you have any queries or require clarifications. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!