Skip to content

Commit a1d9e5d

Browse files
Saravanan-MadheshSaravanan-Madhesh
authored
Merge pull request #1 from SyncfusionExamples/Attach_KB_sample
Attach the Add Arrow to Axes KB sample in WPF Chart
2 parents d1f553d + 31b2391 commit a1d9e5d

File tree

10 files changed

+308
-2
lines changed

10 files changed

+308
-2
lines changed

‎CustomizeAnnotationSample/CustomizeAnnotationSample.sln

+22
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}") = "CustomizeAnnotationSample", "CustomizeAnnotationSample\CustomizeAnnotationSample.csproj", "{F3639409-C1CA-422A-B837-43730D6014AB}"
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+
{F3639409-C1CA-422A-B837-43730D6014AB}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
15+
{F3639409-C1CA-422A-B837-43730D6014AB}.Debug|Any CPU.Build.0 = Debug|Any CPU
16+
{F3639409-C1CA-422A-B837-43730D6014AB}.Release|Any CPU.ActiveCfg = Release|Any CPU
17+
{F3639409-C1CA-422A-B837-43730D6014AB}.Release|Any CPU.Build.0 = Release|Any CPU
18+
EndGlobalSection
19+
GlobalSection(SolutionProperties) = preSolution
20+
HideSolutionNode = FALSE
21+
EndGlobalSection
22+
EndGlobal

‎CustomizeAnnotationSample/CustomizeAnnotationSample/App.xaml

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<Application x:Class="CustomizeAnnotationSample.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:CustomizeAnnotationSample"
5+
StartupUri="MainWindow.xaml">
6+
<Application.Resources>
7+
8+
</Application.Resources>
9+
</Application>

‎CustomizeAnnotationSample/CustomizeAnnotationSample/App.xaml.cs

+14
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 CustomizeAnnotationSample
6+
{
7+
/// <summary>
8+
/// Interaction logic for App.xaml
9+
/// </summary>
10+
public partial class App : Application
11+
{
12+
}
13+
14+
}

‎CustomizeAnnotationSample/CustomizeAnnotationSample/AssemblyInfo.cs

+10
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+
)]

‎CustomizeAnnotationSample/CustomizeAnnotationSample/CustomizeAnnotationSample.csproj

+15
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>

‎CustomizeAnnotationSample/CustomizeAnnotationSample/MainWindow.xaml

+77
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
<Window x:Class="CustomizeAnnotationSample.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:chart="clr-namespace:Syncfusion.UI.Xaml.Charts;assembly=Syncfusion.SfChart.WPF"
7+
xmlns:local="clr-namespace:CustomizeAnnotationSample"
8+
mc:Ignorable="d"
9+
Title="MainWindow" Height="450" Width="800">
10+
11+
<Window.DataContext>
12+
<local:ViewModel/>
13+
</Window.DataContext>
14+
15+
<Grid>
16+
<chart:SfChart>
17+
<chart:SfChart.Header>
18+
<TextBlock Text="Monthly Sales Performance" FontSize="17" FontWeight="Bold"/>
19+
</chart:SfChart.Header>
20+
21+
<chart:SfChart.PrimaryAxis>
22+
<chart:CategoryAxis EdgeLabelsDrawingMode="Fit" Header="Months" PlotOffsetEnd="15">
23+
<chart:CategoryAxis.AxisLineStyle>
24+
<Style TargetType="Line">
25+
<Setter Property="StrokeThickness" Value="0"/>
26+
</Style>
27+
</chart:CategoryAxis.AxisLineStyle>
28+
<chart:CategoryAxis.MajorTickLineStyle>
29+
<Style TargetType="Line">
30+
<Setter Property="StrokeThickness" Value="0"/>
31+
</Style>
32+
</chart:CategoryAxis.MajorTickLineStyle>
33+
</chart:CategoryAxis>
34+
</chart:SfChart.PrimaryAxis>
35+
36+
<chart:SfChart.SecondaryAxis>
37+
<chart:NumericalAxis Minimum="0" Maximum="30000" Interval="10000" Header="Sales Rate" PlotOffsetEnd="5" PlotOffsetStart="5">
38+
<chart:NumericalAxis.AxisLineStyle>
39+
<Style TargetType="Line">
40+
<Setter Property="StrokeThickness" Value="0"/>
41+
</Style>
42+
</chart:NumericalAxis.AxisLineStyle>
43+
<chart:NumericalAxis.MajorTickLineStyle>
44+
<Style TargetType="Line">
45+
<Setter Property="StrokeThickness" Value="0"/>
46+
</Style>
47+
</chart:NumericalAxis.MajorTickLineStyle>
48+
</chart:NumericalAxis>
49+
</chart:SfChart.SecondaryAxis>
50+
51+
<chart:SfChart.Legend>
52+
<chart:ChartLegend/>
53+
</chart:SfChart.Legend>
54+
55+
<chart:SfChart.Annotations>
56+
<chart:LineAnnotation CoordinateUnit="Axis" X1="-0.5" X2="5.6" Y1="0" Y2="0" Stroke="Black" LineCap="Arrow" CanDrag="True" CanResize="True"/>
57+
<chart:LineAnnotation CoordinateUnit="Axis" X1="-0.5" X2="-0.5" Y1="0" Y2="30000" Stroke="Black" LineCap="Arrow" CanDrag="True" CanResize="True"/>
58+
</chart:SfChart.Annotations>
59+
60+
<chart:ColumnSeries ItemsSource="{Binding ElectronicsSales}"
61+
XBindingPath="Month"
62+
YBindingPath="Sales"
63+
ShowTooltip="True"
64+
EnableAnimation="True"
65+
Label="Electronic Sales">
66+
</chart:ColumnSeries>
67+
68+
<chart:ColumnSeries ItemsSource="{Binding FurnitureSales}"
69+
XBindingPath="Month"
70+
YBindingPath="Sales"
71+
ShowTooltip="True"
72+
EnableAnimation="True"
73+
Label="Furniture Sales">
74+
</chart:ColumnSeries>
75+
</chart:SfChart>
76+
</Grid>
77+
</Window>

