MAUI-983567 - [Others] Updated axis line page UG #380
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,169 @@ | ||
| --- | ||
| layout: post | ||
| title: Axis in .NET MAUI Spark Chart Control | Syncfusion | ||
| description: Learn how to display and customize the axis in Syncfusion® .NET MAUI Spark Charts (SfSparkChart) using ShowAxis, AxisOrigin, and AxisLineStyle. | ||
| platform: maui-toolkit | ||
| control: SfSparkChart | ||
| documentation: ug | ||
| --- | ||
|
|
||
| # Axis in .NET MAUI Spark Charts | ||
|
|
||
| Axis can be configured and customized using following properties. This feature is applicable for all the [SfSparkChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.SparkCharts.SfSparkChart.html) types except [SfSparkWinLossChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.SparkCharts.SfSparkWinLossChart.html). | ||
|
|
||
| - [ShowAxis](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.SparkCharts.SfSparkChart.html#Syncfusion_Maui_Toolkit_SparkCharts_SfSparkChart_ShowAxisProperty) : Enables or disables the axis. Default value is `false`. | ||
| - [AxisOrigin](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.SparkCharts.SfSparkChart.html#Syncfusion_Maui_Toolkit_SparkCharts_SfSparkChart_AxisOriginProperty) : Sets the Y-value where the axis is drawn. Default it renders at `0`. | ||
| - [AxisLineStyle](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.SparkCharts.SfSparkChart.html#Syncfusion_Maui_Toolkit_SparkCharts_SfSparkChart_AxisLineStyleProperty) : Customizes the axis appearance | ||
| - [Stroke](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.SparkCharts.SparkChartLineStyle.html#Syncfusion_Maui_Toolkit_SparkCharts_SparkChartLineStyle_StrokeProperty) : Specifies the line color of the axis. | ||
| - [StrokeWidth](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.SparkCharts.SparkChartLineStyle.html#Syncfusion_Maui_Toolkit_SparkCharts_SparkChartLineStyle_StrokeWidthProperty) : Specifies the line thickness of the axis. Default it is set to 1. | ||
| - [StrokeDashArray](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.SparkCharts.SparkChartLineStyle.html#Syncfusion_Maui_Toolkit_SparkCharts_SparkChartLineStyle_StrokeDashArrayProperty) : Specifies the dash pattern for the axis. Default it is set to null. | ||
|
|
||
| ## Enable the axis | ||
|
|
||
| Set the [ShowAxis](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.SparkCharts.SfSparkChart.html#Syncfusion_Maui_Toolkit_SparkCharts_SfSparkChart_ShowAxisProperty) property to display the axis at the chart’s origin in [SfSparkChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.SparkCharts.SfSparkChart.html); by default, the axis is set to `False`. | ||
|
Contributor
There was a problem hiding this comment. API link navigated to fields instead of API once check the all URL |
||
|
|
||
| {% tabs %} | ||
|
|
||
| {% highlight xaml %} | ||
|
|
||
| <sparkchart:SfSparkLineChart | ||
| ItemsSource="{Binding Data}" | ||
| YBindingPath="Value" | ||
| ShowAxis="True"> | ||
| </sparkchart:SfSparkLineChart> | ||
|
|
||
| {% endhighlight %} | ||
|
|
||
| {% highlight c# %} | ||
|
|
||
| var chart = new SfSparkLineChart | ||
| { | ||
| ItemsSource = new SparkChartViewModel().Data, | ||
| YBindingPath = "Value", | ||
| ShowAxis = true | ||
| }; | ||
|
|
||
|
Contributor
There was a problem hiding this comment. add this code this.content = chart |
||
| {% endhighlight %} | ||
|
|
||
| {% endtabs %} | ||
|
|
||
|  | ||
|
|
||
| ## Axis origin | ||
|
|
||
| Set [AxisOrigin](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.SparkCharts.SfSparkChart.html#Syncfusion_Maui_Toolkit_SparkCharts_SfSparkChart_AxisOriginProperty) to draw the line at a specific Y value (for example, `0` to emphasize zero, or any custom value) of [SfSparkChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.SparkCharts.SfSparkChart.html). | ||
|
|
||
| {% tabs %} | ||
|
|
||
| {% highlight xaml %} | ||
|
|
||
| <sparkchart:SfSparkLineChart | ||
| ItemsSource="{Binding Data}" | ||
| YBindingPath="Value" | ||
| ShowAxis="True" | ||
| AxisOrigin="8"> | ||
| </sparkchart:SfSparkLineChart> | ||
|
|
||
| {% endhighlight %} | ||
|
|
||
| {% highlight c# %} | ||
|
|
||
| chart.AxisOrigin = 8; | ||
|
Contributor
There was a problem hiding this comment. include the chart initialize code var chart = new SfSparkLineChart(); |
||
|
|
||
| {% endhighlight %} | ||
|
|
||
| {% endtabs %} | ||
|
|
||
|  | ||
|
|
||
| ## Style the axis | ||
|
|
||
| ### Stroke width | ||
|
|
||
| Controls the thickness of the axis of [SfSparkChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.SparkCharts.SfSparkChart.html). | ||
|
|
||
| {% tabs %} | ||
|
|
||
| {% highlight xaml %} | ||
|
|
||
| <sparkchart:SfSparkLineChart.AxisLineStyle> | ||
| <sparkchart:SparkChartLineStyle StrokeWidth="2" /> | ||
| </sparkchart:SfSparkLineChart.AxisLineStyle> | ||
|
|
||
| {% endhighlight %} | ||
|
|
||
| {% highlight c# %} | ||
|
|
||
| chart.AxisLineStyle = new SparkChartLineStyle | ||
| { | ||
| StrokeWidth = 2 | ||
| }; | ||
|
|
||
| {% endhighlight %} | ||
|
|
||
| {% endtabs %} | ||
|
|
||
|  | ||
|
|
||
| ### Stroke color | ||
|
|
||
| Sets the color of the axis of [SfSparkChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.SparkCharts.SfSparkChart.html). | ||
|
|
||
| {% tabs %} | ||
|
|
||
| {% highlight xaml %} | ||
|
|
||
| <sparkchart:SfSparkLineChart.AxisLineStyle> | ||
| <sparkchart:SparkChartLineStyle> | ||
| <sparkchart:SparkChartLineStyle.Stroke> | ||
| <SolidColorBrush Color="#333333" /> | ||
| </sparkchart:SparkChartLineStyle.Stroke> | ||
| </sparkchart:SparkChartLineStyle> | ||
| </sparkchart:SfSparkLineChart.AxisLineStyle> | ||
|
|
||
| {% endhighlight %} | ||
|
|
||
| {% highlight c# %} | ||
|
|
||
| chart.AxisLineStyle = new SparkChartLineStyle | ||
| { | ||
| Stroke = new SolidColorBrush(Color.FromArgb("#F9113D")) | ||
| }; | ||
|
|
||
|
Contributor
There was a problem hiding this comment. add this code this.content = chart |
||
| {% endhighlight %} | ||
|
|
||
| {% endtabs %} | ||
|
|
||
|  | ||
|
|
||
| ### Dashed line (StrokeDashArray) | ||
|
|
||
| Applies a dash pattern to the axis of [SfSparkChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.SparkCharts.SfSparkChart.html). | ||
|
|
||
| {% tabs %} | ||
|
|
||
| {% highlight xaml %} | ||
|
|
||
| <sparkchart:SfSparkLineChart.AxisLineStyle> | ||
| <sparkchart:SparkChartLineStyle StrokeWidth="1.5"> | ||
| <sparkchart:SparkChartLineStyle.StrokeDashArray> | ||
| 4,2 | ||
| </sparkchart:SparkChartLineStyle.StrokeDashArray> | ||
| </sparkchart:SparkChartLineStyle> | ||
| </sparkchart:SfSparkLineChart.AxisLineStyle> | ||
|
|
||
| {% endhighlight %} | ||
|
|
||
| {% highlight c# %} | ||
|
|
||
| chart.AxisLineStyle = new SparkChartLineStyle | ||
| { | ||
| StrokeWidth = 1.5, | ||
| StrokeDashArray = new DoubleCollection { 4, 2 } | ||
| }; | ||
|
|
||
| {% endhighlight %} | ||
|
|
||
|
Contributor
There was a problem hiding this comment. Ensure all code snippets by deploying the same code in VS and update the confirmation in the PR template. |
||
| {% endtabs %} | ||
|
|
||
|  | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
dont use ";" in middle of paragraph / sentence which seems like AI generated text