diff --git a/maui-toolkit/Cartesian-Charts/Axis/Axis_Images/maui_dateTimeCategory_axis.png b/maui-toolkit/Cartesian-Charts/Axis/Axis_Images/maui_dateTimeCategory_axis.png new file mode 100644 index 00000000..db4e314c Binary files /dev/null and b/maui-toolkit/Cartesian-Charts/Axis/Axis_Images/maui_dateTimeCategory_axis.png differ diff --git a/maui-toolkit/Cartesian-Charts/Axis/Axis_Images/maui_dateTimeCategory_interval.png b/maui-toolkit/Cartesian-Charts/Axis/Axis_Images/maui_dateTimeCategory_interval.png new file mode 100644 index 00000000..ffeef6bd Binary files /dev/null and b/maui-toolkit/Cartesian-Charts/Axis/Axis_Images/maui_dateTimeCategory_interval.png differ diff --git a/maui-toolkit/Cartesian-Charts/Axis/Types.md b/maui-toolkit/Cartesian-Charts/Axis/Types.md index 5117f3e4..182d8ab2 100644 --- a/maui-toolkit/Cartesian-Charts/Axis/Types.md +++ b/maui-toolkit/Cartesian-Charts/Axis/Types.md @@ -15,6 +15,7 @@ Cartesian chart supports the following types of chart axis. * NumericalAxis * CategoryAxis * DateTimeAxis +* DateTimeCategoryAxis * LogarithmicAxis ## Numerical Axis @@ -412,6 +413,79 @@ 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 %} + + + . . . + + + + . . . + + +{% 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-toolkit/Syncfusion.Maui.Toolkit.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 %} + +![DateTimeCategory Axis support in MAUI Chart](Axis_Images/maui_dateTimeCategory_interval.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. diff --git a/maui-toolkit/Cartesian-Charts/PlotBand.md b/maui-toolkit/Cartesian-Charts/PlotBand.md index 36f9b1ef..f31fb5f4 100644 --- a/maui-toolkit/Cartesian-Charts/PlotBand.md +++ b/maui-toolkit/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-toolkit/Syncfusion.Maui.Toolkit.Charts.NumericalPlotBand.html) are used to draw plot bands for [NumericalAxis](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.NumericalAxis.html) and [CategoryAxis](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CategoryAxis.html). To add a plot band, create an instance of [NumericalPlotBandCollection](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.NumericalPlotBandCollection.html) and specify numerical value for the [Start](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.NumericalPlotBand.html#Syncfusion_Maui_Toolkit_Charts_NumericalPlotBand_Start) and [End](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.NumericalPlotBand.html#Syncfusion_Maui_Toolkit_Charts_NumericalPlotBand_End) parameter. These parameters determine the beginning and end of the plot band. +[NumericalPlotBands](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.NumericalPlotBand.html) are used to draw plot bands for [NumericalAxis](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.NumericalAxis.html), [CategoryAxis](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CategoryAxis.html) and `DateTimeCategoryAxis`. To add a plot band, create an instance of [NumericalPlotBandCollection](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.NumericalPlotBandCollection.html) and specify numerical value for the [Start](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.NumericalPlotBand.html#Syncfusion_Maui_Toolkit_Charts_NumericalPlotBand_Start) and [End](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.NumericalPlotBand.html#Syncfusion_Maui_Toolkit_Charts_NumericalPlotBand_End) parameter. These parameters determine the beginning and end of the plot band. {% tabs %} diff --git a/maui-toolkit/Polar-Charts/Axis/Axis_Images/maui_dateTimeCategory_axis.png b/maui-toolkit/Polar-Charts/Axis/Axis_Images/maui_dateTimeCategory_axis.png new file mode 100644 index 00000000..fbb2f72a Binary files /dev/null and b/maui-toolkit/Polar-Charts/Axis/Axis_Images/maui_dateTimeCategory_axis.png differ diff --git a/maui-toolkit/Polar-Charts/Axis/Types.md b/maui-toolkit/Polar-Charts/Axis/Types.md index b7aaa3de..d596285f 100644 --- a/maui-toolkit/Polar-Charts/Axis/Types.md +++ b/maui-toolkit/Polar-Charts/Axis/Types.md @@ -14,6 +14,7 @@ Polar chart supports the following types of chart axis. * NumericalAxis * CategoryAxis * DateTimeAxis +* DateTimeCategoryAxis ## Numerical Axis @@ -307,6 +308,78 @@ 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-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 %} + + + . . . + + + + . . . + + +{% 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-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 %} + + + . . . + + + + . . . + + +{% 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-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartAxis.html#Syncfusion_Maui_Toolkit_Charts_ChartAxis_IsInversed) property. The default value of this property is `False`.