From acda93334ea315141c47d74058193f24f33bb864 Mon Sep 17 00:00:00 2001 From: Vallarasu4653 Date: Fri, 23 May 2025 13:33:24 +0530 Subject: [PATCH 1/5] added the content for capstyle and spacing --- maui-toolkit/Circular-Charts/DoughnutChart.md | 91 +++++++++++++++++++ 1 file changed, 91 insertions(+) diff --git a/maui-toolkit/Circular-Charts/DoughnutChart.md b/maui-toolkit/Circular-Charts/DoughnutChart.md index 57ca09e4..a83d43a2 100644 --- a/maui-toolkit/Circular-Charts/DoughnutChart.md +++ b/maui-toolkit/Circular-Charts/DoughnutChart.md @@ -180,3 +180,94 @@ 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 %} + + + + + +{% 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.6; + +chart.Series.Add(series); +this.Content = chart; + +{% endhighlight %} + +{% endtabs %} + +![.NET MAUI Doughnut chart cap style customization]() + +## Spacing + +The [Spacing]() property defines the space 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 %} + + + + + +{% endhighlight %} + +{% highlight c# %} + +SfCircularChart chart = new SfCircularChart(); + +DoughnutSeries series = new DoughnutSeries(); +series.ItemsSource = (new SalesViewModel()).Data; +series.XBindingPath = "Product"; +series.YBindingPath = "SalesRate"; +series.Spacing = 0.2; // Set the gap between each doughnut segments + +chart.Series.Add(series); +this.Content = chart; + +{% endhighlight %} + +{% endtabs %} + +![.NET MAUI Doughnut chart spacing customization]() + From 290184ce182fcffde55bbffdbcf63c5d14d3587d Mon Sep 17 00:00:00 2001 From: Vallarasu Date: Tue, 27 May 2025 18:02:31 +0530 Subject: [PATCH 2/5] update API name for spacing --- maui-toolkit/Circular-Charts/DoughnutChart.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/maui-toolkit/Circular-Charts/DoughnutChart.md b/maui-toolkit/Circular-Charts/DoughnutChart.md index a83d43a2..f03ca296 100644 --- a/maui-toolkit/Circular-Charts/DoughnutChart.md +++ b/maui-toolkit/Circular-Charts/DoughnutChart.md @@ -209,7 +209,7 @@ You can customize the CapStyle property of the doughnut series based on its type @@ -237,7 +237,7 @@ this.Content = chart; ## Spacing -The [Spacing]() property defines the space 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. +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 %} @@ -247,7 +247,7 @@ The [Spacing]() property defines the space between individual doughnut segments. + GapRatio="0.2"/> {% endhighlight %} @@ -260,7 +260,7 @@ DoughnutSeries series = new DoughnutSeries(); series.ItemsSource = (new SalesViewModel()).Data; series.XBindingPath = "Product"; series.YBindingPath = "SalesRate"; -series.Spacing = 0.2; // Set the gap between each doughnut segments +series.GapRatio = 0.2; // Set the gap between each doughnut segments chart.Series.Add(series); this.Content = chart; From bb8d61204fefda6bf7bfd63340cc115be9001fbf Mon Sep 17 00:00:00 2001 From: Vallarasu Date: Thu, 29 May 2025 12:23:11 +0530 Subject: [PATCH 3/5] update on style --- maui-toolkit/Circular-Charts/DoughnutChart.md | 11 +++-------- 1 file changed, 3 insertions(+), 8 deletions(-) diff --git a/maui-toolkit/Circular-Charts/DoughnutChart.md b/maui-toolkit/Circular-Charts/DoughnutChart.md index f03ca296..56209d18 100644 --- a/maui-toolkit/Circular-Charts/DoughnutChart.md +++ b/maui-toolkit/Circular-Charts/DoughnutChart.md @@ -183,9 +183,9 @@ this.Content = chart; ## 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 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. +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. @@ -233,11 +233,9 @@ this.Content = chart; {% endtabs %} -![.NET MAUI Doughnut chart cap style customization]() - ## 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. +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 %} @@ -268,6 +266,3 @@ this.Content = chart; {% endhighlight %} {% endtabs %} - -![.NET MAUI Doughnut chart spacing customization]() - From b1e53f5addb61981657dd72b57c80c221ce9d669 Mon Sep 17 00:00:00 2001 From: Vallarasu Date: Thu, 29 May 2025 12:25:25 +0530 Subject: [PATCH 4/5] update on code snippet --- maui-toolkit/Circular-Charts/DoughnutChart.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/maui-toolkit/Circular-Charts/DoughnutChart.md b/maui-toolkit/Circular-Charts/DoughnutChart.md index 56209d18..4a8a029f 100644 --- a/maui-toolkit/Circular-Charts/DoughnutChart.md +++ b/maui-toolkit/Circular-Charts/DoughnutChart.md @@ -210,7 +210,7 @@ You can customize the CapStyle property of the doughnut series based on its type XBindingPath="Product" YBindingPath="SalesRate" CapStyle="BothCurve" - InnerRadius="0.6"/> + InnerRadius="0.8"/> {% endhighlight %} @@ -224,7 +224,7 @@ 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.6; +series.InnerRadius = 0.8; chart.Series.Add(series); this.Content = chart; From 82f08d40b533b566849d642ec989098c9f4bb578 Mon Sep 17 00:00:00 2001 From: Vallarasu Date: Tue, 10 Jun 2025 13:32:08 +0530 Subject: [PATCH 5/5] Added the API style for CapStyle and GapRatio --- maui-toolkit/Circular-Charts/DoughnutChart.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/maui-toolkit/Circular-Charts/DoughnutChart.md b/maui-toolkit/Circular-Charts/DoughnutChart.md index 4a8a029f..dbfdaaea 100644 --- a/maui-toolkit/Circular-Charts/DoughnutChart.md +++ b/maui-toolkit/Circular-Charts/DoughnutChart.md @@ -183,7 +183,7 @@ this.Content = chart; ## 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 `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. @@ -233,9 +233,9 @@ this.Content = chart; {% endtabs %} -## Spacing +## 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. +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 %}