How to add arrows to the chart axis in .NET MAUI Cartesian Chart?

This article provides a detailed walkthrough on how to add arrows to the axis using Annotations in a .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 the following properties:

• 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 the 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 LineAnnotation in 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:

Download the complete sample from GitHub.

Conclusion:
I hope you enjoyed learning how to add arrows to the chart axis in .NET MAUI Cartesian Chart.

You can refer to our .NET MAUI Cartesian Chart feature tour page to know about its other groundbreaking feature representations.

Explore our .NET MAUI Chart documentation to understand how to present and manipulate data.
For current customers, check out our components from the License and Downloads page. If you are new to Syncfusion®, try our 30-day free trial to check out our other controls.

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