syncfusion-content · Gowrimathi · Apr 4, 2025 · Apr 4, 2025
diff --git a/ej2-asp-core-mvc/accumulation-chart/EJ2_ASP.MVC/funnel.md b/ej2-asp-core-mvc/accumulation-chart/EJ2_ASP.MVC/funnel.md
@@ -1,6 +1,6 @@
 ---
 layout: post
-title: Funnel in ##Platform_Name## Accumulation Chart Component
+title: Funnel in ##Platform_Name## Accumulation Chart Component | Syncfusion
 description: Learn here all about Funnel in Syncfusion ##Platform_Name## Accumulation Chart component of Syncfusion Essential JS 2 and more.
 platform: ej2-asp-core-mvc
 control: Funnel
@@ -9,7 +9,7 @@ documentation: ug
 ---
 
 
-# Funnel Chart
+# Funnel chart in ##Platform_Name## Accumulation Chart Component
 
 To render a funnel series, use the series [`Type`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Charts.AccumulationSeries.html#Syncfusion_EJ2_Charts_AccumulationSeries_Type) as `Funnel`.
 
@@ -67,7 +67,7 @@ The size of the funnel chart can be customized by using the  `Width` and `Height
 
 
 
-## Neck Size
+## Neck size
 
 The funnel's neck size can be customized by using the `NeckWidth` and `NeckHeight` properties.
 
@@ -96,7 +96,7 @@ The funnel's neck size can be customized by using the `NeckWidth` and `NeckHeigh
 
 
 
-## Gap Between the Segments
+## Gap between the segments
 
 Funnel chart provides options to customize the space between the segments by using the `GapRatio` property of the series. It ranges from 0 to 1.
 
@@ -154,7 +154,7 @@ Points can be exploded on mouse click by setting the `Explode` property to true.
 
 
 
-## Smart Data Label
+## Smart data label
 
 It provides the data label smart arrangement of the funnel and pyramid series. The overlap data label will be placed on left side of the funnel/pyramid series.
 
@@ -212,7 +212,69 @@ Individual points can be customized using the `PointRender` event.
 
 
 
-## See Also
+## Mode
+
+The Funnel chart supports both Standard and Trapezoidal modes of rendering. The default value of the [`FunnelMode`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Charts.AccumulationSeries.html#Syncfusion_EJ2_Charts_AccumulationSeries_FunnelMode) is `Standard`.
+
+### Standard
+
+The `Standard` funnel mode follows the traditional funnel shape, with the width continuously narrowing down to a point at the bottom.
+
+{% if page.publishingplatform == "aspnet-core" %}
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/chart/accumulation-charts/funnel/mode-standard/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="Mode-standard.cs" %}
+{% include code-snippet/chart/accumulation-charts/funnel/mode-standard/mode-standard.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+{% elsif page.publishingplatform == "aspnet-mvc" %}
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/chart/accumulation-charts/funnel/mode-standard/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="Mode-standard.cs" %}
+{% include code-snippet/chart/accumulation-charts/funnel/mode-standard/mode-standard.cs %}
+{% endhighlight %}
+{% endtabs %}
+{% endif %}
+
+
+
+### Trapezoidal
+
+The `Trapezoidal` mode is a modified funnel shape where the width narrows, but features a flattened or parallel section near the top, creating a trapezoidal appearance. This mode helps compare different data points more clearly while maintaining a funnel-like structure.
+
+{% if page.publishingplatform == "aspnet-core" %}
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/chart/accumulation-charts/funnel/mode-trapezoidal/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="Mode-trapezoidal.cs" %}
+{% include code-snippet/chart/accumulation-charts/funnel/mode-trapezoidal/mode-trapezoidal.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+{% elsif page.publishingplatform == "aspnet-mvc" %}
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/chart/accumulation-charts/funnel/mode-trapezoidal/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="Mode-trapezoidal.cs" %}
+{% include code-snippet/chart/accumulation-charts/funnel/mode-trapezoidal/mode-trapezoidal.cs %}
+{% endhighlight %}
+{% endtabs %}
+{% endif %}
+
+
+
+## See also
 
 * [Data label](./data-label/)
 * [Grouping](./grouping/)
