Skip to content

Commit 6cb9f74

Browse files
tineshkumarsf4652tineshkumarsf4652
committed
# Conflicts: # README.md
2 parents 0d80192 + 652e8f9 commit 6cb9f74

File tree

1 file changed

+214
-2
lines changed

1 file changed

+214
-2
lines changed

‎README.md

+214-2
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,214 @@
1-
# How-to-create-and-dynamically-update-target-line-for-WPF-Chart
2-
Learn 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 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 property is data-bound to the ViewModel, allowing the target line to adjust dynamically when the value changes.
63+
64+
65+
**XAML**
66+
67+
```xml
68+
<chart:SfChart Grid.Column="0">
69+
.....
70+
<chart:SfChart.Annotations>
71+
<chart:HorizontalLineAnnotation Y1="{Binding Y1}"
72+
Stroke="Black"
73+
StrokeThickness="2"
74+
Text="Target"
75+
......>
76+
</chart:HorizontalLineAnnotation>
77+
</chart:SfChart.Annotations>
78+
.....
79+
</chart:SfChart>
80+
```
81+
82+
**C#**
83+
84+
```csharp
85+
internal class ViewModel : INotifyPropertyChanged
86+
{
87+
private double y1;
88+
public double Y1
89+
{
90+
get => y1;
91+
set
92+
{
93+
if(y1 != value)
94+
{
95+
y1 = value;
96+
OnPropertyChanged(nameof(Y1));
97+
}
98+
}
99+
}
100+
101+
public event PropertyChangedEventHandler? PropertyChanged;
102+
103+
protected void OnPropertyChanged(string name)
104+
{
105+
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
106+
}
107+
108+
.....
109+
110+
public ViewModel()
111+
{
112+
Y1 = 12000;
113+
.....
114+
}
115+
}
116+
```
117+
118+
**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. The TextBox_TextChanged event ensures valid input by clamping values between 0 and the maximum of the Y_Axis.
119+
120+
**XAML**
121+
122+
```xml
123+
<StackPanel Orientation="Vertical" Margin="10" Grid.Column="1">
124+
125+
<TextBlock Text="Adjust Target Line" FontSize="16" FontWeight="Bold" TextAlignment="Center" HorizontalAlignment="Center" Margin="0,0,0,20"/>
126+
<TextBox Text="{Binding Y1}" HorizontalAlignment="Stretch" VerticalAlignment="Center" TextChanged="TextBox_TextChanged" Margin="0,0,0,20" Padding="10"/>
127+
<Slider Minimum="{Binding Minimum, Source={x:Reference Y_Axis}}"
128+
Maximum="{Binding Maximum, Source={x:Reference Y_Axis}}"
129+
Value="{Binding Y1}" HorizontalAlignment="Stretch"/>
130+
131+
</StackPanel>
132+
```
133+
This code handles the TextChanged event for a TextBox, dynamically updating the Y1 property in the ViewModel while ensuring the value stays within the axis’s maximum and minimum bounds. It also manages text formatting and prevents recursive event triggers.
134+
135+
**C#**
136+
137+
```csharp
138+
private void TextBox_TextChanged(object sender, TextChangedEventArgs e)
139+
{
140+
if (Y_Axis == null) return;
141+
var maxValue = Y_Axis.Maximum;
142+
143+
if (sender is TextBox textBox)
144+
{
145+
textBox.TextChanged -= TextBox_TextChanged;
146+
147+
if (string.IsNullOrWhiteSpace(textBox.Text))
148+
{
149+
viewModel.Y1 = double.MinValue;
150+
textBox.Text = string.Empty;
151+
}
152+
else
153+
{
154+
if (int.TryParse(textBox.Text, out int newValue))
155+
{
156+
if (newValue > maxValue)
157+
newValue = (int)maxValue;
158+
else if (newValue < 0)
159+
newValue = 0;
160+
161+
viewModel.Y1 = newValue;
162+
163+
textBox.Text = newValue.ToString();
164+
textBox.CaretIndex = textBox.Text.Length;
165+
}
166+
else
167+
{
168+
textBox.Text = ((int)viewModel.Y1).ToString();
169+
textBox.CaretIndex = textBox.Text.Length;
170+
}
171+
}
172+
173+
textBox.TextChanged += TextBox_TextChanged;
174+
}
175+
}
176+
```
177+
**Step 5:** This code defines a [HorizontalLineAnnotation](https://help.syncfusion.com/wpf/charts/annotations#vertical-and-horizontal-line-annotation) for a [SfChart](https://help.syncfusion.com/wpf/charts/getting-started), representing a horizontal line at a specified Y-axis value. It includes custom styling such as dashed stroke, text with font formatting, and text alignment settings.
178+
179+
**XAML**
180+
181+
```
182+
<chart:SfChart Grid.Column="0">
183+
184+
.....
185+
186+
<chart:SfChart.Annotations>
187+
<chart:HorizontalLineAnnotation Y1="{Binding Y1}"
188+
Stroke="Black"
189+
StrokeThickness="2"
190+
StrokeDashArray="5,2,2"
191+
Text="Target"
192+
FontSize="14"
193+
FontWeight="Bold"
194+
HorizontalTextAlignment="Left"
195+
VerticalTextAlignment="Top">
196+
</chart:HorizontalLineAnnotation>
197+
</chart:SfChart.Annotations>
198+
199+
.....
200+
201+
</chart:SfChart>
202+
```
203+
204+
**Output:**
205+
206+
![DynamicTargetLine1](https://github.com/user-attachments/assets/aa0e643e-f62e-4d95-a596-7cd981484d47)
207+
208+
**Troubleshooting**
209+
210+
Path too long exception
211+
212+
If you are facing a path too long exception when building this example project, close Visual Studio and rename the repository to a shorter name before building the project.
213+
214+
For more details, refer to the KB on [how to create and dynamically update target line for WPF Chart](https://support.syncfusion.com/agent/kb/18542).

0 commit comments

Comments
 (0)