Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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.
76 changes: 74 additions & 2 deletions MAUI/Cartesian-Charts/Axis/Types.md
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
---
layout: post
title: Axis types in .NET MAUI Chart control | Syncfusion
title: Axis types in .NET MAUI Cartesian Chart control | Syncfusion
description: Learn here all about axis types and its features in Syncfusion® .NET MAUI Chart (SfCartesianChart) control and more.
platform: maui
control: SfCartesianChart
documentation: ug
keywords: .net maui cartesian charts, .net maui axis types, cartesian chart axis types, syncfusion cartesian charts maui, maui chart axis customization, .net maui chart axis, cartesian chart axis guide maui, .net maui sfCartesianChart axis.
---

# Types of Axis in .NET MAUI Chart
# Types of Axis in .NET MAUI Cartesian Chart

Cartesian chart supports the following types of chart axis.

Expand Down Expand Up @@ -417,6 +417,78 @@ this.Content = chart;

![DateTimeAxis range customization support in MAUI Chart](Axis_Images/maui_chart_datetime_axis_range.jpg)

## DateTimeCategoryAxis

The `DateTimeCategoryAxis` is a specialized type of axis primarily used with financial series. Similar to the `CategoryAxis`, all data points are plotted with equal spacing, eliminating gaps for missing dates. The intervals and ranges for this axis are calculated similarly to the `DateTimeAxis`. There are no visual gaps between points, even if the difference between two points exceeds a year.

{% tabs %}

{% highlight xaml %}

<chart:SfCartesianChart>
. . .
<chart:SfCartesianChart.XAxes>
<chart:DateTimeCategoryAxis/>
</chart:SfCartesianChart.XAxes>
. . .
</chart:SfCartesianChart>

{% endhighlight %}

{% highlight c# %}

SfCartesianChart chart = new SfCartesianChart();
. . .
// Create an instance of the DateTimeCategoryAxis, used for displaying DateTime values as categories
DateTimeCategoryAxis primaryAxis = new DateTimeCategoryAxis();
// Add the DateTimeCategoryAxis instance to the chart's XAxes collection
chart.XAxes.Add(primaryAxis);

this.Content = chart;

{% endhighlight %}

{% endtabs %}

![DateTimeCategory Axis support in MAUI Chart](Axis_Images/maui_dateTimeCategory_axis.png)

### Interval

In `DateTimeCategoryAxis`, intervals can be customized by using the Interval and IntervalType properties, similar to `DateTimeAxis`. For example, setting `Interval` as 5 and `IntervalType` as `Days` will consider 5 days as an interval.
{% tabs %}

{% highlight xaml %}

<chart:SfCartesianChart>
. . .
<chart:SfCartesianChart.XAxes>
<chart:DateTimeCategoryAxis Interval="5"
IntervalType="Days"/>
</chart:SfCartesianChart.XAxes>
. . .
</chart:SfCartesianChart>

{% endhighlight %}

{% highlight c# %}

SfCartesianChart chart = new SfCartesianChart();
. . .
DateTimeCategoryAxis primaryAxis = new DateTimeCategoryAxis()
{
Interval = 5,
IntervalType = DateTimeIntervalType.Days
};
chart.XAxes.Add(primaryAxis);
. . .
this.Content = chart;

{% endhighlight %}

{% endtabs %}

![DateTimeCategory Axis support in MAUI Chart](Axis_Images/maui_dateTimeCategory_interval.png)

## Logarithmic Axis

The [LogarithmicAxis](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.LogarithmicAxis.html) uses a logarithmic scale, and it is very useful in visualizing data when the given data range has a big difference. It can be used either on the x-axis or the chart's y-axis.
Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
71 changes: 71 additions & 0 deletions MAUI/Polar-Charts/Axis/Types.md
Original file line number Diff line number Diff line change
Expand Up @@ -310,6 +310,77 @@ this.Content = chart;

{% endtabs %}

## DateTimeCategoryAxis

The `DateTimeCategoryAxis` is a specialized type of axis primarily used with financial series. Similar to the `CategoryAxis`, all data points are plotted with equal spacing, eliminating gaps for missing dates. The intervals and ranges for this axis are calculated similarly to the `DateTimeAxis`. There are no visual gaps between points, even if the difference between two points exceeds a year.

{% tabs %}

{% highlight xaml %}

<chart:SfPolarChart>
. . .
<chart:SfPolarChart.PrimaryAxis>
<chart:DateTimeCategoryAxis/>
</chart:SfPolarChart.PrimaryAxis>
. . .
</chart:SfPolarChart>

{% endhighlight %}

{% highlight c# %}

SfPolarChart chart = new SfPolarChart();
. . .
// Create an instance of the DateTimeCategoryAxis, used for displaying DateTime values as categories
DateTimeCategoryAxis primaryAxis = new DateTimeCategoryAxis();
// Add the DateTimeCategoryAxis instance to the chart's XAxes collection
chart.PrimaryAxis.Add(primaryAxis);
. . .
this.Content = chart;

{% endhighlight %}

{% endtabs %}

![DateTimeCategory Axis support in MAUI Chart](Axis_Images/maui_dateTimeCategory_axis.png)

### Interval

In `DateTimeCategoryAxis`, intervals can be customized by using the Interval and IntervalType properties, similar to `DateTimeAxis`. For example, setting `Interval` as 3 and `IntervalType` as `Months` will consider 3 months as interval.

{% tabs %}

{% highlight xaml %}

<chart:SfPolarChart>
. . .
<chart:SfPolarChart.PrimaryAxis>
<chart:DateTimeCategoryAxis Interval="3"
IntervalType="Months"/>
</chart:SfPolarChart.PrimaryAxis>
. . .
</chart:SfPolarChart>

{% endhighlight %}

{% highlight c# %}

SfPolarChart chart = new SfPolarChart();
. . .
DateTimeCategoryAxis primaryAxis = new DateTimeCategoryAxis()
{
Interval = 3,
IntervalType = DateTimeIntervalType.Months
};
chart.PrimaryAxis.Add(primaryAxis);
. . .
this.Content = chart;

{% endhighlight %}

{% endtabs %}

## Inversed

Axis can be inverted using the [IsInversed](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartAxis.html#Syncfusion_Maui_Charts_ChartAxis_IsInversed) property. The default value of this property is `False`.
Expand Down