diff --git a/ej2-asp-core-mvc/accumulation-chart/EJ2_ASP.MVC/title-and-sub-title.md b/ej2-asp-core-mvc/accumulation-chart/EJ2_ASP.MVC/title-and-sub-title.md
@@ -1,6 +1,6 @@
 ---
 layout: post
-title: Title And Sub Title in ##Platform_Name## Accumulation Chart Component
+title: Title And Sub Title in ##Platform_Name## Accumulation Chart Component | Syncfusion
 description: Learn here all about Title And Sub Title in Syncfusion ##Platform_Name## Accumulation Chart component of Syncfusion Essential JS 2 and more.
 platform: ej2-asp-core-mvc
 control: Title And Sub Title
@@ -10,7 +10,7 @@ documentation: ug
 
 <!-- markdownlint-disable MD036 -->
 
-# Title
+# Title in ##Platform_Name## Accumulation Chart Component
 
 Accumulation Chart can be given a title using [`Title`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Charts.AccumulationChart.html#Syncfusion_EJ2_Charts_AccumulationChart_Title) property, to show the information about the data plotted.
 
@@ -39,7 +39,7 @@ Accumulation Chart can be given a title using [`Title`](https://help.syncfusion.
 
 
 
-## Title Customization
+## Title customization
 
 Accumulation Chart can be customized a title using [`TitleStyle`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Charts.AccumulationChart.html#Syncfusion_EJ2_Charts_AccumulationChart_TitleStyle) property.
 
@@ -49,8 +49,8 @@ Accumulation Chart can be customized a title using [`TitleStyle`](https://help.s
 {% highlight cshtml tabtitle="CSHTML" %}
 {% include code-snippet/chart/accumulation-charts/pie-doughnut/title-cus/tagHelper %}
 {% endhighlight %}
-{% highlight c# tabtitle="Title.cs" %}
-{% include code-snippet/chart/accumulation-charts/pie-doughnut/title-cus/title.cs %}
+{% highlight c# tabtitle="Title-cus.cs" %}
+{% include code-snippet/chart/accumulation-charts/pie-doughnut/title-cus/title-cus.cs %}
 {% endhighlight %}
 {% endtabs %}
 
@@ -60,8 +60,37 @@ Accumulation Chart can be customized a title using [`TitleStyle`](https://help.s
 {% highlight razor tabtitle="CSHTML" %}
 {% include code-snippet/chart/accumulation-charts/pie-doughnut/title-cus/razor %}
 {% endhighlight %}
-{% highlight c# tabtitle="Title.cs" %}
-{% include code-snippet/chart/accumulation-charts/pie-doughnut/title-cus/title.cs %}
+{% highlight c# tabtitle="Title-cus.cs" %}
+{% include code-snippet/chart/accumulation-charts/pie-doughnut/title-cus/title-cus.cs %}
+{% endhighlight %}
+{% endtabs %}
+{% endif %}
+
+
+
+### Position
+
+The [`Position`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Charts.AccumulationChartTitleStyleSettings.html#Syncfusion_EJ2_Charts_AccumulationChartTitleStyleSettings_Position) property customizes the placement of the accumulation chart title. It supports the following options: `Right`, `Left`, `Bottom`, `Top`, and `Custom`. The Custom option allows you to position the title anywhere on the chart using x and y coordinates, providing flexible title alignment based on layout requirements.
+
+{% if page.publishingplatform == "aspnet-core" %}
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/chart/accumulation-charts/pie-doughnut/title-position/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="Title-position.cs" %}
+{% include code-snippet/chart/accumulation-charts/pie-doughnut/title-position/title-position.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+{% elsif page.publishingplatform == "aspnet-mvc" %}
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/chart/accumulation-charts/pie-doughnut/title-position/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="Title-position.cs" %}
+{% include code-snippet/chart/accumulation-charts/pie-doughnut/title-position/title-position.cs %}
 {% endhighlight %}
 {% endtabs %}
 {% endif %}
@@ -78,8 +107,8 @@ Accumulation Chart can be given a subtitle using [`SubTitle`](https://help.syncf
 {% highlight cshtml tabtitle="CSHTML" %}
 {% include code-snippet/chart/accumulation-charts/pie-doughnut/sub-title/tagHelper %}
 {% endhighlight %}
-{% highlight c# tabtitle="Title.cs" %}
-{% include code-snippet/chart/accumulation-charts/pie-doughnut/sub-title/title.cs %}
+{% highlight c# tabtitle="Sub-title.cs" %}
+{% include code-snippet/chart/accumulation-charts/pie-doughnut/sub-title/sub-title.cs %}
 {% endhighlight %}
 {% endtabs %}
 
@@ -89,15 +118,15 @@ Accumulation Chart can be given a subtitle using [`SubTitle`](https://help.syncf
 {% highlight razor tabtitle="CSHTML" %}
 {% include code-snippet/chart/accumulation-charts/pie-doughnut/sub-title/razor %}
 {% endhighlight %}
-{% highlight c# tabtitle="Title.cs" %}
-{% include code-snippet/chart/accumulation-charts/pie-doughnut/sub-title/title.cs %}
+{% highlight c# tabtitle="Sub-title.cs" %}
+{% include code-snippet/chart/accumulation-charts/pie-doughnut/sub-title/sub-title.cs %}
 {% endhighlight %}
 {% endtabs %}
 {% endif %}
 
 
 
-## SubTitle Customization
+## SubTitle customization
 
 Accumulation Chart can be customized a subtitle using [`SubTitleStyle`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Charts.AccumulationChart.html#Syncfusion_EJ2_Charts_AccumulationChart_SubTitleStyle) property.
 
@@ -107,8 +136,8 @@ Accumulation Chart can be customized a subtitle using [`SubTitleStyle`](https://
 {% highlight cshtml tabtitle="CSHTML" %}
 {% include code-snippet/chart/accumulation-charts/pie-doughnut/sub-title-cus/tagHelper %}
 {% endhighlight %}
-{% highlight c# tabtitle="Title.cs" %}
-{% include code-snippet/chart/accumulation-charts/pie-doughnut/sub-title-cus/title.cs %}
+{% highlight c# tabtitle="Sub-title-cus.cs" %}
+{% include code-snippet/chart/accumulation-charts/pie-doughnut/sub-title-cus/sub-title-cus.cs %}
 {% endhighlight %}
 {% endtabs %}
 
@@ -118,8 +147,37 @@ Accumulation Chart can be customized a subtitle using [`SubTitleStyle`](https://
 {% highlight razor tabtitle="CSHTML" %}
 {% include code-snippet/chart/accumulation-charts/pie-doughnut/sub-title-cus/razor %}
 {% endhighlight %}
-{% highlight c# tabtitle="Title.cs" %}
-{% include code-snippet/chart/accumulation-charts/pie-doughnut/sub-title-cus/title.cs %}
+{% highlight c# tabtitle="Sub-title-cus.cs" %}
+{% include code-snippet/chart/accumulation-charts/pie-doughnut/sub-title-cus/sub-title-cus.cs %}
+{% endhighlight %}
+{% endtabs %}
+{% endif %}
+
+
+
+### Position
+
+The [`Position`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Charts.AccumulationChartTitleStyleSettings.html#Syncfusion_EJ2_Charts_AccumulationChartTitleStyleSettings_Position) property customizes the placement of the accumulation chart subtitle. It supports the following options: `Right`, `Left`, `Bottom`, `Top`, and `Custom`. The Custom option allows you to position the subtitle anywhere on the chart using x and y coordinates, providing flexible subtitle alignment based on layout requirements.
+
+{% if page.publishingplatform == "aspnet-core" %}
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/chart/accumulation-charts/pie-doughnut/title-position/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="Title-position.cs" %}
+{% include code-snippet/chart/accumulation-charts/pie-doughnut/title-position/title-position.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+{% elsif page.publishingplatform == "aspnet-mvc" %}
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/chart/accumulation-charts/pie-doughnut/title-position/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="Title-position.cs" %}
+{% include code-snippet/chart/accumulation-charts/pie-doughnut/title-position/title-position.cs %}
 {% endhighlight %}
 {% endtabs %}
 {% endif %}

diff --git a/ej2-asp-core-mvc/accumulation-chart/EJ2_ASP.NETCORE/funnel.md b/ej2-asp-core-mvc/accumulation-chart/EJ2_ASP.NETCORE/funnel.md
@@ -9,7 +9,7 @@ documentation: ug
 ---
 
 
-# Funnel Chart in ##Platform_Name## Accumulation Chart Component
+# Funnel chart in ##Platform_Name## Accumulation Chart Component
 
 To render a funnel series, use the series [`type`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Charts.AccumulationSeries.html#Syncfusion_EJ2_Charts_AccumulationSeries_Type) as `Funnel`.
 
@@ -77,7 +77,7 @@ public class FunnelChartData
 
 
 
-## Neck Size
+## Neck size
 
 The funnel's neck size can be customized by using the `neckWidth` and `neckHeight` properties.
 
@@ -111,7 +111,7 @@ public class FunnelChartData
 
 
 
-## Gap Between the Segments
+## Gap between the segments
 
 Funnel chart provides options to customize the space between the segments by using the `gapRatio` property of the series. It ranges from 0 to 1.
 
@@ -179,7 +179,7 @@ public class FunnelChartData
 
 
 
-## Smart Data Label
+## Smart data label
 
 It provides the data label smart arrangement of the funnel and pyramid series. The overlap data label will be placed on left side of the funnel or pyramid series.
 
@@ -248,7 +248,69 @@ public class FunnelChartData
 
 
 
-## See Also
+## Mode
+
+The Funnel chart supports both Standard and Trapezoidal modes of rendering. The default value of the [`FunnelMode`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Charts.AccumulationSeries.html#Syncfusion_EJ2_Charts_AccumulationSeries_FunnelMode) is `Standard`.
+
+### Standard
+
+The `Standard` funnel mode follows the traditional funnel shape, with the width continuously narrowing down to a point at the bottom.
+
+{% if page.publishingplatform == "aspnet-core" %}
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/chart/accumulation-charts/funnel/mode-standard/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="Mode-standard.cs" %}
+{% include code-snippet/chart/accumulation-charts/funnel/mode-standard/mode-standard.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+{% elsif page.publishingplatform == "aspnet-mvc" %}
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/chart/accumulation-charts/funnel/mode-standard/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="Mode-standard.cs" %}
+{% include code-snippet/chart/accumulation-charts/funnel/mode-standard/mode-standard.cs %}
+{% endhighlight %}
+{% endtabs %}
+{% endif %}
+
+
+
+### Trapezoidal
+
+The `Trapezoidal` mode is a modified funnel shape where the width narrows, but features a flattened or parallel section near the top, creating a trapezoidal appearance. This mode helps compare different data points more clearly while maintaining a funnel-like structure.
+
+{% if page.publishingplatform == "aspnet-core" %}
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/chart/accumulation-charts/funnel/mode-trapezoidal/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="Mode-trapezoidal.cs" %}
+{% include code-snippet/chart/accumulation-charts/funnel/mode-trapezoidal/mode-trapezoidal.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+{% elsif page.publishingplatform == "aspnet-mvc" %}
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/chart/accumulation-charts/funnel/mode-trapezoidal/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="Mode-trapezoidal.cs" %}
+{% include code-snippet/chart/accumulation-charts/funnel/mode-trapezoidal/mode-trapezoidal.cs %}
+{% endhighlight %}
+{% endtabs %}
+{% endif %}
+
+
+
+## See also
 
 * [Data label](./data-label/)
 * [Grouping](./grouping/)