Skip to content

Commit cb9dda9

Browse files
SyncfusionBuildSyncfusionBuild
authored
Merge pull request #6162 from Syncfusion-Content/hotfix/hotfix-v29.2.4
DOCINFRA-2341_merged_using_automation
2 parents 4fda77e + 9806c3d commit cb9dda9

File tree

204 files changed

+6724
-321
lines changed

Some content is hidden

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

204 files changed

+6724
-321
lines changed

‎blazor-toc.html

Lines changed: 46 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -248,6 +248,16 @@
248248
<li>
249249
<a href="/blazor/common/state-persistance">State Persistence</a>
250250
</li>
251+
<li>AOT Compilation
252+
<ul>
253+
<li>
254+
<a href="/blazor/common/aot-compilation/optimize-performance-blazor-wasm">Optimize Blazor WASM Performance</a>
255+
</li>
256+
<li>
257+
<a href="/blazor/common/aot-compilation/reduce-size-of-blazor-wasm">Reduce Size of WASM</a>
258+
</li>
259+
</ul>
260+
</li>
251261
<li>
252262
<a href="/blazor/common/animation">Animation</a>
253263
</li>
@@ -587,6 +597,9 @@
587597
<li>
588598
<a href="/blazor/accumulation-chart/legend">Legend</a>
589599
</li>
600+
<li>
601+
<a href="/blazor/accumulation-chart/center-label">Center Label</a>
602+
</li>
590603
<li>
591604
<a href="/blazor/accumulation-chart/adaptive-layout">Adaptive Layout</a>
592605
</li>
@@ -2024,7 +2037,7 @@
20242037
<a href="/blazor/datagrid/how-to/server-side-using-cli">Getting Started-Server side using CLI</a>
20252038
</li>
20262039
<li>
2027-
<a href="/blazor/datagrid/how-to/sending-context-as-additional-parameters-from-events-in-blazor-datagrid">Sending context as additional parameters from events in Blazor DataGrid</a>
2040+
<a href="/blazor/datagrid/how-to/send-context-as-additional-parameters-from-events">Sending context as additional parameters from events in Blazor DataGrid</a>
20282041
</li>
20292042
<li>
20302043
<a href="/blazor/datagrid/how-to/using-dictionary-values-in-grid-datasource">Using dictionary values in Blazor DataGrid datasource</a>
@@ -2493,6 +2506,9 @@
24932506
</li>
24942507
</ul>
24952508
</li>
2509+
<li>
2510+
<a href="/blazor/diagram/uml-sequence-diagram/sequence-diagram">Uml Sequence Diagram</a>
2511+
</li>
24962512
<li>
24972513
<a href="/blazor/diagram/commands">Commands</a>
24982514
</li>
@@ -3727,6 +3743,7 @@
37273743
<li><a href="/blazor/pdfviewer-2/annotation/measurement-annotation">Measurement Annotations</a></li>
37283744
<li><a href="/blazor/pdfviewer-2/annotation/free-text-annotation">Free Text Annotations</a></li>
37293745
<li><a href="/blazor/pdfviewer-2/annotation/ink-annotation">Ink Annotation</a></li>
3746+
<li><a href="/blazor/pdfviewer-2/annotation/redaction-annotation">Redaction Annotations</a></li>
37303747
<li><a href="/blazor/pdfviewer-2/annotation/comments">Comments</a></li>
37313748
<li><a href="/blazor/pdfviewer-2/annotation/import-export-annotation">Import and Export Annotations</a></li>
37323749
<li><a href="/blazor/pdfviewer-2/annotation/annotations-in-mobile-view">Annotations in Mobile View</a></li>
@@ -4332,6 +4349,15 @@
43324349
</li>
43334350
<li><a href="/blazor/smart-paste/annotation">Annotation</a></li>
43344351
<li><a href="/blazor/smart-paste/customization">Style and Appearance</a></li>
4352+
<li><a href="/blazor/smart-paste/custom-inference-backend">Custom AI Service</a></li>
4353+
<li>AI Services
4354+
<ul>
4355+
<li> <a href="/blazor/smart-paste/claude-service">Claude AI Service</a></li>
4356+
<li> <a href="/blazor/smart-paste/gemini-service">Gemini AI Service</a></li>
4357+
<li> <a href="/blazor/smart-paste/deepseek-service">Deepseek AI Service</a></li>
4358+
<li> <a href="/blazor/smart-paste/groq-service">Groq AI Service</a></li>
4359+
</ul>
4360+
</li>
43354361
</ul>
43364362
</li>
43374363
<li>Smart TextArea
@@ -4346,6 +4372,15 @@
43464372
</li>
43474373
<li><a href="/blazor/smart-textarea/customization">Customize Suggestions</a></li>
43484374
<li><a href="/blazor/smart-textarea/features">Inherited Features</a></li>
4375+
<li><a href="/blazor/smart-textarea/custom-inference-backend">Custom AI Service</a></li>
4376+
<li>AI Services
4377+
<ul>
4378+
<li> <a href="/blazor/smart-textarea/claude-service">Claude AI Service</a></li>
4379+
<li> <a href="/blazor/smart-textarea/gemini-service">Gemini AI Service</a></li>
4380+
<li> <a href="/blazor/smart-textarea/deepseek-service">Deepseek AI Service</a></li>
4381+
<li> <a href="/blazor/smart-textarea/groq-service">Groq AI Service</a></li>
4382+
</ul>
4383+
</li>
43494384
</ul>
43504385
</li>
43514386
<li>Smith Chart
@@ -4509,6 +4544,16 @@
45094544
</li>
45104545
</ul>
45114546
</li>
4547+
<li>Spreadsheet
4548+
<ul>
4549+
<li>Getting Started
4550+
<ul>
4551+
<li><a href="/blazor/spreadsheet/getting-started-webapp">Blazor Web App</a></li>
4552+
<li><a href="/blazor/spreadsheet/getting-started">Blazor WASM App</a></li>
4553+
</ul>
4554+
</li>
4555+
</ul>
4556+
</li>
45124557
<li>Stepper
45134558
<ul>
45144559
<li>Getting Started

