How to Add Annotation in Axis Label Click in WPF SfChart?

This article provides a detailed walkthrough on how to add an annotation to a WPF SfChart using LabelClicked event when an axis label is clicked. This functionality enhances the interactivity of your chart by displaying specific information about the clicked label.

Learn step-by-step instructions and gain insights on using the Label Clicked event in a WPF SfChart.

Step 1: Initialize the SfChart with Primary and Secondary axes by referring to the WPF charts documentation. Trigger the LabelClicked event on the primary axis.

XAML

<chart:SfChart x:Name="chart">

   <chart:SfChart.PrimaryAxis>
       <chart:CategoryAxis LabelClicked="Axis_LabelClicked"/>
   </chart:SfChart.PrimaryAxis>
   
   <chart:SfChart.SecondaryAxis>
       <chart:NumericalAxis/>
   </chart:SfChart.SecondaryAxis>

   <chart:ColumnSeries ItemsSource="{Binding DataSource}" 
                       XBindingPath="Company" 
                       YBindingPath="Revenue"/>

</chart:SfChart> 

Step 2: Implement the event handler for the LabelClicked event of the primary axis. This event handler will be triggered when a label on the primary axis is clicked. The LabelContent and Position of the clicked label can be retrieved from the AxisLabelClickedEventArgs.

C#

public partial class MainWindow : Window
{
   public MainWindow()
   {
       InitializeComponent();
   }

   private void Axis_LabelClicked(object sender, AxisLabelClickedEventArgs e)
   {
       string labelContent = e.AxisLabel.LabelContent.ToString();
       int labelPosition = (int)e.AxisLabel.Position;
   }
}

Step 3: Create and add an Annotation to the chart in the event handler based on the label position obtained from the event arguments. Populate the data list from the ItemsSource to diplay the revenue values.

C#

public partial class MainWindow : Window
{
   List<double> data = new();

   public MainWindow()
   {
       InitializeComponent();

       foreach (var value in viewModel.DataSource)
       {
           data.Add(value.Revenue);
       }
   }

   private void Axis_LabelClicked(object sender, AxisLabelClickedEventArgs e)
   {
       string labelContent = e.AxisLabel.LabelContent.ToString();
       int labelPosition = (int)e.AxisLabel.Position;

       chart.Annotations.Clear();

       RectangleAnnotation annotation = new()
       {
           X1 = labelPosition,
           Y1 = data[labelPosition] + 10,
           X2 = labelPosition + 1,
           Y2 = data[labelPosition] + 110,
           CoordinateUnit = CoordinateUnit.Axis,
           HorizontalAlignment = HorizontalAlignment.Center,
           VerticalTextAlignment = VerticalAlignment.Center,
           Text = $"Revenue: {data[labelPosition]} USD",
           FontWeight = FontWeights.Bold,
           Fill = new SolidColorBrush(Colors.SkyBlue),
           Stroke = new SolidColorBrush(Colors.Transparent)
       };

       chart.Annotations.Add(annotation);
   }
}

Step 4: After deploying the application, click on the axis label as shown in the output below; the annotations will be displayed, showing the values corresponding to the label.

Output:

Troubleshooting

Path too long exception

If you are facing a path too long exception when building this example project, close Visual Studio and rename the repository to short and build the project.

For more details, refer to the KB on How-to-Add-Annotation-in-Axis-Label-Click-in-WPF-SfChart.