How to add arrows to the chart axis in WPF Chart?

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

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

The Line Annotation includes following property:

• X1 - Represents the X1 Coordinate of the Line Annotation.
• X2 - Represents the X2 Coordinate of the Line Annotation.
• Y1 - Represents the Y1 Coordinate of the Line Annotation.
• Y2 - Represents the Y2 Coordinate of the Line Annotation.
• CanDrag - A Boolean value that represent to drag the Annotation.
• CanResize - A Boolean value that represent to resize the Annotation.
• CoordinateUnit - A Coordinate unit value that represent to position the Annotation based on Pixel or Axis coordinate.
• LineCap - Used to display arrow head for 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 SfChart and add the series and legend to it as follows.

XAML

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

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

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

</chart:SfChart> 

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

XAML

<chart:SfChart>
   
   <chart:SfChart.PrimaryAxis>
       <chart:CategoryAxis EdgeLabelsDrawingMode="Fit" Header="Months" PlotOffsetEnd="15">
           ......
       </chart:CategoryAxis>
   </chart:SfChart.PrimaryAxis>

   <chart:SfChart.SecondaryAxis>
       <chart:NumericalAxis Minimum="0" Maximum="30000" Interval="10000" Header="Sales Rate" PlotOffsetEnd="5" PlotOffsetStart="5">
           ......
       </chart:NumericalAxis>
   </chart:SfChart.SecondaryAxis>

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

   <chart:SfChart.Annotations>
       <chart:LineAnnotation CoordinateUnit="Axis" X1="-0.5" X2="5.6" Y1="0" Y2="0" Stroke="Black" LineCap="Arrow" CanDrag="True" CanResize="True"/>
       <chart:LineAnnotation CoordinateUnit="Axis" X1="-0.5" X2="-0.5" Y1="0" Y2="30000" Stroke="Black" LineCap="Arrow" CanDrag="True" CanResize="True"/>
   </chart:SfChart.Annotations>

</chart:SfChart> 

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 WPF charts.

You can refer to our WPF Presentation feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our WPF example to understand how to create 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 trial 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!