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,114 @@ | ||
| --- | ||
| 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. | ||
|
|
||
| ## Enable the axis | ||
|
|
||
|
Contributor
There was a problem hiding this comment. dont use ";" in middle of paragraph / sentence which seems like AI generated text |
||
| 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 %} | ||
|
|
||
|  | ||
|
|
||
| ### Axis customization | ||
|
|
||
| [AxisLineStyle](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.SparkCharts.SfSparkChart.html#Syncfusion_Maui_Toolkit_SparkCharts_SfSparkChart_AxisLineStyleProperty) customizes the axis appearance. | ||
|
Contributor
There was a problem hiding this comment. improve the description , refer cartesian chart UG https://help.syncfusion.com/maui-toolkit/cartesian-charts/axis/gridlines#customization , https://help.syncfusion.com/maui-toolkit/cartesian-charts/axis/ticklines#customization |
||
| - [Stroke color](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. | ||
| - [Stroke width](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. | ||
|
Contributor
There was a problem hiding this comment. sentence need to improve like https://help.syncfusion.com/maui-toolkit/cartesian-charts/emptypoints#empty-point-customization |
||
| - [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. | ||
|
|
||
| {% tabs %} | ||
|
|
||
| {% highlight xaml %} | ||
|
|
||
| <spark:SfSparkColumnChart.AxisLineStyle> | ||
| <spark:SparkChartLineStyle StrokeWidth="1.5"> | ||
| <spark:SparkChartLineStyle.Stroke> | ||
| <SolidColorBrush Color="#333333"/> | ||
| </spark:SparkChartLineStyle.Stroke> | ||
|
|
||
| <spark:SparkChartLineStyle.StrokeDashArray> | ||
| 4,2 | ||
| </spark:SparkChartLineStyle.StrokeDashArray> | ||
|
|
||
| </spark:SparkChartLineStyle> | ||
| </spark:SfSparkColumnChart.AxisLineStyle> | ||
|
|
||
| {% endhighlight %} | ||
|
|
||
| {% highlight c# %} | ||
|
|
||
| chart.AxisLineStyle = new SparkChartLineStyle | ||
| { | ||
| Stroke = new SolidColorBrush(Color.FromArgb("#333333")), | ||
| StrokeWidth = 2, | ||
| StrokeDashArray = new DoubleCollection { 4, 2 } | ||
| }; | ||
|
|
||
|
Contributor
There was a problem hiding this comment. add this code this.content = chart |
||
| {% endhighlight %} | ||
|
|
||
| {% endtabs %} | ||
|
|
||
|  | ||
|
|
||
|
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. |
||
|
|
||
| N> Axis 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). | ||
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.
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.
Explain what is axis , why its need for spark chart in 2 lines