Skip to content

Commit 0abc050

Browse files
karthickraja245karthickraja245
authored
Merge branch 'hotfix/hotfix-v25.1.35' into EJ2-53702-HOT1
2 parents 892894a + ce5b996 commit 0abc050

File tree

264 files changed

+6189
-47
lines changed

Some content is hidden

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

264 files changed

+6189
-47
lines changed

‎ej2-asp-core-mvc/circular-chart-3d/EJ2_ASP.MVC/data-label.md

Lines changed: 314 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,314 @@
1+
---
2+
layout: post
3+
title: Data Label in Syncfusion ##Platform_Name## 3D Circular Chart Component
4+
description: Learn here all about data label in Syncfusion ##Platform_Name## 3D Circular Chart component of Syncfusion Essential JS 2 and more.
5+
platform: ej2-asp-core-mvc
6+
control: Data Label
7+
publishingplatform: ##Platform_Name##
8+
documentation: ug
9+
---
10+
11+
12+
# Data Label in ##Platform_Name## 3D Circular Chart Component
13+
14+
A data label refers to a label associated with specific data points. It can be added to a 3D Circular Chart series by enabling the `Visible` option in the `DataLabel` property. By default, the labels will arrange themselves smartly to avoid overlapping.
15+
16+
{% if page.publishingplatform == "aspnet-core" %}
17+
18+
{% tabs %}
19+
{% highlight cshtml tabtitle="CSHTML" %}
20+
{% include code-snippet/circular-chart/datalabel/datalabel/tagHelper %}
21+
{% endhighlight %}
22+
{% highlight c# tabtitle="Datalabel.cs" %}
23+
{% include code-snippet/circular-chart/datalabel/datalabel/datalabel.cs %}
24+
{% endhighlight %}
25+
{% endtabs %}
26+
27+
{% elsif page.publishingplatform == "aspnet-mvc" %}
28+
29+
{% tabs %}
30+
{% highlight razor tabtitle="CSHTML" %}
31+
{% include code-snippet/circular-chart/datalabel/datalabel/razor %}
32+
{% endhighlight %}
33+
{% highlight c# tabtitle="Datalabel.cs" %}
34+
{% include code-snippet/circular-chart/datalabel/datalabel/datalabel.cs %}
35+
{% endhighlight %}
36+
{% endtabs %}
37+
{% endif %}
38+
39+
## Positioning
40+
41+
Using the `Position` property, we can place the data label either `Inside` or `Outside` the 3D Circular Chart.
42+
43+
{% if page.publishingplatform == "aspnet-core" %}
44+
45+
{% tabs %}
46+
{% highlight cshtml tabtitle="CSHTML" %}
47+
{% include code-snippet/circular-chart/datalabel/position/tagHelper %}
48+
{% endhighlight %}
49+
{% highlight c# tabtitle="Position.cs" %}
50+
{% include code-snippet/circular-chart/datalabel/position/position.cs %}
51+
{% endhighlight %}
52+
{% endtabs %}
53+
54+
{% elsif page.publishingplatform == "aspnet-mvc" %}
55+
56+
{% tabs %}
57+
{% highlight razor tabtitle="CSHTML" %}
58+
{% include code-snippet/circular-chart/datalabel/position/razor %}
59+
{% endhighlight %}
60+
{% highlight c# tabtitle="Position.cs" %}
61+
{% include code-snippet/circular-chart/datalabel/position/position.cs %}
62+
{% endhighlight %}
63+
{% endtabs %}
64+
{% endif %}
65+
66+
## Data label template
67+
68+
The label content can be formatted using the template option. Inside the template, placeholder text `${point.x}` and `${point.y` can be added to display the corresponding data point's x & y value. The data label template can be set using the `Template` property.
69+
70+
{% if page.publishingplatform == "aspnet-core" %}
71+
72+
{% tabs %}
73+
{% highlight cshtml tabtitle="CSHTML" %}
74+
{% include code-snippet/circular-chart/datalabel/template/tagHelper %}
75+
{% endhighlight %}
76+
{% highlight c# tabtitle="Template.cs" %}
77+
{% include code-snippet/circular-chart/datalabel/template/template.cs %}
78+
{% endhighlight %}
79+
{% endtabs %}
80+
81+
{% elsif page.publishingplatform == "aspnet-mvc" %}
82+
83+
{% tabs %}
84+
{% highlight razor tabtitle="CSHTML" %}
85+
{% include code-snippet/circular-chart/datalabel/template/razor %}
86+
{% endhighlight %}
87+
{% highlight c# tabtitle="Template.cs" %}
88+
{% include code-snippet/circular-chart/datalabel/template/template.cs %}
89+
{% endhighlight %}
90+
{% endtabs %}
91+
{% endif %}
92+
93+
## Connector line
94+
95+
The connector line will be visible when the data label is placed `Outside` the chart. It can be customized using properties such as `Color`, `Width`, `Length`, and `DashArray` within the `ConnectorStyle` property.
96+
97+
{% if page.publishingplatform == "aspnet-core" %}
98+
99+
{% tabs %}
100+
{% highlight cshtml tabtitle="CSHTML" %}
101+
{% include code-snippet/circular-chart/datalabel/connector-line/tagHelper %}
102+
{% endhighlight %}
103+
{% highlight c# tabtitle="Connector-line.cs" %}
104+
{% include code-snippet/circular-chart/datalabel/connector-line/connector-line.cs %}
105+
{% endhighlight %}
106+
{% endtabs %}
107+
108+
{% elsif page.publishingplatform == "aspnet-mvc" %}
109+
110+
{% tabs %}
111+
{% highlight razor tabtitle="CSHTML" %}
112+
{% include code-snippet/circular-chart/datalabel/connector-line/razor %}
113+
{% endhighlight %}
114+
{% highlight c# tabtitle="Connector-line.cs" %}
115+
{% include code-snippet/circular-chart/datalabel/connector-line/connector-line.cs %}
116+
{% endhighlight %}
117+
{% endtabs %}
118+
{% endif %}
119+
120+
121+
## Text mapping
122+
123+
Text from the data source can be mapped using the `Name` property within the data label.
124+
125+
{% if page.publishingplatform == "aspnet-core" %}
126+
127+
{% tabs %}
128+
{% highlight cshtml tabtitle="CSHTML" %}
129+
{% include code-snippet/circular-chart/datalabel/text-mapping/tagHelper %}
130+
{% endhighlight %}
131+
{% highlight c# tabtitle="Text-mapping.cs" %}
132+
{% include code-snippet/circular-chart/datalabel/text-mapping/text-mapping.cs %}
133+
{% endhighlight %}
134+
{% endtabs %}
135+
136+
{% elsif page.publishingplatform == "aspnet-mvc" %}
137+
138+
{% tabs %}
139+
{% highlight razor tabtitle="CSHTML" %}
140+
{% include code-snippet/circular-chart/datalabel/text-mapping/razor %}
141+
{% endhighlight %}
142+
{% highlight c# tabtitle="Text-mapping.cs" %}
143+
{% include code-snippet/circular-chart/datalabel/text-mapping/text-mapping.cs %}
144+
{% endhighlight %}
145+
{% endtabs %}
146+
{% endif %}
147+
148+
149+
## Format
150+
151+
The data label for the 3D Circular Chart can be formatted using the `Format` property. You can utilize global formatting options such as 'n', 'p', and 'c'.
152+
153+
{% if page.publishingplatform == "aspnet-core" %}
154+
155+
{% tabs %}
156+
{% highlight cshtml tabtitle="CSHTML" %}
157+
{% include code-snippet/circular-chart/datalabel/format/tagHelper %}
158+
{% endhighlight %}
159+
{% highlight c# tabtitle="Format.cs" %}
160+
{% include code-snippet/circular-chart/datalabel/format/format.cs %}
161+
{% endhighlight %}
162+
{% endtabs %}
163+
164+
{% elsif page.publishingplatform == "aspnet-mvc" %}
165+
166+
{% tabs %}
167+
{% highlight razor tabtitle="CSHTML" %}
168+
{% include code-snippet/circular-chart/datalabel/format/razor %}
169+
{% endhighlight %}
170+
{% highlight c# tabtitle="Format.cs" %}
171+
{% include code-snippet/circular-chart/datalabel/format/format.cs %}
172+
{% endhighlight %}
173+
{% endtabs %}
174+
{% endif %}
175+
176+
<table>
177+
<tr>
178+
<th>Value</th>
179+
<th>Format</th>
180+
<th>Resultant Value</th>
181+
<th>Description</th>
182+
</tr>
183+
<tr>
184+
<td>1000</td>
185+
<td>n1</td>
186+
<td>1000.0</td>
187+
<td>The number is rounded to 1 decimal place.</td>
188+
</tr>
189+
<tr>
190+
<td>1000</td>
191+
<td>n2</td>
192+
<td>1000.00</td>
193+
<td>The number is rounded to 2 decimal places.</td>
194+
</tr>
195+
<tr>
196+
<td>1000</td>
197+
<td>n3</td>
198+
<td>1000.000</td>
199+
<td>The number is rounded to 3 decimal place.</td>
200+
</tr>
201+
<tr>
202+
<td>0.01</td>
203+
<td>p1</td>
204+
<td>1.0%</td>
205+
<td>The number is converted to percentage with 1 decimal place.</td>
206+
</tr>
207+
<tr>
208+
<td>0.01</td>
209+
<td>p2</td>
210+
<td>1.00%</td>
211+
<td>The number is converted to percentage with 2 decimal place.</td>
212+
</tr>
213+
<tr>
214+
<td>0.01</td>
215+
<td>p3</td>
216+
<td>1.000%</td>
217+
<td>The number is converted to percentage with 3 decimal place.</td>
218+
</tr>
219+
<tr>
220+
<td>1000</td>
221+
<td>c1</td>
222+
<td>$1000.0</td>
223+
<td>The currency symbol is appended to number and number is rounded to 1 decimal place.</td>
224+
</tr>
225+
<tr>
226+
<td>1000</td>
227+
<td>c2</td>
228+
<td>$1000.00</td>
229+
<td>The currency symbol is appended to number and number is rounded to 2 decimal place.</td>
230+
</tr>
231+
</table>
232+
233+
## Customization
234+
235+
Individual text for the data points in the 3D Circular Chart can be customized using the `TextRender` event.
236+
237+
{% if page.publishingplatform == "aspnet-core" %}
238+
239+
{% tabs %}
240+
{% highlight cshtml tabtitle="CSHTML" %}
241+
{% include code-snippet/circular-chart/datalabel/custom/tagHelper %}
242+
{% endhighlight %}
243+
{% highlight c# tabtitle="Custom.cs" %}
244+
{% include code-snippet/circular-chart/datalabel/custom/custom.cs %}
245+
{% endhighlight %}
246+
{% endtabs %}
247+
248+
{% elsif page.publishingplatform == "aspnet-mvc" %}
249+
250+
{% tabs %}
251+
{% highlight razor tabtitle="CSHTML" %}
252+
{% include code-snippet/circular-chart/datalabel/custom/razor %}
253+
{% endhighlight %}
254+
{% highlight c# tabtitle="Custom.cs" %}
255+
{% include code-snippet/circular-chart/datalabel/custom/custom.cs %}
256+
{% endhighlight %}
257+
{% endtabs %}
258+
{% endif %}
259+
260+
## Using textRender event
261+
262+
You can customize the data label of a pie chart using the `TextRender` event as follows to show the percentage.
263+
264+
{% if page.publishingplatform == "aspnet-core" %}
265+
266+
{% tabs %}
267+
{% highlight cshtml tabtitle="CSHTML" %}
268+
{% include code-snippet/circular-chart/datalabel/text-render/tagHelper %}
269+
{% endhighlight %}
270+
{% highlight c# tabtitle="Text-render.cs" %}
271+
{% include code-snippet/circular-chart/datalabel/text-render/text-render.cs %}
272+
{% endhighlight %}
273+
{% endtabs %}
274+
275+
{% elsif page.publishingplatform == "aspnet-mvc" %}
276+
277+
{% tabs %}
278+
{% highlight razor tabtitle="CSHTML" %}
279+
{% include code-snippet/circular-chart/datalabel/text-render/razor %}
280+
{% endhighlight %}
281+
{% highlight c# tabtitle="Text-render.cs" %}
282+
{% include code-snippet/circular-chart/datalabel/text-render/text-render.cs %}
283+
{% endhighlight %}
284+
{% endtabs %}
285+
{% endif %}
286+
287+
## Using template
288+
289+
You can display the percentage values in the data label of a pie chart using the `Template` option.
290+
291+
{% if page.publishingplatform == "aspnet-core" %}
292+
293+
{% tabs %}
294+
{% highlight cshtml tabtitle="CSHTML" %}
295+
{% include code-snippet/circular-chart/datalabel/percentage/tagHelper %}
296+
{% endhighlight %}
297+
{% highlight c# tabtitle="Percentage.cs" %}
298+
{% include code-snippet/circular-chart/datalabel/percentage/percentage.cs %}
299+
{% endhighlight %}
300+
{% endtabs %}
301+
302+
{% elsif page.publishingplatform == "aspnet-mvc" %}
303+
304+
{% tabs %}
305+
{% highlight razor tabtitle="CSHTML" %}
306+
{% include code-snippet/circular-chart/datalabel/percentage/razor %}
307+
{% endhighlight %}
308+
{% highlight c# tabtitle="Percentage.cs" %}
309+
{% include code-snippet/circular-chart/datalabel/percentage/percentage.cs %}
310+
{% endhighlight %}
311+
{% endtabs %}
312+
{% endif %}
313+
314+

‎ej2-asp-core-mvc/circular-chart-3d/EJ2_ASP.MVC/empty-points.md

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
---
2+
layout: post
3+
title: Empty points in ##Platform_Name## Syncfusion 3D Circular Chart Component
4+
description: Learn here all about empty points in Syncfusion ##Platform_Name## 3D Circular Chart component of Syncfusion Essential JS 2 and more.
5+
platform: ej2-asp-core-mvc
6+
control: Empty points
7+
publishingplatform: ##Platform_Name##
8+
documentation: ug
9+
---
10+
11+
12+
# Empty points in ##Platform_Name## 3D Circular Chart Component
13+
14+
Data points containing `null` or `undefined` values are considered empty points. These empty data points are ignored and not plotted in the 3D Circular Chart. You can customize the handling of empty points using the `EmptyPointSettings` property in the series. The default mode for empty points is `Gap`. Other supported modes include `Average`, `Drop`, and `Zero`.
15+
16+
{% if page.publishingplatform == "aspnet-core" %}
17+
18+
{% tabs %}
19+
{% highlight cshtml tabtitle="CSHTML" %}
20+
{% include code-snippet/circular-chart/pie-donut/empty-points/tagHelper %}
21+
{% endhighlight %}
22+
{% highlight c# tabtitle="Empty-points.cs" %}
23+
{% include code-snippet/circular-chart/pie-donut/empty-points/empty-points.cs %}
24+
{% endhighlight %}
25+
{% endtabs %}
26+
27+
{% elsif page.publishingplatform == "aspnet-mvc" %}
28+
29+
{% tabs %}
30+
{% highlight razor tabtitle="CSHTML" %}
31+
{% include code-snippet/circular-chart/pie-donut/empty-points/razor %}
32+
{% endhighlight %}
33+
{% highlight c# tabtitle="Empty-points.cs" %}
34+
{% include code-snippet/circular-chart/pie-donut/empty-points/empty-points.cs %}
35+
{% endhighlight %}
36+
{% endtabs %}
37+
{% endif %}
38+
39+
40+
41+
## Customization
42+
43+
A specific color for an empty point can be set by using the `Fill` property in `EmptyPointSettings`.
44+
45+
{% if page.publishingplatform == "aspnet-core" %}
46+
47+
{% tabs %}
48+
{% highlight cshtml tabtitle="CSHTML" %}
49+
{% include code-snippet/circular-chart/pie-donut/empty-point-custom/tagHelper %}
50+
{% endhighlight %}
51+
{% highlight c# tabtitle="Empty-point-custom.cs" %}
52+
{% include code-snippet/circular-chart/pie-donut/empty-point-custom/empty-point-custom.cs %}
53+
{% endhighlight %}
54+
{% endtabs %}
55+
56+
{% elsif page.publishingplatform == "aspnet-mvc" %}
57+
58+
{% tabs %}
59+
{% highlight razor tabtitle="CSHTML" %}
60+
{% include code-snippet/circular-chart/pie-donut/empty-point-custom/razor %}
61+
{% endhighlight %}
62+
{% highlight c# tabtitle="Empty-point-custom.cs" %}
63+
{% include code-snippet/circular-chart/pie-donut/empty-point-custom/empty-point-custom.cs %}
64+
{% endhighlight %}
65+
{% endtabs %}
66+
{% endif %}
67+

‎ej2-asp-core-mvc/circular-chart-3d/EJ2_ASP.MVC/getting-started.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
layout: post
33
title: Getting Started with ##Platform_Name## 3D Circular Chart Control | Syncfusion
4-
description: Checkout and learn about getting started with ##Platform_Name## 3D Circular Chart control of Syncfusion Essential JS 2 and more details.
4+
description: Checkout and learn about getting started with Syncfusion ##Platform_Name## 3D Circular Chart control of Syncfusion Essential JS 2 and more details.
55
platform: ej2-asp-core-mvc
66
control: Getting Started
77
publishingplatform: ##Platform_Name##

0 commit comments

Comments
 (0)