Skip to content

Commit a2e54e5

Browse files
GowrimathiGowrimathi
authored
Merge pull request #4121 from syncfusion-content/EJ2-949742-chartSamples
949742: Added UG sample for newly added features.
2 parents 476ac68 + 3b88b10 commit a2e54e5

File tree

136 files changed

+4503
-56
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

136 files changed

+4503
-56
lines changed

‎ej2-asp-core-mvc/accumulation-chart/EJ2_ASP.MVC/funnel.md

Lines changed: 68 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
layout: post
3-
title: Funnel in ##Platform_Name## Accumulation Chart Component
3+
title: Funnel in ##Platform_Name## Accumulation Chart Component | Syncfusion
44
description: Learn here all about Funnel in Syncfusion ##Platform_Name## Accumulation Chart component of Syncfusion Essential JS 2 and more.
55
platform: ej2-asp-core-mvc
66
control: Funnel
@@ -9,7 +9,7 @@ documentation: ug
99
---
1010

1111

12-
# Funnel Chart
12+
# Funnel chart in ##Platform_Name## Accumulation Chart Component
1313

1414
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`.
1515

@@ -67,7 +67,7 @@ The size of the funnel chart can be customized by using the `Width` and `Height
6767

6868

6969

70-
## Neck Size
70+
## Neck size
7171

7272
The funnel's neck size can be customized by using the `NeckWidth` and `NeckHeight` properties.
7373

@@ -96,7 +96,7 @@ The funnel's neck size can be customized by using the `NeckWidth` and `NeckHeigh
9696

9797

9898

99-
## Gap Between the Segments
99+
## Gap between the segments
100100

101101
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.
102102

@@ -154,7 +154,7 @@ Points can be exploded on mouse click by setting the `Explode` property to true.
154154

155155

156156

157-
## Smart Data Label
157+
## Smart data label
158158

159159
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.
160160

@@ -212,7 +212,69 @@ Individual points can be customized using the `PointRender` event.
212212

213213

214214

