Skip to content
Open
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions maui-toolkit-toc.html
Original file line number Diff line number Diff line change
Expand Up @@ -481,6 +481,7 @@
<li><a href="/maui-toolkit/Spark-Charts/overview">Overview</a></li>
<li><a href="/maui-toolkit/Spark-Charts/getting-started">Getting Started</a></li>
<li><a href="/maui-toolkit/Spark-Charts/sparkchart-types">Sparkline Types</a></li>
<li><a href="/maui-toolkit/Spark-Charts/sparkchart-axis-types">Axis types</a></li>
<li><a href="/maui-toolkit/Spark-Charts/markers">Markers</a></li>
<li><a href="/maui-toolkit/Spark-Charts/customize-datapoints">Customize Data Points</a></li>
</ul>
Expand Down
2 changes: 1 addition & 1 deletion maui-toolkit/Spark-Charts/getting-started.md
Original file line number Diff line number Diff line change
Expand Up @@ -405,7 +405,7 @@ The following code example gives you the complete code of above configurations.

{% highlight xaml %}

ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:sparkchart="clr-namespace:Syncfusion.Maui.Toolkit.SparkCharts;assembly=Syncfusion.Maui.Toolkit"
xmlns:model="clr-namespace:GettingStarted"
Expand Down
117 changes: 117 additions & 0 deletions maui-toolkit/Spark-Charts/sparkchart-axis-types.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,117 @@
---
layout: post
title: Axis types in .NET MAUI Spark Chart Control | Syncfusion
description: Learn here all about Axis types supported in Syncfusion® .NET MAUI Spark Charts (SfSparkChart) control and more.
platform: maui-toolkit
control: SfSparkChart
documentation: ug
keywords: maui spark chart axis, spark chart numeric axis, spark chart category axis, spark chart datetime axis, maui sparkline axis types, spark chart axis customization
---

# Axis types in .NET MAUI Spark Charts

Spark charts consist of two axes for measuring and categorizing data: a vertical (Y) axis and a horizontal (X) axis. The Y-axis always uses a numerical scale to measure data values, while the X-axis provides flexibility to change its type using the `AxisType` property, supporting Numeric, Category, and DateTime scales.

## XBindingPath Property

The `XBindingPath` property specifies the data source property that contains the X-axis values. It binds your collection’s data to the horizontal axis of the spark chart.

## AxisType Property

The `AxisType` property of the SfSparkLineChart determines how the chart interprets the X-axis values. It accepts the following SparkChartAxisType enum values like Category, DateTime and Numeric. Its default value is `SparkChartAxisType.Numeric`.

### Category AxisType

The `Category` AxisType treats X-axis values as discrete categories. Use this for categorical or text-based data where each data point represents a distinct group or classification.

{% tabs %}

{% highlight xaml %}

<sparkchart:SfSparkColumnChart ItemsSource="{Binding Data}"
YBindingPath="Value"
XBindingPath="OrderName"
AxisType="Category">
</sparkchart:SfSparkColumnChart>

{% endhighlight %}

{% highlight c# %}

SfSparkColumnChart sparkchart = new SfSparkColumnChart()
{
ItemsSource = new SparkChartViewModel().Data,
YBindingPath = "Value",
XBindingPath = "OrderName",
AxisType = SparkChartAxisType.Category
};
this.Content = sparkchart;

{% endhighlight %}

{% endtabs %}


### DateTime AxisType

The `DateTime` AxisType treats X-axis values as date-time instances. This axis type is used to emphasize changes in values over time, primarily for communicating trends and chronological data visualization rather than individual data values.

{% tabs %}

{% highlight xaml %}

<sparkchart:SfSparkColumnChart ItemsSource="{Binding Data}"
YBindingPath="Value"
XBindingPath="OrderDate"
AxisType="DateTime">
</sparkchart:SfSparkColumnChart>

{% endhighlight %}

{% highlight c# %}

SfSparkAreaChart sparkchart = new SfSparkAreaChart()
{
ItemsSource = new SparkChartViewModel().Data,
YBindingPath = "Value",
XBindingPath = "OrderDate",
AxisType = SparkChartAxisType.DateTime
};

this.Content = sparkchart;

{% endhighlight %}

{% endtabs %}


### Numeric AxisType

The `Numeric` AxisType treats X-axis values as numbers. Use this when your X-axis data contains numerical values that represent quantities, indices, or continuous numerical data on a numerical scale.

{% tabs %}

{% highlight xaml %}

<sparkchart:SfSparkColumnChart ItemsSource="{Binding Data}"
YBindingPath="Value"
XBindingPath="OrderID"
AxisType="Numeric">
</sparkchart:SfSparkColumnChart>

{% endhighlight %}

{% highlight c# %}

SfSparkWinLossChart sparkchart = new SfSparkWinLossChart()
{
ItemsSource = new SparkChartViewModel().Data,
YBindingPath = "Value",
XBindingPath = "OrderID",
AxisType = SparkChartAxisType.Numeric
};
this.Content = sparkchart;

{% endhighlight %}

{% endtabs %}