diff --git a/MAUI/Cartesian-Charts/Axis/Axis_Images/maui_dateTimeCategory_axis.png b/MAUI/Cartesian-Charts/Axis/Axis_Images/maui_dateTimeCategory_axis.png new file mode 100644 index 0000000000..db4e314c3d Binary files /dev/null and b/MAUI/Cartesian-Charts/Axis/Axis_Images/maui_dateTimeCategory_axis.png differ diff --git a/MAUI/Cartesian-Charts/Axis/Axis_Images/maui_dateTimeCategory_interval.png b/MAUI/Cartesian-Charts/Axis/Axis_Images/maui_dateTimeCategory_interval.png new file mode 100644 index 0000000000..ffeef6bd96 Binary files /dev/null and b/MAUI/Cartesian-Charts/Axis/Axis_Images/maui_dateTimeCategory_interval.png differ diff --git a/MAUI/Cartesian-Charts/Axis/Types.md b/MAUI/Cartesian-Charts/Axis/Types.md index be0ee5e3dd..a9509ef1f5 100644 --- a/MAUI/Cartesian-Charts/Axis/Types.md +++ b/MAUI/Cartesian-Charts/Axis/Types.md @@ -1,6 +1,6 @@ --- 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 @@ -8,13 +8,14 @@ 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 %} + + + . . . + + + + . . . + + +{% 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 %} + + + . . . + + + + . . . + + +{% 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. diff --git a/MAUI/Cartesian-Charts/PlotBand.md b/MAUI/Cartesian-Charts/PlotBand.md index 4fdeeb8ae9..2c4e15c70e 100644 --- a/MAUI/Cartesian-Charts/PlotBand.md +++ b/MAUI/Cartesian-Charts/PlotBand.md @@ -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 %} diff --git a/MAUI/Polar-Charts/Axis/Axis_Images/maui_dateTimeCategory_axis.png b/MAUI/Polar-Charts/Axis/Axis_Images/maui_dateTimeCategory_axis.png new file mode 100644 index 0000000000..fbb2f72a8e Binary files /dev/null and b/MAUI/Polar-Charts/Axis/Axis_Images/maui_dateTimeCategory_axis.png differ diff --git a/MAUI/Polar-Charts/Axis/Types.md b/MAUI/Polar-Charts/Axis/Types.md index 60f6812062..4d126bd27c 100644 --- a/MAUI/Polar-Charts/Axis/Types.md +++ b/MAUI/Polar-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 %} + + + . . . + + + + . . . + + +{% 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 %} + + + . . . + + + + . . . + + +{% 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`.