Skip to content

Commit bdcd7e6

Browse files
Saravanan-MadheshSaravanan-Madhesh
authored
Merge pull request #1 from SyncfusionExamples/Attach_the_sample
Attach the Dynamic Target Line .NET MAUI KB sample
2 parents f46a216 + 719ff96 commit bdcd7e6

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

41 files changed

+9369
-2
lines changed

‎README.md

Lines changed: 200 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,200 @@
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 and dynamically update a target line 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 the first column of the grid layout, initialize the [SfCartesianChart](https://help.syncfusion.com/maui/cartesian-charts/getting-started) and add the axes and series 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" PlotOffsetEnd="30">
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 property is data-bound to the ViewModel, allowing the target line to adjust dynamically when the value changes.
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+
......
74+
</chart:HorizontalLineAnnotation>
75+
</chart:SfCartesianChart.Annotations>
76+
.....
77+
</chart:SfCartesianChart>
78+
```
79+
80+
**C#**
81+
82+
```csharp
83+
internal class ViewModel : INotifyPropertyChanged
84+
{
85+
private double y1;
86+
public double Y1
87+
{
88+
get => y1;
89+
set
90+
{
91+
if(y1 != value)
92+
{
93+
y1 = value;
94+
OnPropertyChanged(nameof(Y1));
95+
}
96+
}
97+
}
98+
99+
public event PropertyChangedEventHandler? PropertyChanged;
100+
101+
protected void OnPropertyChanged(string name)
102+
{
103+
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
104+
}
105+
106+
.....
107+
108+
public ViewModel()
109+
{
110+
Y1 = 12000;
111+
.....
112+
}
113+
}
114+
```
115+
116+
**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. The Entry_TextChanged event validates input, ensuring values stay within the bounds defined by the Y_Axis.
117+
118+
**XAML**
119+
120+
```xml
121+
<VerticalStackLayout Spacing="5" Grid.Column="1" Padding="10">
122+
123+
<Label Text="Adjust Target Line" FontSize="16" FontAttributes="Bold" HorizontalOptions="Center"/>
124+
<Entry Text="{Binding Y1}" Keyboard="Numeric" TextChanged="Entry_TextChanged"/>
125+
<Slider Minimum="{Binding Minimum, Source={x:Reference Y_Axis}}" Maximum="{Binding Maximum, Source={x:Reference Y_Axis}}" Value="{Binding Y1}"/>
126+
127+
</VerticalStackLayout>
128+
```
129+
130+
This code handles the TextChanged event for an Entry, validating input to ensure it is a numeric value within the maximum axis range. If invalid input is detected, the text reverts to the previous value to maintain consistency.
131+
132+
**C#**
133+
134+
```csharp
135+
private void Entry_TextChanged(object sender, TextChangedEventArgs e)
136+
{
137+
if(Y_Axis == null) return;
138+
var maxValue = Y_Axis.Maximum;
139+
140+
if (sender is Entry entry)
141+
{
142+
if (string.IsNullOrWhiteSpace(entry.Text))
143+
{
144+
viewModel.Y1 = double.MinValue;
145+
entry.Text = string.Empty;
146+
}
147+
else
148+
{
149+
if (double.TryParse(e.NewTextValue, out double newValue))
150+
{
151+
if (newValue > maxValue)
152+
{
153+
entry.Text = e.OldTextValue;
154+
}
155+
}
156+
else
157+
{
158+
entry.Text = e.OldTextValue;
159+
}
160+
}
161+
}
162+
}
163+
```
164+
165+
**Step 5:** This code defines a [HorizontalLineAnnotation](https://help.syncfusion.com/maui/cartesian-charts/annotation#vertical-and-horizontal-line-annotations) in a [SfCartesianChart](https://help.syncfusion.com/maui/cartesian-charts/getting-started), marking a specific Y-axis value (Y1) with a styled dashed line and label. The label's appearance is customized using a [ChartAnnotationLabelStyle](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartAnnotationLabelStyle.html) for text color, size, font attributes, and alignment.
166+
167+
**XAML**
168+
169+
```xml
170+
<chart:SfCartesianChart Grid.Column="0">
171+
......
172+
173+
<chart:SfCartesianChart.Annotations>
174+
<chart:HorizontalLineAnnotation Y1="{Binding Y1}"
175+
Stroke="Black"
176+
StrokeWidth="2"
177+
StrokeDashArray="5,2,2"
178+
Text="Target">
179+
<chart:HorizontalLineAnnotation.LabelStyle>
180+
<chart:ChartAnnotationLabelStyle TextColor="Black" FontSize="14" FontAttributes="Bold" HorizontalTextAlignment="Start" VerticalTextAlignment="Start"/>
181+
</chart:HorizontalLineAnnotation.LabelStyle>
182+
</chart:HorizontalLineAnnotation>
183+
</chart:SfCartesianChart.Annotations>
184+
185+
.....
186+
</chart:SfCartesianChart>
187+
```
188+
189+
**Output:**
190+
191+
![DynamicTargetLine](https://github.com/user-attachments/assets/737beb67-861f-44f6-815f-3f6dde45d8fc)
192+
193+
**Troubleshooting**
194+
195+
Path too long exception
196+
197+
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.
198+
199+
For more details, refer to the KB on [how to create and dynamically update target line for .NET MAUI Cartesian Chart](https://support.syncfusion.com/kb/article/18517/how-to-create--dynamically-update-target-line-for-net-maui-cartesian-chart).
200+

‎TargetLineSample/TargetLineSample.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}") = "TargetLineSample", "TargetLineSample\TargetLineSample.csproj", "{F66D4DD4-16E6-4A19-AF7C-550A29BB9C36}"
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+
{F66D4DD4-16E6-4A19-AF7C-550A29BB9C36}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
15+
{F66D4DD4-16E6-4A19-AF7C-550A29BB9C36}.Debug|Any CPU.Build.0 = Debug|Any CPU
16+
{F66D4DD4-16E6-4A19-AF7C-550A29BB9C36}.Release|Any CPU.ActiveCfg = Release|Any CPU
17+
{F66D4DD4-16E6-4A19-AF7C-550A29BB9C36}.Release|Any CPU.Build.0 = Release|Any CPU
18+
EndGlobalSection
19+
GlobalSection(SolutionProperties) = preSolution
20+
HideSolutionNode = FALSE
21+
EndGlobalSection
22+
EndGlobal

‎TargetLineSample/TargetLineSample/App.xaml

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<?xml version = "1.0" encoding = "UTF-8" ?>
2+
<Application xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
3+
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
4+
xmlns:local="clr-namespace:TargetLineSample"
5+
x:Class="TargetLineSample.App">
6+
<Application.Resources>
7+
<ResourceDictionary>
8+
<ResourceDictionary.MergedDictionaries>
9+
<ResourceDictionary Source="Resources/Styles/Colors.xaml" />
10+
<ResourceDictionary Source="Resources/Styles/Styles.xaml" />
11+
</ResourceDictionary.MergedDictionaries>
12+
</ResourceDictionary>
13+
</Application.Resources>
14+
</Application>

‎TargetLineSample/TargetLineSample/App.xaml.cs

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
namespace TargetLineSample
2+
{
3+
public partial class App : Application
4+
{
5+
public App()
6+
{
7+
InitializeComponent();
8+
}
9+
10+
protected override Window CreateWindow(IActivationState? activationState)
11+
{
12+
return new Window(new AppShell());
13+
}
14+
}
15+
}

‎TargetLineSample/TargetLineSample/AppShell.xaml

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<?xml version="1.0" encoding="UTF-8" ?>
2+
<Shell
3+
x:Class="TargetLineSample.AppShell"
4+
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
5+
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
6+
xmlns:local="clr-namespace:TargetLineSample"
7+
Shell.FlyoutBehavior="Flyout"
8+
Title="TargetLineSample">
9+
10+
<ShellContent
11+
Title="Home"
12+
ContentTemplate="{DataTemplate local:MainPage}"
13+
Route="MainPage" />
14+
15+
</Shell>

‎TargetLineSample/TargetLineSample/AppShell.xaml.cs

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
namespace TargetLineSample
2+
{
3+
public partial class AppShell : Shell
4+
{
5+
public AppShell()
6+
{
7+
InitializeComponent();
8+
}
9+
}
10+
}

‎TargetLineSample/TargetLineSample/MainPage.xaml

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
<?xml version="1.0" encoding="utf-8" ?>
2+
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
3+
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
4+
xmlns:chart="clr-namespace:Syncfusion.Maui.Charts;assembly=Syncfusion.Maui.Charts"
5+
xmlns:local="clr-namespace:TargetLineSample"
6+
x:Class="TargetLineSample.MainPage">
7+
8+
<Grid>
9+
<Grid.ColumnDefinitions>
10+
<ColumnDefinition Width="*"></ColumnDefinition>
11+
<ColumnDefinition Width="200"></ColumnDefinition>
12+
</Grid.ColumnDefinitions>
13+
14+
<Grid.BindingContext>
15+
<local:ViewModel x:Name="viewModel"/>
16+
</Grid.BindingContext>
17+
18+
<chart:SfCartesianChart Grid.Column="0">
19+
20+
<chart:SfCartesianChart.XAxes>
21+
<chart:CategoryAxis ShowMajorGridLines="False">
22+
<chart:CategoryAxis.Title>
23+
<chart:ChartAxisTitle Text="Months"/>
24+
</chart:CategoryAxis.Title>
25+
</chart:CategoryAxis>
26+
</chart:SfCartesianChart.XAxes>
27+
28+
<chart:SfCartesianChart.YAxes>
29+
<chart:NumericalAxis x:Name="Y_Axis" Minimum="0" Maximum="20000" Interval="5000" ShowMajorGridLines="False" PlotOffsetEnd="30">
30+
<chart:NumericalAxis.Title>
31+
<chart:ChartAxisTitle Text="Revenue"/>
32+
</chart:NumericalAxis.Title>
33+
<chart:NumericalAxis.LabelStyle>
34+
<chart:ChartAxisLabelStyle LabelFormat="'$'0"/>
35+
</chart:NumericalAxis.LabelStyle>
36+
</chart:NumericalAxis>
37+
</chart:SfCartesianChart.YAxes>
38+
39+
<chart:SfCartesianChart.Annotations>
40+
<chart:HorizontalLineAnnotation Y1="{Binding Y1}"
41+
Stroke="Black"
42+
StrokeWidth="2"
43+
StrokeDashArray="5,2,2"
44+
Text="Target">
45+
<chart:HorizontalLineAnnotation.LabelStyle>
46+
<chart:ChartAnnotationLabelStyle TextColor="Black" FontSize="14" FontAttributes="Bold" HorizontalTextAlignment="Start" VerticalTextAlignment="Start"/>
47+
</chart:HorizontalLineAnnotation.LabelStyle>
48+
</chart:HorizontalLineAnnotation>
49+
</chart:SfCartesianChart.Annotations>
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+
<VerticalStackLayout Spacing="5" Grid.Column="1" Padding="10">
60+
<Label Text="Adjust Target Line" FontSize="16" FontAttributes="Bold" HorizontalOptions="Center"/>
61+
<Entry Text="{Binding Y1}" Keyboard="Numeric" TextChanged="Entry_TextChanged"/>
62+
<Slider Minimum="{Binding Minimum, Source={x:Reference Y_Axis}}" Maximum="{Binding Maximum, Source={x:Reference Y_Axis}}" Value="{Binding Y1}"/>
63+
</VerticalStackLayout>
64+
</Grid>
65+
66+
</ContentPage>

‎TargetLineSample/TargetLineSample/MainPage.xaml.cs

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
using Syncfusion.Maui.Charts;
2+
3+
namespace TargetLineSample
4+
{
5+
public partial class MainPage : ContentPage
6+
{
7+
public MainPage()
8+
{
9+
InitializeComponent();
10+
}
11+
12+
private void Entry_TextChanged(object sender, TextChangedEventArgs e)
13+
{
14+
if(Y_Axis == null) return;
15+
var maxValue = Y_Axis.Maximum;
16+
17+
if (sender is Entry entry)
18+
{
19+
if (string.IsNullOrWhiteSpace(entry.Text))
20+
{
21+
viewModel.Y1 = double.MinValue;
22+
entry.Text = string.Empty;
23+
}
24+
else
25+
{
26+
if (double.TryParse(e.NewTextValue, out double newValue))
27+
{
28+
if (newValue > maxValue)
29+
{
30+
entry.Text = e.OldTextValue;
31+
}
32+
}
33+
else
34+
{
35+
entry.Text = e.OldTextValue;
36+
}
37+
}
38+
}
39+
}
40+
}
41+
42+
}

0 commit comments

Comments
 (0)