Add Documentation for CapStyle and GapRatio in Doughnut Chart

maui-toolkit/Circular-Charts/DoughnutChart.md

@@ -180,3 +180,89 @@ this.Content = chart;
 {% endtabs %}
 
 ![Center View in MAUI doughnut Chart](Chart-Types_images/maui_center_View.png)
+
+## CapStyle customization
+
+The `CapStyle` property of the doughnut series is used to specify the shape of the start and end points of the circular segment. The default value of this property is `Both.Flat`.
+
+The following types are available for `CapStyle` property.
+
+ * [BothFlat](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CapStyle.html#Syncfusion_Maui_Toolkit_Charts_CapStyle_BothFlat) - Start and end positions of the segment should be updated with a flat shape.
+
+ * [BothCurve](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CapStyle.html#Syncfusion_Maui_Toolkit_Charts_CapStyle_BothCurve) - Start and end positions of the segment should be updated with a curve shape.
+
+ * [StartCurve](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CapStyle.html#Syncfusion_Maui_Toolkit_Charts_CapStyle_StartCurve) - Start position of the segment should be updated with a curve shape.
+
+ * [EndCurve](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CapStyle.html#Syncfusion_Maui_Toolkit_Charts_CapStyle_EndCurve) - End position of the segment should be updated with a curve shape.
+
+ To achieve smoother curves when using CapStyle values, consider increasing the [InnerRadius](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DoughnutSeries.html#Syncfusion_Maui_Toolkit_Charts_DoughnutSeries_InnerRadius) value. A higher InnerRadius reduces the radial thickness of the segment, allowing the Bezier curves to appear more natural and visually appealing.
+
+**BothCurve**
+
+You can customize the CapStyle property of the doughnut series based on its types.
+
+{% tabs %}
+
+{% highlight xaml %}
+
+<chart:SfCircularChart>
+    <chart:DoughnutSeries ItemsSource="{Binding Data}" 
+                          XBindingPath="Product" 
+                          YBindingPath="SalesRate"
+                          CapStyle="BothCurve"
+                          InnerRadius="0.8"/>
+    </chart:SfCircularChart>
+
+{% endhighlight %}
+
+{% highlight c# %}
+
+SfCircularChart chart = new SfCircularChart();
+
+DoughnutSeries series = new DoughnutSeries();
+series.ItemsSource = (new SalesViewModel()).Data;
+series.XBindingPath = "Product";
+series.YBindingPath = "SalesRate";
+series.CapStyle = CapStyle.BothCurve; // Set the cap style for the series
+series.InnerRadius = 0.8;
+
+chart.Series.Add(series);
+this.Content = chart;
+
+{% endhighlight %}
+
+{% endtabs %}
+
+## Segment Spacing
+
+The `GapRatio` property defines the gap between individual doughnut segments. By default, its value is set to `0`, meaning there is no gap between the segments. The value can range from 0 to 1, where 0 represents 0% spacing and 1 represents 100% spacing.
+
+{% tabs %}
+
+{% highlight xaml %}
+
+<chart:SfCircularChart>
+    <chart:DoughnutSeries ItemsSource="{Binding Data}" 
+                          XBindingPath="Product" 
+                          YBindingPath="SalesRate"
+                          GapRatio="0.2"/>
+</chart:SfCircularChart>
+
+{% endhighlight %}
+
+{% highlight c# %}
+
+SfCircularChart chart = new SfCircularChart();
+
+DoughnutSeries series = new DoughnutSeries();
+series.ItemsSource = (new SalesViewModel()).Data;
+series.XBindingPath = "Product";
+series.YBindingPath = "SalesRate";
+series.GapRatio = 0.2; // Set the gap between each doughnut segments
+
+chart.Series.Add(series);
+this.Content = chart;
+
+{% endhighlight %}
+
+{% endtabs %}