‎blazor/accumulation-chart/center-label.md

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
---
2+
layout: post
3+
title: Center Label in Blazor Accumulation Chart Component | Syncfusion
4+
description: Checkout and learn here all about Center Label in Syncfusion Blazor Accumulation Chart component and more.
5+
platform: Blazor
6+
control: Accumulation Chart
7+
documentation: ug
8+
---
9+
10+
# Center Label in Blazor Accumulation Chart Component
11+
12+
The center label feature allows you to place custom text in the middle of pie and donut charts using the `AccumulationChartCenterLabel`. This is especially useful for displaying the chart's title, percentage distribution, or other key metrics pertinent to the visualized data.
13+
14+
You can configure the text that appears in the center using the `Text` property within the `AccumulationChartCenterLabel`.
15+
16+
```cshtml
17+
@using Syncfusion.Blazor.Charts
18+
19+
<SfAccumulationChart>
20+
<AccumulationChartSeriesCollection>
21+
<AccumulationChartSeries DataSource="@DonutChartPoints" XName="Browser" YName="Users" InnerRadius="60%">
22+
</AccumulationChartSeries>
23+
</AccumulationChartSeriesCollection>
24+
<AccumulationChartCenterLabel Text="Mobile Browser<br>Statistics 2024">
25+
</AccumulationChartCenterLabel>
26+
<AccumulationChartLegendSettings Visible="false"></AccumulationChartLegendSettings>
27+
</SfAccumulationChart>
28+
29+
@code {
30+
public List<DonutData> DonutChartPoints { get; set; } = new List<DonutData>
31+
{
32+
new DonutData { Browser = "Chrome", Users = 63.5, DataLabelMappingName = "Chrome: 63.5%"},
33+
new DonutData { Browser = "Safari", Users = 25.0, DataLabelMappingName = "Safari: 25.0%"},
34+
new DonutData { Browser = "Samsung Internet", Users = 6.0, DataLabelMappingName = "Samsung Internet: 6.0%"},
35+
new DonutData { Browser = "UC Browser", Users = 2.5, DataLabelMappingName = "UC Browser: 2.5%"},
36+
new DonutData { Browser = "Opera", Users = 1.5, DataLabelMappingName = "Opera: 1.5%"},
37+
new DonutData { Browser = "Others", Users = 1.5, DataLabelMappingName = "Others: 1.5%"}
38+
};
39+
public class DonutData
40+
{
41+
public string Browser { get; set; }
42+
public double Users { get; set; }
43+
public string DataLabelMappingName { get; set; }
44+
}
45+
}
46+
```
47+
![Blazor Accumulation Chart with Center Label](./images/center-label/blazor-accumulation-chart-with-center-label.png)
48+
49+
## Hover Text
50+
51+
The center label text can be dynamically updated when hovering over pie or donut chart slices using the `HoverTextFormat` property. This interactive feature enhances user engagement by offering relevant information about specific segments during the exploration of the visualization.
52+
53+
N> Line breaks can be provided to texts in the `HoverTextFormat` property using the `<br>` tag.
54+
55+
```cshtml
56+
@using Syncfusion.Blazor.Charts
57+
58+
<SfAccumulationChart>
59+
<AccumulationChartSeriesCollection>
60+
<AccumulationChartSeries DataSource="@DonutChartPoints" XName="Browser" YName="Users" InnerRadius="60%">
61+
</AccumulationChartSeries>
62+
</AccumulationChartSeriesCollection>
63+
<AccumulationChartCenterLabel Text="Mobile Browser<br>Statistics 2024" HoverTextFormat="${point.x} <br> Browser Share <br> ${point.y}%">
64+
</AccumulationChartCenterLabel>
65+
<AccumulationChartLegendSettings Visible="false"></AccumulationChartLegendSettings>
66+
</SfAccumulationChart>
67+
68+
@code {
69+
public List<DonutData> DonutChartPoints { get; set; } = new List<DonutData>
70+
{
71+
new DonutData { Browser = "Chrome", Users = 63.5, DataLabelMappingName = "Chrome: 63.5%"},
72+
new DonutData { Browser = "Safari", Users = 25.0, DataLabelMappingName = "Safari: 25.0%"},
73+
new DonutData { Browser = "Samsung Internet", Users = 6.0, DataLabelMappingName = "Samsung Internet: 6.0%"},
74+
new DonutData { Browser = "UC Browser", Users = 2.5, DataLabelMappingName = "UC Browser: 2.5%"},
75+
new DonutData { Browser = "Opera", Users = 1.5, DataLabelMappingName = "Opera: 1.5%"},
76+
new DonutData { Browser = "Others", Users = 1.5, DataLabelMappingName = "Others: 1.5%"}
77+
};
78+
public class DonutData
79+
{
80+
public string Browser { get; set; }
81+
public double Users { get; set; }
82+
public string DataLabelMappingName { get; set; }
83+
}
84+
}
85+
```
86+
![Blazor Accumulation Chart with Center Label Dynamic Text](./images/center-label/blazor-accumulation-chart-with-center-label-hover-text.gif)
87+
88+
## Customization
89+
90+
The appearance of the center label can be customized by using the `AccumulationChartCenterLabelFont`, which allows you to modify font properties such as size, font-family, font-style, font-weight, and color to enhance the visual presentation of the text displayed in the center of the chart.
91+
92+
The position of the center label can be adjusted using the `XOffset` and `YOffset` properties in the `AccumulationChartCenterLabel`.
93+
94+
```cshtml
95+
@using Syncfusion.Blazor.Charts
96+
97+
<SfAccumulationChart>
98+
<AccumulationChartSeriesCollection>
99+
<AccumulationChartSeries DataSource="@DonutChartPoints" XName="Browser" YName="Users" InnerRadius="60%">
100+
</AccumulationChartSeries>
101+
</AccumulationChartSeriesCollection>
102+
<AccumulationChartCenterLabel Text="Mobile Browser<br>Statistics 2024">
103+
<AccumulationChartCenterLabelFont Size="15px" FontWeight="600" FontFamily="Roboto" fontStyle="Italic" Color="Blue" ></AccumulationChartCenterLabelFont>
104+
</AccumulationChartCenterLabel>
105+
<AccumulationChartLegendSettings Visible="false"></AccumulationChartLegendSettings>
106+
</SfAccumulationChart>
107+
108+
@code {
109+
public List<DonutData> DonutChartPoints { get; set; } = new List<DonutData>
110+
{
111+
new DonutData { Browser = "Chrome", Users = 63.5, DataLabelMappingName = "Chrome: 63.5%"},
112+
new DonutData { Browser = "Safari", Users = 25.0, DataLabelMappingName = "Safari: 25.0%"},
113+
new DonutData { Browser = "Samsung Internet", Users = 6.0, DataLabelMappingName = "Samsung Internet: 6.0%"},
114+
new DonutData { Browser = "UC Browser", Users = 2.5, DataLabelMappingName = "UC Browser: 2.5%"},
115+
new DonutData { Browser = "Opera", Users = 1.5, DataLabelMappingName = "Opera: 1.5%"},
116+
new DonutData { Browser = "Others", Users = 1.5, DataLabelMappingName = "Others: 1.5%"}
117+
};
118+
public class DonutData
119+
{
120+
public string Browser { get; set; }
121+
public double Users { get; set; }
122+
public string DataLabelMappingName { get; set; }
123+
}
124+
}
125+
```
126+
![Blazor Accumulation Chart with Center Label Customization](./images/center-label/blazor-accumulation-chart-with-center-label-customization.png)
127+
128+
N> Refer to the [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for its groundbreaking feature representations and also explore the [Blazor Accumulation Chart Example](https://blazor.syncfusion.com/demos/chart/pie?theme=bootstrap5) to know about the various features of accumulation charts and how it is used to represent numeric proportional data.
129+
130+
## See also
131+
132+
* [Data Label](./data-labels)
133+
* [Title and Subtitle](./title-and-sub-title)
134+
* [Annotation](./annotation)

‎blazor/accumulation-chart/chart-types/funnel.md

Lines changed: 40 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -262,12 +262,51 @@ Labels will be arranged automatically on the left side of the funnel and pyramid
262262
new Statistics { Country = "Germany", Users = 82114224 },
263263
};
264264
}
265-
266265
```
267266

268267
![Blazor Funnel Chart with Smart Data Label](../images/funnel/blazor-funnel-chart-smart-data-label.png)
269268
{% previewsample "https://blazorplayground.syncfusion.com/embed/hjVKWrCqppsLzynA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
270269

270+
## Border radius
271+
272+
The corners of the first data point and last data point in the funnel chart series can be rounded using the `BorderRadius` property within the [AccumulationChartSeries](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartSeries.html).
273+
274+
```cshtml
275+
@using Syncfusion.Blazor.Charts
276+
277+
<SfAccumulationChart Title="Recruitment Process" EnableAnimation="false" >
278+
<AccumulationChartLegendSettings Visible="false"></AccumulationChartLegendSettings>
279+
<AccumulationChartSeriesCollection>
280+
<AccumulationChartSeries DataSource="@FunnelChartPoints" XName="InterviewProcess" YName="Candidates" BorderRadius="8"
281+
Type="AccumulationType.Funnel" Height="80%" Width="40%">
282+
<AccumulationDataLabelSettings Visible="true" Name="DataLabelMappingName" Position="AccumulationLabelPosition.Inside">
283+
<AccumulationChartDataLabelFont FontWeight="600"></AccumulationChartDataLabelFont>
284+
</AccumulationDataLabelSettings>
285+
</AccumulationChartSeries>
286+
</AccumulationChartSeriesCollection>
287+
</SfAccumulationChart>
288+
289+
@code {
290+
public List<FunnelData> FunnelChartPoints { get; set; } = new List<FunnelData>
291+
{
292+
new FunnelData { InterviewProcess = "Hired", Candidates = 55, DataLabelMappingName="Hired: 55"},
293+
new FunnelData { InterviewProcess = "Personal Interview", Candidates = 58, DataLabelMappingName="Personal Interview: 58"},
294+
new FunnelData { InterviewProcess = "Telephonic Interview", Candidates = 85, DataLabelMappingName="Telephonic Interview: 85"},
295+
new FunnelData { InterviewProcess = "Screening", Candidates = 105, DataLabelMappingName="Screening: 105"},
296+
new FunnelData { InterviewProcess = "Initial Validation", Candidates = 145, DataLabelMappingName="Initial Validation: 145"},
297+
new FunnelData { InterviewProcess = "Candidates Applied", Candidates = 250, DataLabelMappingName="Candidates Applied: 250"},
298+
};
299+
300+
public class FunnelData
301+
{
302+
public string InterviewProcess { get; set; }
303+
public double Candidates { get; set; }
304+
public string DataLabelMappingName { get; set; }
305+
}
306+
}
307+
```
308+
![Blazor Funnel Chart with border radius applied.](../images/funnel/blazor-funnel-border-radius.png)
309+
271310
N> Refer to the [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for its groundbreaking feature representations and also explore the [Blazor Accumulation Chart Example](https://blazor.syncfusion.com/demos/chart/funnel?theme=bootstrap5) to know various features of accumulation charts and how it is used to represent numeric proportional data.
272311

273312
## See also

‎blazor/accumulation-chart/chart-types/pie-doughnut.md

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -304,6 +304,40 @@ The [StartAngle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.
304304
![Blazor Pie Chart with Color and Text Mapping](../images/pie-dough-nut/blazor-pie-chart-text-mapping.png)
305305
{% previewsample "https://blazorplayground.syncfusion.com/embed/VNrUCrWqTiZCBNJq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
306306

307+
## Border radius
308+
309+
The corners of all the slices in the pie/donut chart series can be rounded using the `BorderRadius` property within the [AccumulationChartSeries](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartSeries.html).
310+
311+
```cshtml
312+
@using Syncfusion.Blazor.Charts
313+
314+
<SfAccumulationChart Title="Pie Chart with Border Radius">
315+
<AccumulationChartSeriesCollection>
316+
<AccumulationChartSeries DataSource="@DonutChartPoints" XName="Food" YName="Amount" InnerRadius="40%" BorderRadius="8">
317+
</AccumulationChartSeries>
318+
</AccumulationChartSeriesCollection>
319+
<AccumulationChartLegendSettings Visible="false"></AccumulationChartLegendSettings>
320+
</SfAccumulationChart>
321+
322+
@code {
323+
public List<DonutData> DonutChartPoints { get; set; } = new List<DonutData>
324+
{
325+
new DonutData { Food = "Milk", Amount = 10, DataLabelMappingName = "Milk: 10%"},
326+
new DonutData { Food = "Rice", Amount = 30, DataLabelMappingName = "Rice: 30%"},
327+
new DonutData { Food = "Cereals", Amount = 20, DataLabelMappingName = "Cereals: 20%"},
328+
new DonutData { Food = "Water", Amount = 15, DataLabelMappingName = "Water: 15%"},
329+
new DonutData { Food = "Vegetables", Amount = 25, DataLabelMappingName = "Vegetables: 25%"},
330+
};
331+
public class DonutData
332+
{
333+
public string Food { get; set; }
334+
public double Amount { get; set; }
335+
public string DataLabelMappingName { get; set; }
336+
}
337+
}
338+
```
339+
![Blazor Pie Chart with border radius applied.](../images/pie-dough-nut/blazor-pie-chart-border-radius.png)
340+
307341
## Hide pie or doughnut border
308342

309343
When the mouse hovers over the pie/doughnut chart, the border appears by default. The border can be turned off by setting the [EnableBorderOnMouseMove](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfAccumulationChart.html#Syncfusion_Blazor_Charts_SfAccumulationChart_EnableBorderOnMouseMove) property to **false**.

‎blazor/accumulation-chart/chart-types/pyramid.md

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -213,6 +213,44 @@ By setting the [Explode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor
213213
![Explode in Blazor Pyramid Chart](../images/pyramid/blazor-pyramid-chart-explode.png)
214214
{% previewsample "https://blazorplayground.syncfusion.com/embed/BthAMBMATgJWwkNT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
215215

216+
## Border radius
217+
218+
The corners of the first data point and last data point in the pyramid chart series can be rounded using the `BorderRadius` property within the [AccumulationChartSeries](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartSeries.html).
219+
220+
```cshtml
221+
@using Syncfusion.Blazor.Charts
222+
223+
<SfAccumulationChart Title="Food Consumption Pyramid">
224+
<AccumulationChartLegendSettings Visible="false">
225+
</AccumulationChartLegendSettings>
226+
<AccumulationChartSeriesCollection>
227+
<AccumulationChartSeries DataSource="@PyramidChartPoints" XName="Foods" YName="Percentage" Type="AccumulationType.Pyramid" Width="45%" Height="80%" BorderRadius="8">
228+
<AccumulationDataLabelSettings Visible="true" Position="AccumulationLabelPosition.Outside" Name="DataLabelMappingName">
229+
</AccumulationDataLabelSettings>
230+
</AccumulationChartSeries>
231+
</AccumulationChartSeriesCollection>
232+
</SfAccumulationChart>
233+
234+
@code {
235+
public List<PyramidData> PyramidChartPoints { get; set; } = new List<PyramidData>
236+
{
237+
new PyramidData { Foods = "Oils", Percentage = 2, DataLabelMappingName = "Oils: 2%" },
238+
new PyramidData { Foods = "Nuts", Percentage = 10, DataLabelMappingName = "Nuts: 10%" },
239+
new PyramidData { Foods = "Fruits", Percentage = 15, DataLabelMappingName = "Fruits: 15%" },
240+
new PyramidData { Foods = "Dairy", Percentage = 23, DataLabelMappingName = "Dairy: 23%" },
241+
new PyramidData { Foods = "Vegetables", Percentage = 23, DataLabelMappingName = "Vegetables: 23%" },
242+
new PyramidData { Foods = "Grains", Percentage = 27, DataLabelMappingName = "Grains: 27%"}
243+
};
244+
public class PyramidData
245+
{
246+
public string Foods { get; set; }
247+
public double Percentage { get; set; }
248+
public string DataLabelMappingName { get; set; }
249+
}
250+
}
251+
```
252+
![Blazor Pyramid Chart with border radius applied.](../images/pyramid/blazor-pyramid-border-radius.png)
253+
216254
N> Refer to our [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for its groundbreaking feature representations and also explore our [Blazor Accumulation Chart Example](https://blazor.syncfusion.com/demos/chart/pyramid?theme=bootstrap5) to know various features of accumulation charts and how it is used to represent numeric proportional data.
217255

218256
## See also

‎blazor/accumulation-chart/images/center-label/blazor-accumulation-chart-with-center-label-customization.png

25.5 KB
Loading

‎blazor/accumulation-chart/images/center-label/blazor-accumulation-chart-with-center-label-hover-text.gif

234 KB
Loading

‎blazor/accumulation-chart/images/center-label/blazor-accumulation-chart-with-center-label.png

25.7 KB
Loading

‎blazor/accumulation-chart/images/funnel/blazor-funnel-border-radius.png

17.8 KB
Loading

‎blazor/accumulation-chart/images/pie-dough-nut/blazor-pie-chart-border-radius.png

15.3 KB
Loading

‎blazor/accumulation-chart/images/pyramid/blazor-pyramid-border-radius.png

18.1 KB
Loading

0 commit comments

Comments
 (0)