Skip to content

Commit 9ad5755

Browse files
tineshsf4652tineshsf4652
authored
Update README.md
1 parent 32671e3 commit 9ad5755

File tree

1 file changed

+141
-2
lines changed

1 file changed

+141
-2
lines changed

‎README.md

Lines changed: 141 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,141 @@
1-
# How-to-create-and-dynamically-update-target-line-for-WPF-Chart
2-
earn how to add and dynamically update a target line in WPF SfChart using Annotation. Customize its appearance and functionality effortlessly.
1+
# How to create and dynamically update target line for WPF Chart
2+
This article provides a detailed walkthrough on how to create and dynamically update target line 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 [HorizontalLineAnnotation](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.HorizontalLineAnnotation.html), you can create and dynamically adjust the target line.
5+
6+
The Horizontal Line Annotation includes following property:
7+
* [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 horizontal line Annotation.
8+
* [Stroke](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ShapeAnnotation.html#Syncfusion_UI_Xaml_Charts_ShapeAnnotation_Stroke) - Represents the brush for the horizontal line annotation outline.
9+
* [StrokeThickness](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ShapeAnnotation.html#Syncfusion_UI_Xaml_Charts_ShapeAnnotation_StrokeThickness) - Represents the thickness of the horizontal line annotation outline.
10+
* [StrokeDashArray](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ShapeAnnotation.html#Syncfusion_UI_Xaml_Charts_ShapeAnnotation_StrokeDashArray) - Represents the DashArray of the horizontal line annotation stroke.
11+
* [Text](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.Annotation.html#Syncfusion_UI_Xaml_Charts_Annotation_Text) - Gets or sets the description text for horizontal line Annotation.
12+
13+
Learn step-by-step instructions and gain insights to create and dynamically update the target line.
14+
15+
**Step 1:** The layout is created using a Grid with two columns.
16+
17+
**XAML**
18+
19+
```xml
20+
<Grid>
21+
22+
<Grid.ColumnDefinitions>
23+
<ColumnDefinition Width="*"></ColumnDefinition>
24+
<ColumnDefinition Width="200"></ColumnDefinition>
25+
</Grid.ColumnDefinitions>
26+
27+
</Grid>
28+
```
29+
30+
**Step 2:** In first column of grid layout, initialize the [SfChart](https://help.syncfusion.com/wpf/charts/getting-started) and add the axes and series to the [SfChart](https://help.syncfusion.com/wpf/charts/getting-started) as shown below.
31+
32+
**XAML**
33+
34+
```xml
35+
<chart:SfChart Grid.Column="0">
36+
37+
<chart:SfChart.PrimaryAxis>
38+
<chart:CategoryAxis EdgeLabelsDrawingMode="Fit" ShowGridLines="False" Header="Months"/>
39+
</chart:SfChart.PrimaryAxis>
40+
41+
<chart:SfChart.SecondaryAxis>
42+
<chart:NumericalAxis x:Name="Y_Axis" Minimum="0" Maximum="20000" Interval="5000" ShowGridLines="False" Header="Revenue" LabelFormat="'$'0" PlotOffsetEnd="30"/>
43+
</chart:SfChart.SecondaryAxis>
44+
45+
<chart:ColumnSeries ItemsSource="{Binding Data}"
46+
XBindingPath="Months"
47+
YBindingPath="Revenue"
48+
Palette="Custom"
49+
Opacity="0.7">
50+
<chart:ColumnSeries.ColorModel>
51+
<chart:ChartColorModel>
52+
<chart:ChartColorModel.CustomBrushes>
53+
.....
54+
</chart:ChartColorModel.CustomBrushes>
55+
</chart:ChartColorModel>
56+
</chart:ColumnSeries.ColorModel>
57+
</chart:ColumnSeries>
58+
59+
</chart:SfChart>
60+
```
61+
62+
**Step 3:** The [HorizontalLineAnnotation](https://help.syncfusion.com/wpf/charts/annotations#vertical-and-horizontal-line-annotation) is initialized within the [Annotations](https://help.syncfusion.com/wpf/charts/annotations) collection of the [SfChart](https://help.syncfusion.com/wpf/charts/getting-started) to mark a dynamic target value on the Y-axis. The Y1 value is data-bound, enabling the target line to update dynamically based on the ViewModel.
63+
64+
**XAML**
65+
66+
```xml
67+
<chart:SfChart Grid.Column="0">
68+
69+
<chart:SfChart.Annotations>
70+
<chart:HorizontalLineAnnotation Y1="{Binding Y1}"
71+
Stroke="Black"
72+
StrokeThickness="2"
73+
StrokeDashArray="5,2,2"
74+
Text="Target"
75+
FontSize="14"
76+
FontWeight="Bold"
77+
HorizontalTextAlignment="Left"
78+
VerticalTextAlignment="Top">
79+
</chart:HorizontalLineAnnotation>
80+
</chart:SfChart.Annotations>
81+
82+
</chart:SfChart>
83+
```
84+
85+
**C#**
86+
87+
```csharp
88+
internal class ViewModel : INotifyPropertyChanged
89+
{
90+
private double y1;
91+
public double Y1
92+
{
93+
get => y1;
94+
set
95+
{
96+
if(y1 != value)
97+
{
98+
y1 = value;
99+
OnPropertyChanged(nameof(Y1));
100+
}
101+
}
102+
}
103+
104+
public event PropertyChangedEventHandler? PropertyChanged;
105+
106+
protected void OnPropertyChanged(string name)
107+
{
108+
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
109+
}
110+
111+
.....
112+
113+
public ViewModel()
114+
{
115+
Y1 = 12000;
116+
.....
117+
}
118+
}
119+
```
120+
121+
**Step 4:** The second column of the grid layout contains a StackPanel with a Slider, TextBox and TextBlock, allowing the user to change the annotation value dynamically.
122+
123+
**XAML**
124+
125+
```xml
126+
<StackPanel Orientation="Vertical" Margin="10" Grid.Column="1">
127+
128+
<TextBlock Text="Adjust Target Line" FontSize="16" FontWeight="Bold" TextAlignment="Center" HorizontalAlignment="Center" Margin="0,0,0,20"/>
129+
<TextBox Text="{Binding Y1}" HorizontalAlignment="Stretch" VerticalAlignment="Center" TextChanged="TextBox_TextChanged" Margin="0,0,0,20" Padding="10"/>
130+
<Slider Minimum="{Binding Minimum, Source={x:Reference Y_Axis}}"
131+
Maximum="{Binding Maximum, Source={x:Reference Y_Axis}}"
132+
Value="{Binding Y1}" HorizontalAlignment="Stretch"/>
133+
134+
</StackPanel>
135+
```
136+
137+
138+
**Output:**
139+
140+
![DynamicTargetLine1](https://github.com/user-attachments/assets/aa0e643e-f62e-4d95-a596-7cd981484d47)
141+

0 commit comments

Comments
 (0)