Skip to content

Commit 89ee9c9

Browse files
author
tineshsf4652
authored
Update README.md
1 parent 30f0086 commit 89ee9c9

File tree

1 file changed

+136
-2
lines changed

1 file changed

+136
-2
lines changed

‎README.md‎

Lines changed: 136 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,136 @@
1-
# How-to-create-and-dynamically-update-target-line-for-.NET-MAUI-Cartesian-Chart
2-
Learn how to add and dynamically update a target line in .NET MAUI Cartesian Chart using Annotation. Customize its appearance and functionality effortlessly
1+
# How to create and dynamically update target line for .NET MAUI Cartesian Chart
2+
This article provides a detailed walkthrough on how to add arrows to the axis using Annotations in [.NET MAUI Cartesian Chart](https://www.syncfusion.com/maui-controls/maui-cartesian-charts).
3+
4+
The [SfCartesianChart](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SfCartesianChart.html) includes support for [Annotations](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SfCartesianChart.html#Syncfusion_Maui_Charts_SfCartesianChart_Annotations), enabling the addition of various types of annotations to enhance chart visualization. Using [HorizontalLineAnnotation](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.HorizontalLineAnnotation.html), you can create and dynamically adjust the target line.
5+
6+
The Horizontal Line Annotation includes following property:
7+
8+
* [Y1](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartAnnotation.html#Syncfusion_Maui_Charts_ChartAnnotation_Y1) - Gets or sets the Y1 coordinate of the horizontal line annotation.
9+
* [Stroke](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ShapeAnnotation.html#Syncfusion_Maui_Charts_ShapeAnnotation_Stroke) - Gets or sets the stroke color of the horizontal line annotation.
10+
* [StrokeWidth](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ShapeAnnotation.html#Syncfusion_Maui_Charts_ShapeAnnotation_StrokeWidth) - Gets or sets the stroke width of the horizontal line annotation.
11+
* [StrokeDashArray](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ShapeAnnotation.html#Syncfusion_Maui_Charts_ShapeAnnotation_StrokeDashArray) - Gets or sets the stroke dash pattern of the horizontal line annotation.
12+
* [Text](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ShapeAnnotation.html#Syncfusion_Maui_Charts_ShapeAnnotation_Text) - Gets or sets the annotation text of the horizontal line annotation.
13+
* [LabelStyle](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ShapeAnnotation.html#Syncfusion_Maui_Charts_ShapeAnnotation_LabelStyle) - Gets or sets the style for customizing the annotation text of the horizontal line annotation.
14+
15+
Learn step-by-step instructions and gain insights to create and dynamically update the target line.
16+
17+
**Step 1:** The layout is created using a Grid with two columns.
18+
19+
**XAML**
20+
21+
```xml
22+
<Grid>
23+
24+
<Grid.ColumnDefinitions>
25+
<ColumnDefinition Width="*"></ColumnDefinition>
26+
<ColumnDefinition Width="200"></ColumnDefinition>
27+
</Grid.ColumnDefinitions>
28+
29+
</Grid>
30+
```
31+
32+
**Step 2:** In first column of grid layout, initialize the [SfCartesianChart](https://help.syncfusion.com/maui/cartesian-charts/getting-started) and add the axes and series to the [SfCartesianChart](https://help.syncfusion.com/maui/cartesian-charts/getting-started) as shown below.
33+
34+
**XAML**
35+
36+
```xml
37+
<chart:SfCartesianChart Grid.Column="0">
38+
39+
<chart:SfCartesianChart.XAxes>
40+
<chart:CategoryAxis ShowMajorGridLines="False">
41+
.....
42+
</chart:CategoryAxis>
43+
</chart:SfCartesianChart.XAxes>
44+
45+
<chart:SfCartesianChart.YAxes>
46+
<chart:NumericalAxis x:Name="Y_Axis" Minimum="0" Maximum="20000" Interval="5000" ShowMajorGridLines="False">
47+
......
48+
</chart:NumericalAxis>
49+
</chart:SfCartesianChart.YAxes>
50+
51+
<chart:ColumnSeries ItemsSource="{Binding Data}"
52+
XBindingPath="Months"
53+
YBindingPath="Revenue"
54+
PaletteBrushes="{Binding CustomBrushes}"
55+
Opacity="0.7"/>
56+
57+
</chart:SfCartesianChart>
58+
```
59+
60+
**Step 3:** The [HorizontalLineAnnotation](https://help.syncfusion.com/maui/cartesian-charts/annotation#vertical-and-horizontal-line-annotations) is initialized within the [Annotations](https://help.syncfusion.com/maui/cartesian-charts/annotation) collection of the [SfCartesianChart](https://help.syncfusion.com/maui/cartesian-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.
61+
62+
**XAML**
63+
64+
```xml
65+
<chart:SfCartesianChart Grid.Column="0">
66+
67+
<chart:SfCartesianChart.Annotations>
68+
<chart:HorizontalLineAnnotation Y1="{Binding Y1}"
69+
Stroke="Black"
70+
StrokeWidth="2"
71+
StrokeDashArray="5,2,2"
72+
Text="Target">
73+
<chart:HorizontalLineAnnotation.LabelStyle>
74+
<chart:ChartAnnotationLabelStyle TextColor="Black" FontSize="14" FontAttributes="Bold" HorizontalTextAlignment="Start" VerticalTextAlignment="Start"/>
75+
</chart:HorizontalLineAnnotation.LabelStyle>
76+
</chart:HorizontalLineAnnotation>
77+
</chart:SfCartesianChart.Annotations>
78+
79+
</chart:SfCartesianChart>
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 VerticalStackLayout with a Slider and an Entry box, allowing the user to change the annotation value dynamically.
119+
120+
**XAML**
121+
122+
```xml
123+
<VerticalStackLayout Spacing="5" Grid.Column="1" Padding="10">
124+
125+
<Label Text="Adjust Target Line" FontSize="16" FontAttributes="Bold" HorizontalOptions="Center"/>
126+
<Entry Text="{Binding Y1}" Keyboard="Numeric" TextChanged="Entry_TextChanged"/>
127+
<Slider Minimum="{Binding Minimum, Source={x:Reference Y_Axis}}" Maximum="{Binding Maximum, Source={x:Reference Y_Axis}}" Value="{Binding Y1}"/>
128+
129+
</VerticalStackLayout>
130+
```
131+
132+
133+
**Output:**
134+
135+
![TargetLineCustomization1](https://github.com/user-attachments/assets/f380a273-e02a-4391-89d1-dd8658c95b01)
136+

0 commit comments

Comments
 (0)