Skip to content

Commit 5dfd304

Browse files
subash-sfsubash-sf
committed
included sample project
1 parent 2bbb64f commit 5dfd304

File tree

11 files changed

+309
-2
lines changed

11 files changed

+309
-2
lines changed

‎README.md‎

Lines changed: 102 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,102 @@
1-
# How-to-Add-Annotation-in-Axis-Label-Click-in-WPF-SfChart
2-
Learn how to add an annotation to a WPF SfChart when an axis label is clicked. This functionality enhances the interactivity of your chart by highlighting specific data points and providing additional information.
1+
# How to Add Annotation in Axis Label Click in WPF SfChart?
2+
3+
This article provides a detailed walkthrough on how to add an annotation to a [WPF SfChart](https://www.syncfusion.com/wpf-controls/charts) using [LabelClicked](https://help.syncfusion.com/wpf/charts/axis#labelclicked) event when an axis label is clicked. This functionality enhances the interactivity of your chart by displaying specific information about the clicked label.
4+
5+
Learn step-by-step instructions and gain insights on using the Label Clicked event in a WPF SfChart.
6+
7+
**Step 1:** Initialize the SfChart with Primary and Secondary axes by referring to the WPF charts [documentation](https://help.syncfusion.com/wpf/charts/getting-started). Trigger the [LabelClicked](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxisBase2D.html#events) event on the primary axis.
8+
9+
XAML
10+
```xml
11+
<chart:SfChart x:Name="chart">
12+
13+
<chart:SfChart.PrimaryAxis>
14+
<chart:CategoryAxis LabelClicked="Axis_LabelClicked"/>
15+
</chart:SfChart.PrimaryAxis>
16+
17+
<chart:SfChart.SecondaryAxis>
18+
<chart:NumericalAxis/>
19+
</chart:SfChart.SecondaryAxis>
20+
21+
<chart:ColumnSeries ItemsSource="{Binding DataSource}"
22+
XBindingPath="Company"
23+
YBindingPath="Revenue"/>
24+
25+
</chart:SfChart>
26+
```
27+
28+
**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](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxisLabel.html#Syncfusion_UI_Xaml_Charts_ChartAxisLabel_LabelContent) and [Position](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxisLabel.html#Syncfusion_UI_Xaml_Charts_ChartAxisLabel_Position) of the clicked label can be retrieved from the [AxisLabelClickedEventArgs](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.AxisLabelClickedEventArgs.html).
29+
30+
C#
31+
```csharp
32+
public partial class MainWindow : Window
33+
{
34+
public MainWindow()
35+
{
36+
InitializeComponent();
37+
}
38+
39+
private void Axis_LabelClicked(object sender, AxisLabelClickedEventArgs e)
40+
{
41+
string labelContent = e.AxisLabel.LabelContent.ToString();
42+
int labelPosition = (int)e.AxisLabel.Position;
43+
}
44+
}
45+
```
46+
47+
**Step 3:** Create and add an [Annotation](https://help.syncfusion.com/wpf/charts/annotations) 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.
48+
49+
C#
50+
```csharp
51+
public partial class MainWindow : Window
52+
{
53+
List<double> data = new();
54+
55+
public MainWindow()
56+
{
57+
InitializeComponent();
58+
59+
foreach (var value in viewModel.DataSource)
60+
{
61+
data.Add(value.Revenue);
62+
}
63+
}
64+
65+
private void Axis_LabelClicked(object sender, AxisLabelClickedEventArgs e)
66+
{
67+
string labelContent = e.AxisLabel.LabelContent.ToString();
68+
int labelPosition = (int)e.AxisLabel.Position;
69+
70+
chart.Annotations.Clear();
71+
72+
RectangleAnnotation annotation = new()
73+
{
74+
X1 = labelPosition,
75+
Y1 = data[labelPosition] + 10,
76+
X2 = labelPosition + 1,
77+
Y2 = data[labelPosition] + 110,
78+
CoordinateUnit = CoordinateUnit.Axis,
79+
HorizontalAlignment = HorizontalAlignment.Center,
80+
VerticalTextAlignment = VerticalAlignment.Center,
81+
Text = $"Revenue: {data[labelPosition]} USD",
82+
FontWeight = FontWeights.Bold,
83+
Fill = new SolidColorBrush(Colors.SkyBlue),
84+
Stroke = new SolidColorBrush(Colors.Transparent)
85+
};
86+
87+
chart.Annotations.Add(annotation);
88+
}
89+
}
90+
```
91+
92+
**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.
93+
94+
**Output:**
95+
96+
97+
98+
## Troubleshooting
99+
### Path too long exception
100+
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.
101+
102+
For more details, refer to the KB on [How-to-Add-Annotation-in-Axis-Label-Click-in-WPF-SfChart]().

‎WPFChartLabelEvents/WPFChartLabelEvents.sln‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
2+
Microsoft Visual Studio Solution File, Format Version 12.00
3+
# Visual Studio Version 17
4+
VisualStudioVersion = 17.12.35506.116 d17.12
5+
MinimumVisualStudioVersion = 10.0.40219.1
6+
Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "WPFChartLabelEvents", "WPFChartLabelEvents\WPFChartLabelEvents.csproj", "{A0F1EF82-1071-485B-A0BF-F921429BDC23}"
7+
EndProject
8+
Global
9+
GlobalSection(SolutionConfigurationPlatforms) = preSolution
10+
Debug|Any CPU = Debug|Any CPU
11+
Release|Any CPU = Release|Any CPU
12+
EndGlobalSection
13+
GlobalSection(ProjectConfigurationPlatforms) = postSolution
14+
{A0F1EF82-1071-485B-A0BF-F921429BDC23}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
15+
{A0F1EF82-1071-485B-A0BF-F921429BDC23}.Debug|Any CPU.Build.0 = Debug|Any CPU
16+
{A0F1EF82-1071-485B-A0BF-F921429BDC23}.Release|Any CPU.ActiveCfg = Release|Any CPU
17+
{A0F1EF82-1071-485B-A0BF-F921429BDC23}.Release|Any CPU.Build.0 = Release|Any CPU
18+
EndGlobalSection
19+
GlobalSection(SolutionProperties) = preSolution
20+
HideSolutionNode = FALSE
21+
EndGlobalSection
22+
EndGlobal

‎WPFChartLabelEvents/WPFChartLabelEvents/App.xaml‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<Application x:Class="WPFChartLabelEvents.App"
2+
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3+
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4+
xmlns:local="clr-namespace:WPFChartLabelEvents"
5+
StartupUri="MainWindow.xaml">
6+
<Application.Resources>
7+
8+
</Application.Resources>
9+
</Application>

‎WPFChartLabelEvents/WPFChartLabelEvents/App.xaml.cs‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
using System.Configuration;
2+
using System.Data;
3+
using System.Windows;
4+
5+
namespace WPFChartLabelEvents
6+
{
7+
/// <summary>
8+
/// Interaction logic for App.xaml
9+
/// </summary>
10+
public partial class App : Application
11+
{
12+
}
13+
14+
}

‎WPFChartLabelEvents/WPFChartLabelEvents/AssemblyInfo.cs‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
using System.Windows;
2+
3+
[assembly: ThemeInfo(
4+
ResourceDictionaryLocation.None, //where theme specific resource dictionaries are located
5+
//(used if a resource is not found in the page,
6+
// or application resource dictionaries)
7+
ResourceDictionaryLocation.SourceAssembly //where the generic resource dictionary is located
8+
//(used if a resource is not found in the page,
9+
// app, or any theme specific resource dictionaries)
10+
)]

‎WPFChartLabelEvents/WPFChartLabelEvents/MainWindow.xaml‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<Window x:Class="WPFChartLabelEvents.MainWindow"
2+
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3+
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4+
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
5+
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
6+
xmlns:local="clr-namespace:WPFChartLabelEvents"
7+
xmlns:chart="clr-namespace:Syncfusion.UI.Xaml.Charts;assembly=Syncfusion.SfChart.WPF"
8+
mc:Ignorable="d"
9+
Title="MainWindow" Height="450" Width="800">
10+
11+
<Grid>
12+
13+
<chart:SfChart x:Name="chart">
14+
15+
<chart:SfChart.DataContext>
16+
<local:ViewModel x:Name="viewModel"/>
17+
</chart:SfChart.DataContext>
18+
19+
<chart:SfChart.Header>
20+
<TextBlock Text="Leading Tech Companies of 2024" FontSize="24" FontWeight="DemiBold" Margin="5" />
21+
</chart:SfChart.Header>
22+
23+
<chart:SfChart.PrimaryAxis>
24+
<chart:CategoryAxis x:Name="xAxis" LabelClicked="Axis_LabelClicked" ShowGridLines="False">
25+
<chart:CategoryAxis.LabelStyle>
26+
<chart:LabelStyle FontSize="14" FontFamily="Verdana"/>
27+
</chart:CategoryAxis.LabelStyle>
28+
</chart:CategoryAxis>
29+
</chart:SfChart.PrimaryAxis>
30+
31+
<chart:SfChart.SecondaryAxis>
32+
<chart:NumericalAxis x:Name="yAxis" Maximum="800" Interval="100">
33+
<chart:NumericalAxis.LabelStyle>
34+
<chart:LabelStyle FontSize="12" FontFamily="Verdana"/>
35+
</chart:NumericalAxis.LabelStyle>
36+
</chart:NumericalAxis>
37+
</chart:SfChart.SecondaryAxis>
38+
39+
<chart:ColumnSeries ItemsSource="{Binding DataSource}" XBindingPath="Company" YBindingPath="Revenue"/>
40+
</chart:SfChart>
41+
42+
</Grid>
43+
</Window>

‎WPFChartLabelEvents/WPFChartLabelEvents/MainWindow.xaml.cs‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
using System.Windows;
2+
using System.Windows.Media;
3+
using Syncfusion.UI.Xaml.Charts;
4+
5+
namespace WPFChartLabelEvents
6+
{
7+
/// <summary>
8+
/// Interaction logic for MainWindow.xaml
9+
/// </summary>
10+
public partial class MainWindow : Window
11+
{
12+
List<double> data = new();
13+
14+
public MainWindow()
15+
{
16+
InitializeComponent();
17+
18+
foreach (var value in viewModel.DataSource)
19+
{
20+
data.Add(value.Revenue);
21+
}
22+
}
23+
24+
private void Axis_LabelClicked(object sender, AxisLabelClickedEventArgs e)
25+
{
26+
string labelContent = (string)e.AxisLabel.LabelContent;
27+
int labelPosition = (int)e.AxisLabel.Position;
28+
29+
chart.Annotations.Clear();
30+
31+
RectangleAnnotation annotation = new()
32+
{
33+
X1 = labelPosition,
34+
Y1 = data[labelPosition] + 10,
35+
X2 = labelPosition + 1,
36+
Y2 = data[labelPosition] + 110,
37+
CoordinateUnit = CoordinateUnit.Axis,
38+
HorizontalAlignment = HorizontalAlignment.Center,
39+
VerticalTextAlignment = VerticalAlignment.Center,
40+
Text = $"Revenue: {data[labelPosition]} USD",
41+
FontWeight = FontWeights.Bold,
42+
Fill = new SolidColorBrush(Colors.SkyBlue),
43+
Stroke = new SolidColorBrush(Colors.Transparent)
44+
};
45+
46+
chart.Annotations.Add(annotation);
47+
}
48+
}
49+
}

‎WPFChartLabelEvents/WPFChartLabelEvents/Model.cs‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
namespace WPFChartLabelEvents
2+
{
3+
public class Model
4+
{
5+
public required string Company { get; set; }
6+
public double Revenue { get; set; }
7+
}
8+
}

‎WPFChartLabelEvents/WPFChartLabelEvents/ViewModel.cs‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
using System.Collections.ObjectModel;
2+
3+
namespace WPFChartLabelEvents
4+
{
5+
public class ViewModel
6+
{
7+
public ObservableCollection<Model> DataSource { get; set; }
8+
9+
public ViewModel()
10+
{
11+
DataSource = new ObservableCollection<Model>
12+
{
13+
new Model { Company = "Apple", Revenue = 382 },
14+
new Model { Company = "Microsoft", Revenue = 237 },
15+
new Model { Company = "Amazon", Revenue = 591 },
16+
new Model { Company = "Alphabet", Revenue = 318 },
17+
new Model { Company = "Nvidia", Revenue = 200 },
18+
new Model { Company = "Meta", Revenue = 143 },
19+
new Model { Company = "Samsung", Revenue = 201 }
20+
};
21+
}
22+
}
23+
}

‎WPFChartLabelEvents/WPFChartLabelEvents/WPFChartLabelEvents.csproj‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<Project Sdk="Microsoft.NET.Sdk">
2+
3+
<PropertyGroup>
4+
<OutputType>WinExe</OutputType>
5+
<TargetFramework>net9.0-windows</TargetFramework>
6+
<Nullable>enable</Nullable>
7+
<ImplicitUsings>enable</ImplicitUsings>
8+
<UseWPF>true</UseWPF>
9+
</PropertyGroup>
10+
11+
<ItemGroup>
12+
<PackageReference Include="Syncfusion.SfChart.WPF" Version="*" />
13+
</ItemGroup>
14+
15+
</Project>

0 commit comments

Comments
 (0)