Skip to content

Commit 7652074

Browse files
authored
Update README.md
1 parent abc4031 commit 7652074

File tree

1 file changed

+75
-1
lines changed

1 file changed

+75
-1
lines changed

README.md

Lines changed: 75 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,76 @@
11
# How-to-Add-Arrows-to-the-Chart-Axis-in-.NET-MAUI-Chart
2-
Learn how to enhance MAUI charts by adding arrows to the chart axes using annotations for improved visualization and clarity.
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 [Line Annotation](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.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/maui/Syncfusion.Maui.Charts.ChartAnnotation.html#Syncfusion_Maui_Charts_ChartAnnotation_X1) - Gets or sets the X1 coordinate of the line annotation.
8+
* [X2](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ShapeAnnotation.html#Syncfusion_Maui_Charts_ShapeAnnotation_X2) - Gets or sets the X2 coordinate of the line annotation.
9+
* [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 line annotation.
10+
* [Y2](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ShapeAnnotation.html#Syncfusion_Maui_Charts_ShapeAnnotation_Y2) - Gets or sets the Y2 coordinate of the line annotation.
11+
* [CoordinateUnit](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartAnnotation.html#Syncfusion_Maui_Charts_ChartAnnotation_CoordinateUnit) - Gets or sets the coordinate unit value for the line annotation.
12+
* [LineCap](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.LineAnnotation.html#Syncfusion_Maui_Charts_LineAnnotation_LineCap) - Gets or sets the line cap value for the line annotation.
13+
14+
Learn step-by-step instructions and gain insights to add arrows to the axis using annotations.
15+
16+
**Step 1:** Initialize the SfCartesianChart and add the series and legend to it as follows.
17+
18+
**XAML**
19+
```xml
20+
<chart:SfCartesianChart>
21+
22+
<chart:SfCartesianChart.Legend>
23+
<chart:ChartLegend/>
24+
</chart:SfCartesianChart.Legend>
25+
26+
<chart:ColumnSeries ItemsSource="{Binding ElectronicsSales}"
27+
XBindingPath="Month"
28+
YBindingPath="Sales"
29+
EnableTooltip="True"
30+
EnableAnimation="True"
31+
Label="Electronic Sales">
32+
</chart:ColumnSeries>
33+
34+
<chart:ColumnSeries ItemsSource="{Binding FurnitureSales}"
35+
XBindingPath="Month"
36+
YBindingPath="Sales"
37+
EnableTooltip="True"
38+
EnableAnimation="True"
39+
Label="Furniture Sales">
40+
</chart:ColumnSeries>
41+
42+
</chart:SfCartesianChart>
43+
```
44+
45+
**Step 2:** Initialize the LineAnnotation within the Annotations collection of the SfCartesianChart, configure it to align with the desired axis, and use the LineCap property to add arrows to the line annotation.
46+
47+
**XAML**
48+
49+
50+
```xml
51+
<chart:SfCartesianChart>
52+
53+
<chart:SfCartesianChart.XAxes>
54+
<chart:CategoryAxis PlotOffsetStart="7" PlotOffsetEnd="17">
55+
.....
56+
</chart:CategoryAxis>
57+
</chart:SfCartesianChart.XAxes>
58+
59+
<chart:SfCartesianChart.YAxes>
60+
<chart:NumericalAxis Minimum="0" Maximum="30000" Interval="10000" PlotOffsetEnd="10" PlotOffsetStart="7">
61+
.....
62+
</chart:NumericalAxis>
63+
</chart:SfCartesianChart.YAxes>
64+
65+
<chart:SfCartesianChart.Annotations>
66+
<chart:LineAnnotation CoordinateUnit="Axis" X1="-0.5" X2="5.6" Y1="0" Y2="0" Stroke="Black" LineCap="Arrow" StrokeWidth="2"/>
67+
<chart:LineAnnotation CoordinateUnit="Axis" X1="-0.5" X2="-0.5" Y1="0" Y2="30000" Stroke="Black" LineCap="Arrow" StrokeWidth="2"/>
68+
</chart:SfCartesianChart.Annotations>
69+
70+
</chart:SfCartesianChart>
71+
```
72+
73+
**Output:**
74+
75+
![AddArrowtoAnnotation](https://github.com/user-attachments/assets/f04a677f-95fa-4cb4-89ed-a62760956175)
76+

0 commit comments

Comments
 (0)