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.

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: