Skip to content
Merged
Show file tree
Hide file tree
Changes from 4 commits
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
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
62 changes: 62 additions & 0 deletions maui-toolkit/Cartesian-Charts/Axis/Types.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ Cartesian chart supports the following types of chart axis.
* NumericalAxis
* CategoryAxis
* DateTimeAxis
* DateTimeCategoryAxis
* LogarithmicAxis

## Numerical Axis
Expand Down Expand Up @@ -412,6 +413,67 @@ 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](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CategoryAxis.html), 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](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DateTimeAxis.html). 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 %}

### Interval

In [DateTimeCategoryAxis](), intervals can be customized by using the Interval and IntervalType properties, similar to [DateTimeAxis](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DateTimeAxis.html). For example, setting [Interval]() as 3 and [IntervalType]() as [Months]() will consider 3 months as interval.

{% tabs %}

{% highlight xaml %}

<chart:SfCartesianChart>
<chart:SfCartesianChart.XAxes>
<chart:DateTimeCategoryAxis
Interval="3"
IntervalType="Months"/>
</chart:SfCartesianChart.XAxes>
</chart:SfCartesianChart>

{% endhighlight %}

{% highlight c# %}

SfCartesianChart chart = new SfCartesianChart();
DateTimeCategoryAxis primaryAxis = new DateTimeCategoryAxis() { Interval = 3, IntervalType = DateTimeIntervalType.Months };
chart.XAxes.Add(primaryAxis);

this.Content = chart;

{% endhighlight %}

{% endtabs %}

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

## Logarithmic Axis

The [LogarithmicAxis](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.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