‎CustomizeAnnotationSample/CustomizeAnnotationSample/MainWindow.xaml.cs

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
using Syncfusion.UI.Xaml.Charts;
2+
using System.Text;
3+
using System.Windows;
4+
using System.Windows.Controls;
5+
using System.Windows.Data;
6+
using System.Windows.Documents;
7+
using System.Windows.Input;
8+
using System.Windows.Media;
9+
using System.Windows.Media.Imaging;
10+
using System.Windows.Navigation;
11+
using System.Windows.Shapes;
12+
13+
namespace CustomizeAnnotationSample
14+
{
15+
/// <summary>
16+
/// Interaction logic for MainWindow.xaml
17+
/// </summary>
18+
public partial class MainWindow : Window
19+
{
20+
public MainWindow()
21+
{
22+
InitializeComponent();
23+
}
24+
}
25+
26+
}

‎CustomizeAnnotationSample/CustomizeAnnotationSample/Model.cs

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
using System;
2+
using System.Collections.Generic;
3+
using System.Linq;
4+
using System.Text;
5+
using System.Threading.Tasks;
6+
7+
namespace CustomizeAnnotationSample
8+
{
9+
internal class Model
10+
{
11+
public string Month { get; set; }
12+
public double Sales { get; set; }
13+
}
14+
}

‎CustomizeAnnotationSample/CustomizeAnnotationSample/ViewModel.cs

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
using System;
2+
using System.Collections.Generic;
3+
using System.Collections.ObjectModel;
4+
using System.Linq;
5+
using System.Text;
6+
using System.Threading.Tasks;
7+
8+
namespace CustomizeAnnotationSample
9+
{
10+
internal class ViewModel
11+
{
12+
public ObservableCollection<Model> ElectronicsSales { get; set; }
13+
public ObservableCollection<Model> FurnitureSales { get; set; }
14+
15+
public ViewModel()
16+
{
17+
ElectronicsSales = new ObservableCollection<Model>
18+
{
19+
new Model { Month = "January", Sales = 15000 },
20+
new Model { Month = "February", Sales = 17000 },
21+
new Model { Month = "March", Sales = 16000 },
22+
new Model { Month = "April", Sales = 20000 },
23+
new Model { Month = "May", Sales = 23000 },
24+
new Model { Month = "June", Sales = 19000 }
25+
};
26+
27+
FurnitureSales = new ObservableCollection<Model>
28+
{
29+
new Model { Month = "January", Sales = 12000 },
30+
new Model { Month = "February", Sales = 14000 },
31+
new Model { Month = "March", Sales = 13000 },
32+
new Model { Month = "April", Sales = 18000 },
33+
new Model { Month = "May", Sales = 22000 },
34+
new Model { Month = "June", Sales = 15000 }
35+
};
36+
}
37+
}
38+
}

‎README.md

