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:

Explore the runnable demo from this GitHub location.

Conclusion:

I hope you enjoyed learning how to add an annotation to a WPF Chart leveraging the LabelClicked event.

You can refer to our WPF Chart feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications.

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!