215-
## See Also
215+
## Mode
216+
217+
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`.
218+
219+
### Standard
220+
221+
The `Standard` funnel mode follows the traditional funnel shape, with the width continuously narrowing down to a point at the bottom.
222+
223+
{% if page.publishingplatform == "aspnet-core" %}
224+
225+
{% tabs %}
226+
{% highlight cshtml tabtitle="CSHTML" %}
227+
{% include code-snippet/chart/accumulation-charts/funnel/mode-standard/tagHelper %}
228+
{% endhighlight %}
229+
{% highlight c# tabtitle="Mode-standard.cs" %}
230+
{% include code-snippet/chart/accumulation-charts/funnel/mode-standard/mode-standard.cs %}
231+
{% endhighlight %}
232+
{% endtabs %}
233+
234+
{% elsif page.publishingplatform == "aspnet-mvc" %}
235+
236+
{% tabs %}
237+
{% highlight razor tabtitle="CSHTML" %}
238+
{% include code-snippet/chart/accumulation-charts/funnel/mode-standard/razor %}
239+
{% endhighlight %}
240+
{% highlight c# tabtitle="Mode-standard.cs" %}
241+
{% include code-snippet/chart/accumulation-charts/funnel/mode-standard/mode-standard.cs %}
242+
{% endhighlight %}
243+
{% endtabs %}
244+
{% endif %}
245+
246+
247+
248+
### Trapezoidal
249+
250+
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.
251+
252+
{% if page.publishingplatform == "aspnet-core" %}
253+
254+
{% tabs %}
255+
{% highlight cshtml tabtitle="CSHTML" %}
256+
{% include code-snippet/chart/accumulation-charts/funnel/mode-trapezoidal/tagHelper %}
257+
{% endhighlight %}
258+
{% highlight c# tabtitle="Mode-trapezoidal.cs" %}
259+
{% include code-snippet/chart/accumulation-charts/funnel/mode-trapezoidal/mode-trapezoidal.cs %}
260+
{% endhighlight %}
261+
{% endtabs %}
262+
263+
{% elsif page.publishingplatform == "aspnet-mvc" %}
264+
265+
{% tabs %}
266+
{% highlight razor tabtitle="CSHTML" %}
267+
{% include code-snippet/chart/accumulation-charts/funnel/mode-trapezoidal/razor %}
268+
{% endhighlight %}
269+
{% highlight c# tabtitle="Mode-trapezoidal.cs" %}
270+
{% include code-snippet/chart/accumulation-charts/funnel/mode-trapezoidal/mode-trapezoidal.cs %}
271+
{% endhighlight %}
272+
{% endtabs %}
273+
{% endif %}
274+
275+
276+
277+
## See also
216278

217279
* [Data label](./data-label/)
218280
* [Grouping](./grouping/)

‎ej2-asp-core-mvc/accumulation-chart/EJ2_ASP.MVC/title-and-sub-title.md

Lines changed: 74 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
layout: post
3-
title: Title And Sub Title in ##Platform_Name## Accumulation Chart Component
3+
title: Title And Sub Title in ##Platform_Name## Accumulation Chart Component | Syncfusion
44
description: Learn here all about Title And Sub Title in Syncfusion ##Platform_Name## Accumulation Chart component of Syncfusion Essential JS 2 and more.
55
platform: ej2-asp-core-mvc
66
control: Title And Sub Title
@@ -10,7 +10,7 @@ documentation: ug
1010

1111
<!-- markdownlint-disable MD036 -->
1212

13-
# Title
13+
# Title in ##Platform_Name## Accumulation Chart Component
1414

1515
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.
1616

@@ -39,7 +39,7 @@ Accumulation Chart can be given a title using [`Title`](https://help.syncfusion.
3939

4040

4141

42-
## Title Customization
42+
## Title customization
4343

4444
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.
4545

@@ -49,8 +49,8 @@ Accumulation Chart can be customized a title using [`TitleStyle`](https://help.s
4949
{% highlight cshtml tabtitle="CSHTML" %}
5050
{% include code-snippet/chart/accumulation-charts/pie-doughnut/title-cus/tagHelper %}
5151
{% endhighlight %}
52-
{% highlight c# tabtitle="Title.cs" %}
53-
{% include code-snippet/chart/accumulation-charts/pie-doughnut/title-cus/title.cs %}
52+
{% highlight c# tabtitle="Title-cus.cs" %}
53+
{% include code-snippet/chart/accumulation-charts/pie-doughnut/title-cus/title-cus.cs %}
5454
{% endhighlight %}
5555
{% endtabs %}
5656

@@ -60,8 +60,37 @@ Accumulation Chart can be customized a title using [`TitleStyle`](https://help.s
6060
{% highlight razor tabtitle="CSHTML" %}
6161
{% include code-snippet/chart/accumulation-charts/pie-doughnut/title-cus/razor %}
6262
{% endhighlight %}
63-
{% highlight c# tabtitle="Title.cs" %}
64-
{% include code-snippet/chart/accumulation-charts/pie-doughnut/title-cus/title.cs %}
63+
{% highlight c# tabtitle="Title-cus.cs" %}
64+
{% include code-snippet/chart/accumulation-charts/pie-doughnut/title-cus/title-cus.cs %}
65+
{% endhighlight %}
66+
{% endtabs %}
67+
{% endif %}
68+
69+
70+
71+
### Position
72+
73+
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.
74+
75+
{% if page.publishingplatform == "aspnet-core" %}
76+
77+
{% tabs %}
78+
{% highlight cshtml tabtitle="CSHTML" %}
79+
{% include code-snippet/chart/accumulation-charts/pie-doughnut/title-position/tagHelper %}
80+
{% endhighlight %}
81+
{% highlight c# tabtitle="Title-position.cs" %}
82+
{% include code-snippet/chart/accumulation-charts/pie-doughnut/title-position/title-position.cs %}
83+
{% endhighlight %}
84+
{% endtabs %}
85+
86+
{% elsif page.publishingplatform == "aspnet-mvc" %}
87+
88+
{% tabs %}
89+
{% highlight razor tabtitle="CSHTML" %}
90+
{% include code-snippet/chart/accumulation-charts/pie-doughnut/title-position/razor %}
91+
{% endhighlight %}
92+
{% highlight c# tabtitle="Title-position.cs" %}
93+
{% include code-snippet/chart/accumulation-charts/pie-doughnut/title-position/title-position.cs %}
6594
{% endhighlight %}
6695
{% endtabs %}
6796
{% endif %}
@@ -78,8 +107,8 @@ Accumulation Chart can be given a subtitle using [`SubTitle`](https://help.syncf
78107
{% highlight cshtml tabtitle="CSHTML" %}
79108
{% include code-snippet/chart/accumulation-charts/pie-doughnut/sub-title/tagHelper %}
80109
{% endhighlight %}
81-
{% highlight c# tabtitle="Title.cs" %}
82-
{% include code-snippet/chart/accumulation-charts/pie-doughnut/sub-title/title.cs %}
110+
{% highlight c# tabtitle="Sub-title.cs" %}
111+
{% include code-snippet/chart/accumulation-charts/pie-doughnut/sub-title/sub-title.cs %}
83112
{% endhighlight %}
84113
{% endtabs %}
85114

@@ -89,15 +118,15 @@ Accumulation Chart can be given a subtitle using [`SubTitle`](https://help.syncf
89118
{% highlight razor tabtitle="CSHTML" %}
90119
{% include code-snippet/chart/accumulation-charts/pie-doughnut/sub-title/razor %}
91120
{% endhighlight %}
92-
{% highlight c# tabtitle="Title.cs" %}
93-
{% include code-snippet/chart/accumulation-charts/pie-doughnut/sub-title/title.cs %}
121+
{% highlight c# tabtitle="Sub-title.cs" %}
122+
{% include code-snippet/chart/accumulation-charts/pie-doughnut/sub-title/sub-title.cs %}
94123
{% endhighlight %}
95124
{% endtabs %}
96125
{% endif %}
97126

98127

99128

100-
## SubTitle Customization
129+
## SubTitle customization
101130

102131
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.
103132

@@ -107,8 +136,8 @@ Accumulation Chart can be customized a subtitle using [`SubTitleStyle`](https://
107136
{% highlight cshtml tabtitle="CSHTML" %}
108137
{% include code-snippet/chart/accumulation-charts/pie-doughnut/sub-title-cus/tagHelper %}
109138
{% endhighlight %}
110-
{% highlight c# tabtitle="Title.cs" %}
111-
{% include code-snippet/chart/accumulation-charts/pie-doughnut/sub-title-cus/title.cs %}
139+
{% highlight c# tabtitle="Sub-title-cus.cs" %}
140+
{% include code-snippet/chart/accumulation-charts/pie-doughnut/sub-title-cus/sub-title-cus.cs %}
112141
{% endhighlight %}
113142
{% endtabs %}
114143

@@ -118,8 +147,37 @@ Accumulation Chart can be customized a subtitle using [`SubTitleStyle`](https://
118147
{% highlight razor tabtitle="CSHTML" %}
119148
{% include code-snippet/chart/accumulation-charts/pie-doughnut/sub-title-cus/razor %}
120149
{% endhighlight %}
121-
{% highlight c# tabtitle="Title.cs" %}
122-
{% include code-snippet/chart/accumulation-charts/pie-doughnut/sub-title-cus/title.cs %}
150+
{% highlight c# tabtitle="Sub-title-cus.cs" %}
151+
{% include code-snippet/chart/accumulation-charts/pie-doughnut/sub-title-cus/sub-title-cus.cs %}
152+
{% endhighlight %}
153+
{% endtabs %}
154+
{% endif %}
155+
156+
157+
158+
### Position
159+
160+
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.
161+
162+
{% if page.publishingplatform == "aspnet-core" %}
163+
164+
{% tabs %}
165+
{% highlight cshtml tabtitle="CSHTML" %}
166+
{% include code-snippet/chart/accumulation-charts/pie-doughnut/title-position/tagHelper %}
167+
{% endhighlight %}
168+
{% highlight c# tabtitle="Title-position.cs" %}
169+
{% include code-snippet/chart/accumulation-charts/pie-doughnut/title-position/title-position.cs %}
170+
{% endhighlight %}
171+
{% endtabs %}
172+
173+
{% elsif page.publishingplatform == "aspnet-mvc" %}
174+
175+
{% tabs %}
176+
{% highlight razor tabtitle="CSHTML" %}
177+
{% include code-snippet/chart/accumulation-charts/pie-doughnut/title-position/razor %}
178+
{% endhighlight %}
179+
{% highlight c# tabtitle="Title-position.cs" %}
180+
{% include code-snippet/chart/accumulation-charts/pie-doughnut/title-position/title-position.cs %}
123181
{% endhighlight %}
124182
{% endtabs %}
125183
{% endif %}

‎ej2-asp-core-mvc/accumulation-chart/EJ2_ASP.NETCORE/funnel.md

Lines changed: 67 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ documentation: ug
99
---
1010

1111

12-
# Funnel Chart in ##Platform_Name## Accumulation Chart Component
12+
# Funnel chart in ##Platform_Name## Accumulation Chart Component
1313

1414
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`.
1515