+83-2
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,83 @@
1-
# How-to-Add-Arrows-to-the-Chart-Axis-in-WPF-Chart
2-
Learn how to enhance WPF charts by adding arrows to the chart axes using annotations for improved visualization and clarity.
1+
# How to Add Arrows to the Chart Axis in WPF Chart
2+
This article provides a detailed walkthrough on how to add arrows to the axis using Annotations in [WPF Chart](https://www.syncfusion.com/wpf-controls/charts).
3+
4+
The [SfChart](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.SfChart.html) includes support for [Annotations](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.SfChart.html#Syncfusion_UI_Xaml_Charts_SfChart_Annotations), enabling the addition of various types of annotations to enhance chart visualization. Using [Line Annotation](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.LineAnnotation.html) for you can achieves to add arrows to the axis.
5+
6+
The Line Annotation includes following property:
7+
* [X1](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.Annotation.html#Syncfusion_UI_Xaml_Charts_Annotation_X1) - Represents the X1 Coordinate of the Line Annotation.
8+
* [X2](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ShapeAnnotation.html#Syncfusion_UI_Xaml_Charts_ShapeAnnotation_X2) - Represents the X2 Coordinate of the Line Annotation.
9+
* [Y1](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.Annotation.html#Syncfusion_UI_Xaml_Charts_Annotation_Y1) - Represents the Y1 Coordinate of the Line Annotation.
10+
* [Y2](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ShapeAnnotation.html#Syncfusion_UI_Xaml_Charts_ShapeAnnotation_Y2) - Represents the Y2 Coordinate of the Line Annotation.
11+
* [CanDrag](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ShapeAnnotation.html#Syncfusion_UI_Xaml_Charts_ShapeAnnotation_CanDrag) - A Boolean value that represent to drag the Annotation.
12+
* [CanResize](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ShapeAnnotation.html#Syncfusion_UI_Xaml_Charts_ShapeAnnotation_CanResize) - A Boolean value that represent to resize the Annotation.
13+
* [CoordinateUnit](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.Annotation.html#Syncfusion_UI_Xaml_Charts_Annotation_CoordinateUnit) - A Coordinate unit value that represent to position the Annotation.
14+
15+
Learn step-by-step instructions and gain insights to add arrows to the axis using annotations.
16+
17+
**Step 1:** Initialize the SfChart and add the series and legend to it as follows.
18+
19+
**XAML**
20+
21+
```xml
22+
<chart:SfChart>
23+
24+
<chart:SfChart.Legend>
25+
<chart:ChartLegend/>
26+
</chart:SfChart.Legend>
27+
28+
<chart:ColumnSeries ItemsSource="{Binding ElectronicsSales}"
29+
XBindingPath="Month"
30+
YBindingPath="Sales"
31+
ShowTooltip="True"
32+
EnableAnimation="True"
33+
Label="Electronic Sales">
34+
</chart:ColumnSeries>
35+
36+
<chart:ColumnSeries ItemsSource="{Binding FurnitureSales}"
37+
XBindingPath="Month"
38+
YBindingPath="Sales"
39+
ShowTooltip="True"
40+
EnableAnimation="True"
41+
Label="Furniture Sales">
42+
</chart:ColumnSeries>
43+
44+
</chart:SfChart>
45+
```
46+
47+
48+
**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.
49+
50+
**XAML**
51+
52+
```xml
53+
<chart:SfChart>
54+
55+
<chart:SfChart.PrimaryAxis>
56+
<chart:CategoryAxis EdgeLabelsDrawingMode="Fit" Header="Months" PlotOffsetEnd="15">
57+
......
58+
</chart:CategoryAxis>
59+
</chart:SfChart.PrimaryAxis>
60+
61+
<chart:SfChart.SecondaryAxis>
62+
<chart:NumericalAxis Minimum="0" Maximum="30000" Interval="10000" Header="Sales Rate" PlotOffsetEnd="5" PlotOffsetStart="5">
63+
......
64+
</chart:NumericalAxis>
65+
</chart:SfChart.SecondaryAxis>
66+
67+
<chart:SfChart.Legend>
68+
<chart:ChartLegend/>
69+
</chart:SfChart.Legend>
70+
71+
<chart:SfChart.Annotations>
72+
<chart:LineAnnotation CoordinateUnit="Axis" X1="-0.5" X2="5.6" Y1="0" Y2="0" Stroke="Black" LineCap="Arrow" CanDrag="True" CanResize="True"/>
73+
<chart:LineAnnotation CoordinateUnit="Axis" X1="-0.5" X2="-0.5" Y1="0" Y2="30000" Stroke="Black" LineCap="Arrow" CanDrag="True" CanResize="True"/>
74+
</chart:SfChart.Annotations>
75+
76+
</chart:SfChart>
77+
```
78+
79+
80+
**Output:**
81+
82+
![AddArrowToAnnotation](https://github.com/user-attachments/assets/2ab333c7-3f49-4b98-a15e-71679a1ef332)
83+

0 commit comments

Comments
 (0)