|
1 | 1 | # 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 | + |
| 76 | + |
0 commit comments