@@ -77,7 +77,7 @@ public class FunnelChartData
7777

7878

7979

80-
## Neck Size
80+
## Neck size
8181

8282
The funnel's neck size can be customized by using the `neckWidth` and `neckHeight` properties.
8383

@@ -111,7 +111,7 @@ public class FunnelChartData
111111

112112

113113

114-
## Gap Between the Segments
114+
## Gap between the segments
115115

116116
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.
117117

@@ -179,7 +179,7 @@ public class FunnelChartData
179179

180180

181181

182-
## Smart Data Label
182+
## Smart data label
183183

184184
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.
185185

@@ -248,7 +248,69 @@ public class FunnelChartData
248248

249249

250250

251-
## See Also
251+
## Mode
252+
253+
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`.
254+
255+
### Standard
256+
257+
The `Standard` funnel mode follows the traditional funnel shape, with the width continuously narrowing down to a point at the bottom.
258+
259+
{% if page.publishingplatform == "aspnet-core" %}
260+
261+
{% tabs %}
262+
{% highlight cshtml tabtitle="CSHTML" %}
263+
{% include code-snippet/chart/accumulation-charts/funnel/mode-standard/tagHelper %}
264+
{% endhighlight %}
265+
{% highlight c# tabtitle="Mode-standard.cs" %}
266+
{% include code-snippet/chart/accumulation-charts/funnel/mode-standard/mode-standard.cs %}
267+
{% endhighlight %}
268+
{% endtabs %}
269+
270+
{% elsif page.publishingplatform == "aspnet-mvc" %}
271+
272+
{% tabs %}
273+
{% highlight razor tabtitle="CSHTML" %}
274+
{% include code-snippet/chart/accumulation-charts/funnel/mode-standard/razor %}
275+
{% endhighlight %}
276+
{% highlight c# tabtitle="Mode-standard.cs" %}
277+
{% include code-snippet/chart/accumulation-charts/funnel/mode-standard/mode-standard.cs %}
278+
{% endhighlight %}
279+
{% endtabs %}
280+
{% endif %}
281+
282+
283+
284+
### Trapezoidal
285+
286+
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.
287+
288+
{% if page.publishingplatform == "aspnet-core" %}
289+
290+
{% tabs %}
291+
{% highlight cshtml tabtitle="CSHTML" %}
292+
{% include code-snippet/chart/accumulation-charts/funnel/mode-trapezoidal/tagHelper %}
293+
{% endhighlight %}
294+
{% highlight c# tabtitle="Mode-trapezoidal.cs" %}
295+
{% include code-snippet/chart/accumulation-charts/funnel/mode-trapezoidal/mode-trapezoidal.cs %}
296+
{% endhighlight %}
297+
{% endtabs %}
298+
299+
{% elsif page.publishingplatform == "aspnet-mvc" %}
300+
301+
{% tabs %}
302+
{% highlight razor tabtitle="CSHTML" %}
303+
{% include code-snippet/chart/accumulation-charts/funnel/mode-trapezoidal/razor %}
304+
{% endhighlight %}
305+
{% highlight c# tabtitle="Mode-trapezoidal.cs" %}
306+
{% include code-snippet/chart/accumulation-charts/funnel/mode-trapezoidal/mode-trapezoidal.cs %}
307+
{% endhighlight %}
308+
{% endtabs %}
309+
{% endif %}
310+
311+
312+
313+
## See also
252314

253315
* [Data label](./data-label/)
254316
* [Grouping](./grouping/)

0 commit comments

Comments
 (0)