diff --git a/maui-toolkit-toc.html b/maui-toolkit-toc.html index be427528..f7c040f6 100644 --- a/maui-toolkit-toc.html +++ b/maui-toolkit-toc.html @@ -483,6 +483,7 @@
  • Sparkline Types
  • Markers
  • Customize Data Points
  • +
  • Sparkchart Axis
  • diff --git a/maui-toolkit/Spark-Charts/customize-datapoints.md b/maui-toolkit/Spark-Charts/customize-datapoints.md index 62fa6c17..a534d7a1 100644 --- a/maui-toolkit/Spark-Charts/customize-datapoints.md +++ b/maui-toolkit/Spark-Charts/customize-datapoints.md @@ -1,7 +1,7 @@ --- layout: post title: Customize Data Points in .NET MAUI Spark Chart Control | Syncfusion -description: Learn here all about how to customize data points in Syncfusion .NET MAUI Spark Charts (SfSparkChart) control and more. +description: Learn here all about how to customize data points in Syncfusion® .NET MAUI Spark Charts (SfSparkChart) control and more. platform: maui-toolkit control: SfSparkChart documentation: ug diff --git a/maui-toolkit/Spark-Charts/markers.md b/maui-toolkit/Spark-Charts/markers.md index 015e6b19..ebf413b9 100644 --- a/maui-toolkit/Spark-Charts/markers.md +++ b/maui-toolkit/Spark-Charts/markers.md @@ -1,7 +1,7 @@ --- layout: post title: Markers in .NET MAUI Spark Chart Control | Syncfusion -description: Learn here all about the markers supported in Syncfusion .NET MAUI Spark Charts (SfSparkChart) control and more. +description: Learn here all about the markers supported in Syncfusion® .NET MAUI Spark Charts (SfSparkChart) control and more. platform: maui-toolkit control: SfSparkChart documentation: ug diff --git a/maui-toolkit/Spark-Charts/sparkchart-axis.md b/maui-toolkit/Spark-Charts/sparkchart-axis.md new file mode 100644 index 00000000..51703041 --- /dev/null +++ b/maui-toolkit/Spark-Charts/sparkchart-axis.md @@ -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 + +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`. + +{% tabs %} + +{% highlight xaml %} + + + + +{% endhighlight %} + +{% highlight c# %} + +var chart = new SfSparkLineChart +{ + ItemsSource = new SparkChartViewModel().Data, + YBindingPath = "Value", + ShowAxis = true +}; + +{% endhighlight %} + +{% endtabs %} + +![Axis in .NET MAUI Spark Line](sparkchart_axis_line_images\default_axis.png) + +## 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 %} + + + + +{% endhighlight %} + +{% highlight c# %} + +chart.AxisOrigin = 8; + +{% endhighlight %} + +{% endtabs %} + +![Axis origin in .NET MAUI Spark Line](sparkchart_axis_line_images\axis_origin.png) + +### 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. + - [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. + - [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 %} + + + + + + + + + 4,2 + + + + + +{% endhighlight %} + +{% highlight c# %} + +chart.AxisLineStyle = new SparkChartLineStyle +{ + Stroke = new SolidColorBrush(Color.FromArgb("#333333")), + StrokeWidth = 2, + StrokeDashArray = new DoubleCollection { 4, 2 } +}; + +{% endhighlight %} + +{% endtabs %} + +![Axis customization in .NET MAUI Spark Line](sparkchart_axis_line_images/axis_customization.png) + + +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). diff --git a/maui-toolkit/Spark-Charts/sparkchart-types.md b/maui-toolkit/Spark-Charts/sparkchart-types.md index f939ee05..49b2fd52 100644 --- a/maui-toolkit/Spark-Charts/sparkchart-types.md +++ b/maui-toolkit/Spark-Charts/sparkchart-types.md @@ -1,7 +1,7 @@ --- layout: post title: Chart types in .NET MAUI Spark Chart Control | Syncfusion -description: Learn here all about chart types supported in Syncfusion .NET MAUI Spark Charts (SfSparkChart) control and more. +description: Learn here all about chart types supported in Syncfusion® .NET MAUI Spark Charts (SfSparkChart) control and more. platform: maui-toolkit control: SfSparkChart documentation: ug diff --git a/maui-toolkit/Spark-Charts/sparkchart_axis_line_images/axis_customization.png b/maui-toolkit/Spark-Charts/sparkchart_axis_line_images/axis_customization.png new file mode 100644 index 00000000..455d07b2 Binary files /dev/null and b/maui-toolkit/Spark-Charts/sparkchart_axis_line_images/axis_customization.png differ diff --git a/maui-toolkit/Spark-Charts/sparkchart_axis_line_images/axis_origin.png b/maui-toolkit/Spark-Charts/sparkchart_axis_line_images/axis_origin.png new file mode 100644 index 00000000..5bf303d0 Binary files /dev/null and b/maui-toolkit/Spark-Charts/sparkchart_axis_line_images/axis_origin.png differ diff --git a/maui-toolkit/Spark-Charts/sparkchart_axis_line_images/default_axis.png b/maui-toolkit/Spark-Charts/sparkchart_axis_line_images/default_axis.png new file mode 100644 index 00000000..79599638 Binary files /dev/null and b/maui-toolkit/Spark-Charts/sparkchart_axis_line_images/default_axis.png differ