How to add arrows to the chart axis in .NET MAUI Chart (SfCartesianChart)?

This article provides a detailed walkthrough on how to add arrows to the axis using Annotations in .NET MAUI Cartesian Chart.

The SfCartesianChart includes support for Annotations, enabling the addition of various types of annotations to enhance chart visualization. Using Line Annotation, you can add arrows to the axis.

The Line Annotation includes following property:

• X1 - Gets or sets the X1 coordinate of the line annotation.
• X2 - Gets or sets the X2 coordinate of the line annotation.
• Y1 - Gets or sets the Y1 coordinate of the line annotation.
• Y2 - Gets or sets the Y2 coordinate of the line annotation.
• CoordinateUnit - Gets or sets the property that identifies whether the annotation is positioned based on Pixel or Axis coordinates.
• LineCap - Gets or sets the property that specifies whether an arrow is added to the line annotation based on Arrow or None options.

Learn step-by-step instructions and gain insights to add arrows to the axis using annotations.

Step 1: Initialize the SfCartesianChart and add the series and legend to it as follows.

XAML

<chart:SfCartesianChart>

   <chart:SfCartesianChart.Legend>
       <chart:ChartLegend/>
   </chart:SfCartesianChart.Legend>

   <chart:ColumnSeries ItemsSource="{Binding ElectronicsSales}"
           XBindingPath="Month"
           YBindingPath="Sales"
           EnableTooltip="True"
           EnableAnimation="True"
           Label="Electronic Sales">
   </chart:ColumnSeries>

   <chart:ColumnSeries ItemsSource="{Binding FurnitureSales}"
           XBindingPath="Month"
           YBindingPath="Sales"
           EnableTooltip="True"
           EnableAnimation="True"
           Label="Furniture Sales">
   </chart:ColumnSeries>

</chart:SfCartesianChart> 

C#:

var chart = new SfCartesianChart();

chart.Legend = new ChartLegend();

var electronicSalesData = new ViewModel().ElectronicsSales;
var furnitureSalesData = new ViewModel().FurnitureSales;

var electronicSalesSeries = new ColumnSeries
{
   ItemsSource = electronicSalesData,
   XBindingPath = "Month",
   YBindingPath = "Sales",
   EnableTooltip = true,
   EnableAnimation = true,
   Label = "Electronic Sales"
};
chart.Series.Add(electronicSalesSeries);

var furnitureSalesSeries = new ColumnSeries
{
   ItemsSource = furnitureSalesData,
   XBindingPath = "Month",
   YBindingPath = "Sales",
   EnableTooltip = true,
   EnableAnimation = true,
   Label = "Furniture Sales"
};
chart.Series.Add(furnitureSalesSeries); 

Step 2: Initialize the LineAnnotation within the Annotations collection of the SfCartesianChart, configure it to align with the desired axis, and use the LineCap property to add arrows to the line annotation.

XAML

<chart:SfCartesianChart>

   <chart:SfCartesianChart.XAxes>
       <chart:CategoryAxis PlotOffsetStart="7" PlotOffsetEnd="17">
           .....
       </chart:CategoryAxis>
   </chart:SfCartesianChart.XAxes>

   <chart:SfCartesianChart.YAxes>
       <chart:NumericalAxis Minimum="0" Maximum="30000" Interval="10000" PlotOffsetEnd="10" PlotOffsetStart="7">
           .....
       </chart:NumericalAxis>
   </chart:SfCartesianChart.YAxes>

   <chart:SfCartesianChart.Annotations>
       <chart:LineAnnotation CoordinateUnit="Axis" X1="-0.5" X2="5.6" Y1="0" Y2="0" Stroke="Black" LineCap="Arrow" StrokeWidth="2"/>
       <chart:LineAnnotation CoordinateUnit="Axis" X1="-0.5" X2="-0.5" Y1="0" Y2="30000" Stroke="Black" LineCap="Arrow" StrokeWidth="2"/>
   </chart:SfCartesianChart.Annotations>

</chart:SfCartesianChart> 

C#:

var chart = new SfCartesianChart();

var categoryAxis = new CategoryAxis
{
   .....
};
chart.XAxes.Add(categoryAxis);

var numericalAxis = new NumericalAxis
{
   .....
};
chart.YAxes.Add(numericalAxis);

chart.Annotations.Add(new LineAnnotation
{
   CoordinateUnit = ChartCoordinateUnit.Axis,
   X1 = -0.5,
   X2 = 5.6,
   Y1 = 0,
   Y2 = 0,
   Stroke = Brush.Black,
   LineCap = ChartLineCap.Arrow,
   StrokeWidth = 2
});

chart.Annotations.Add(new LineAnnotation
{
   CoordinateUnit = ChartCoordinateUnit.Axis,
   X1 = -0.5,
   X2 = -0.5,
   Y1 = 0,
   Y2 = 30000,
   Stroke = Brush.Black,
   LineCap = ChartLineCap.Arrow,
   StrokeWidth = 2
});

Content = chart; 

Output:

You can find the complete sample from this GitHub Repo link.

Conclusion:
I hope you enjoyed learning about how to add arrows to the axis using Annotations in .NET MAUI Cartesian Chart.
You can refer to our .NET MAUI CartesianChart feature tour page to know 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, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trail to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!