Merge pull request #3690 from syncfusion-content/Migrate-Toolkit-DateTimeCategory-axis-UG-to-internal-UG

982970-Migrate toolkit date time category axis ug to internal ug

Author: Saravanan-Madhesh

MAUI/Cartesian-Charts/Axis/Axis_Images/maui_dateTimeCategory_axis.png

@@ -1,20 +1,21 @@
 ---
 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.
 
 * NumericalAxis
 * CategoryAxis
 * DateTimeAxis
+* DateTimeCategoryAxis
 * LogarithmicAxis
 
 ## Numerical Axis
@@ -417,6 +418,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](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.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/Syncfusion.Maui.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 %}
+
+![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](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.DateTimeAxis.html). 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 %}
+
+![DateTimeCategoryAxis interval 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.

MAUI/Cartesian-Charts/Axis/Axis_Images/maui_dateTimeCategory_interval.png

@@ -26,7 +26,7 @@ Plot bands are classified into [NumericalPlotBand](https://help.syncfusion.com/c
 
 ## Numerical PlotBand 
 
-[NumericalPlotBands](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.NumericalPlotBand.html) are used to draw plot bands for [NumericalAxis](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.NumericalAxis.html) and [CategoryAxis](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.CategoryAxis.html). To add a plot band, create an instance of [NumericalPlotBandCollection](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.NumericalPlotBandCollection.html) and specify numerical value for the [Start](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.NumericalPlotBand.html#Syncfusion_Maui_Charts_NumericalPlotBand_Start) and [End](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.NumericalPlotBand.html#Syncfusion_Maui_Charts_NumericalPlotBand_End) parameter. These parameters determine the beginning and end of the plot band.
+[NumericalPlotBands](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.NumericalPlotBand.html) are used to draw plot bands for [NumericalAxis](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.NumericalAxis.html), [CategoryAxis](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.CategoryAxis.html), and `DateTimeCategoryAxis`. To add a plot band, create an instance of [NumericalPlotBandCollection](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.NumericalPlotBandCollection.html) and specify numerical value for the [Start](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.NumericalPlotBand.html#Syncfusion_Maui_Charts_NumericalPlotBand_Start) and [End](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.NumericalPlotBand.html#Syncfusion_Maui_Charts_NumericalPlotBand_End) parameter. These parameters determine the beginning and end of the plot band.
 
 {% tabs %}
 

MAUI/Cartesian-Charts/Axis/Types.md

@@ -14,6 +14,7 @@ Polar chart supports the following types of chart axis.
 * NumericalAxis
 * CategoryAxis
 * DateTimeAxis
+* DateTimeCategoryAxis
 
 ## Numerical Axis
 
@@ -310,6 +311,77 @@ this.Content = chart;
 
 {% endtabs %}
 
+## DateTimeCategoryAxis
+
+The `DateTimeCategoryAxis` is a specialized type of axis primarily used with financial series. Similar to the [CategoryAxis](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.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/Syncfusion.Maui.Charts.DateTimeAxis.html). 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](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.DateTimeAxis.html). 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`.