DOCINFRA-2341_merged_using_automation

blazor-toc.html

@@ -248,6 +248,16 @@
 			<li>
 				<a href="/blazor/common/state-persistance">State Persistence</a>
 			</li>
+			<li>AOT Compilation
+				<ul>
+					<li>
+                       <a href="/blazor/common/aot-compilation/optimize-performance-blazor-wasm">Optimize Blazor WASM Performance</a>
+					</li>
+					<li>
+                        <a href="/blazor/common/aot-compilation/reduce-size-of-blazor-wasm">Reduce Size of WASM</a>
+					</li>
+				</ul>
+			</li>
 			<li>
 				<a href="/blazor/common/animation">Animation</a>
 			</li>
@@ -587,6 +597,9 @@
 			<li>
 				<a href="/blazor/accumulation-chart/legend">Legend</a>
 			</li>
+			<li>
+				<a href="/blazor/accumulation-chart/center-label">Center Label</a>
+			</li>
 			<li>
 				<a href="/blazor/accumulation-chart/adaptive-layout">Adaptive Layout</a>
 			</li>
@@ -2024,7 +2037,7 @@
 						<a href="/blazor/datagrid/how-to/server-side-using-cli">Getting Started-Server side using CLI</a>
 					</li>
           <li>
-						<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>
+						<a href="/blazor/datagrid/how-to/send-context-as-additional-parameters-from-events">Sending context as additional parameters from events in Blazor DataGrid</a>
 					</li>
 					<li>
 						<a href="/blazor/datagrid/how-to/using-dictionary-values-in-grid-datasource">Using dictionary values in Blazor DataGrid datasource</a>
@@ -2493,6 +2506,9 @@
 					</li>
 				</ul>
 			</li>
+			<li>
+				<a href="/blazor/diagram/uml-sequence-diagram/sequence-diagram">Uml Sequence Diagram</a>
+			</li>
 			<li>
 				<a href="/blazor/diagram/commands">Commands</a>
 			</li>
@@ -3727,6 +3743,7 @@
 					<li><a href="/blazor/pdfviewer-2/annotation/measurement-annotation">Measurement Annotations</a></li>
 					<li><a href="/blazor/pdfviewer-2/annotation/free-text-annotation">Free Text Annotations</a></li>
 					<li><a href="/blazor/pdfviewer-2/annotation/ink-annotation">Ink Annotation</a></li>
+					<li><a href="/blazor/pdfviewer-2/annotation/redaction-annotation">Redaction Annotations</a></li>
 					<li><a href="/blazor/pdfviewer-2/annotation/comments">Comments</a></li>
 					<li><a href="/blazor/pdfviewer-2/annotation/import-export-annotation">Import and Export Annotations</a></li>
 					<li><a href="/blazor/pdfviewer-2/annotation/annotations-in-mobile-view">Annotations in Mobile View</a></li>
@@ -4332,6 +4349,15 @@
 			</li>
 			<li><a href="/blazor/smart-paste/annotation">Annotation</a></li>
 			<li><a href="/blazor/smart-paste/customization">Style and Appearance</a></li>
+			<li><a href="/blazor/smart-paste/custom-inference-backend">Custom AI Service</a></li>
+			<li>AI Services
+				<ul>
+					<li> <a href="/blazor/smart-paste/claude-service">Claude AI Service</a></li>
+					<li> <a href="/blazor/smart-paste/gemini-service">Gemini AI Service</a></li>
+					<li> <a href="/blazor/smart-paste/deepseek-service">Deepseek AI Service</a></li>
+					<li> <a href="/blazor/smart-paste/groq-service">Groq AI Service</a></li>
+				</ul>
+			</li>
 		</ul>
 	</li>
 	<li>Smart TextArea
@@ -4346,6 +4372,15 @@
 			</li>
 			<li><a href="/blazor/smart-textarea/customization">Customize Suggestions</a></li>
 			<li><a href="/blazor/smart-textarea/features">Inherited Features</a></li>
+			<li><a href="/blazor/smart-textarea/custom-inference-backend">Custom AI Service</a></li>
+			<li>AI Services
+				<ul>
+					<li> <a href="/blazor/smart-textarea/claude-service">Claude AI Service</a></li>
+					<li> <a href="/blazor/smart-textarea/gemini-service">Gemini AI Service</a></li>
+					<li> <a href="/blazor/smart-textarea/deepseek-service">Deepseek AI Service</a></li>
+					<li> <a href="/blazor/smart-textarea/groq-service">Groq AI Service</a></li>
+				</ul>
+			</li>
 		</ul>
 	</li>
 	<li>Smith Chart
@@ -4509,6 +4544,16 @@
 			</li>
 		</ul>
 	</li>
+	<li>Spreadsheet
+		<ul>
+			<li>Getting Started
+				<ul>
+					<li><a href="/blazor/spreadsheet/getting-started-webapp">Blazor Web App</a></li>
+					<li><a href="/blazor/spreadsheet/getting-started">Blazor WASM App</a></li>
+				</ul>
+			</li>
+		</ul>
+	</li>
 	<li>Stepper
 		<ul>
 			<li>Getting Started

blazor/accumulation-chart/center-label.md

@@ -0,0 +1,134 @@
+---
+layout: post
+title: Center Label in Blazor Accumulation Chart Component | Syncfusion
+description: Checkout and learn here all about Center Label in Syncfusion Blazor Accumulation Chart component and more.
+platform: Blazor
+control: Accumulation Chart
+documentation: ug
+---
+
+# Center Label in Blazor Accumulation Chart Component
+
+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.
+
+You can configure the text that appears in the center using the `Text` property within the `AccumulationChartCenterLabel`.
+
+```cshtml
+@using Syncfusion.Blazor.Charts
+
+<SfAccumulationChart>
+    <AccumulationChartSeriesCollection>
+        <AccumulationChartSeries DataSource="@DonutChartPoints" XName="Browser" YName="Users" InnerRadius="60%">
+        </AccumulationChartSeries>
+    </AccumulationChartSeriesCollection>
+    <AccumulationChartCenterLabel Text="Mobile Browser<br>Statistics 2024">
+    </AccumulationChartCenterLabel>
+    <AccumulationChartLegendSettings Visible="false"></AccumulationChartLegendSettings>
+</SfAccumulationChart>
+
+@code {
+    public List<DonutData> DonutChartPoints { get; set; } = new List<DonutData>
+    {
+        new DonutData { Browser = "Chrome", Users = 63.5, DataLabelMappingName = "Chrome: 63.5%"},
+        new DonutData { Browser = "Safari", Users = 25.0, DataLabelMappingName = "Safari: 25.0%"},
+        new DonutData { Browser = "Samsung Internet", Users = 6.0, DataLabelMappingName = "Samsung Internet: 6.0%"},
+        new DonutData { Browser = "UC Browser", Users = 2.5, DataLabelMappingName = "UC Browser: 2.5%"},
+        new DonutData { Browser = "Opera", Users = 1.5, DataLabelMappingName = "Opera: 1.5%"},
+        new DonutData { Browser = "Others", Users = 1.5, DataLabelMappingName = "Others: 1.5%"}
+    };
+    public class DonutData
+    {
+        public string Browser { get; set; }
+        public double Users { get; set; }
+        public string DataLabelMappingName { get; set; }
+    }
+}
+```
+![Blazor Accumulation Chart with Center Label](./images/center-label/blazor-accumulation-chart-with-center-label.png)
+
+## Hover Text
+
+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.
+
+N> Line breaks can be provided to texts in the `HoverTextFormat` property using the `<br>` tag.
+
+```cshtml
+@using Syncfusion.Blazor.Charts
+
+<SfAccumulationChart>
+    <AccumulationChartSeriesCollection>
+        <AccumulationChartSeries DataSource="@DonutChartPoints" XName="Browser" YName="Users" InnerRadius="60%">
+        </AccumulationChartSeries>
+    </AccumulationChartSeriesCollection>
+    <AccumulationChartCenterLabel Text="Mobile Browser<br>Statistics 2024" HoverTextFormat="${point.x} <br> Browser Share <br> ${point.y}%">
+    </AccumulationChartCenterLabel>
+    <AccumulationChartLegendSettings Visible="false"></AccumulationChartLegendSettings>
+</SfAccumulationChart>
+
+@code {
+    public List<DonutData> DonutChartPoints { get; set; } = new List<DonutData>
+    {
+        new DonutData { Browser = "Chrome", Users = 63.5, DataLabelMappingName = "Chrome: 63.5%"},
+        new DonutData { Browser = "Safari", Users = 25.0, DataLabelMappingName = "Safari: 25.0%"},
+        new DonutData { Browser = "Samsung Internet", Users = 6.0, DataLabelMappingName = "Samsung Internet: 6.0%"},
+        new DonutData { Browser = "UC Browser", Users = 2.5, DataLabelMappingName = "UC Browser: 2.5%"},
+        new DonutData { Browser = "Opera", Users = 1.5, DataLabelMappingName = "Opera: 1.5%"},
+        new DonutData { Browser = "Others", Users = 1.5, DataLabelMappingName = "Others: 1.5%"}
+    };
+    public class DonutData
+    {
+        public string Browser { get; set; }
+        public double Users { get; set; }
+        public string DataLabelMappingName { get; set; }
+    }
+}
+```
+![Blazor Accumulation Chart with Center Label Dynamic Text](./images/center-label/blazor-accumulation-chart-with-center-label-hover-text.gif)
+
+## Customization
+
+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.
+
+The position of the center label can be adjusted using the `XOffset` and `YOffset` properties in the `AccumulationChartCenterLabel`.
+
+```cshtml
+@using Syncfusion.Blazor.Charts
+
+<SfAccumulationChart>
+    <AccumulationChartSeriesCollection>
+        <AccumulationChartSeries DataSource="@DonutChartPoints" XName="Browser" YName="Users" InnerRadius="60%">
+        </AccumulationChartSeries>
+    </AccumulationChartSeriesCollection>
+    <AccumulationChartCenterLabel Text="Mobile Browser<br>Statistics 2024">
+        <AccumulationChartCenterLabelFont Size="15px" FontWeight="600" FontFamily="Roboto" fontStyle="Italic" Color="Blue" ></AccumulationChartCenterLabelFont>
+    </AccumulationChartCenterLabel>
+    <AccumulationChartLegendSettings Visible="false"></AccumulationChartLegendSettings>
+</SfAccumulationChart>
+
+@code {
+    public List<DonutData> DonutChartPoints { get; set; } = new List<DonutData>
+    {
+        new DonutData { Browser = "Chrome", Users = 63.5, DataLabelMappingName = "Chrome: 63.5%"},
+        new DonutData { Browser = "Safari", Users = 25.0, DataLabelMappingName = "Safari: 25.0%"},
+        new DonutData { Browser = "Samsung Internet", Users = 6.0, DataLabelMappingName = "Samsung Internet: 6.0%"},
+        new DonutData { Browser = "UC Browser", Users = 2.5, DataLabelMappingName = "UC Browser: 2.5%"},
+        new DonutData { Browser = "Opera", Users = 1.5, DataLabelMappingName = "Opera: 1.5%"},
+        new DonutData { Browser = "Others", Users = 1.5, DataLabelMappingName = "Others: 1.5%"}
+    };
+    public class DonutData
+    {
+        public string Browser { get; set; }
+        public double Users { get; set; }
+        public string DataLabelMappingName { get; set; }
+    }
+}
+```
+![Blazor Accumulation Chart with Center Label Customization](./images/center-label/blazor-accumulation-chart-with-center-label-customization.png)
+
+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.
+
+## See also
+
+* [Data Label](./data-labels)
+* [Title and Subtitle](./title-and-sub-title)
+* [Annotation](./annotation)

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

@@ -262,12 +262,51 @@ Labels will be arranged automatically on the left side of the funnel and pyramid
         new Statistics { Country = "Germany", Users = 82114224 },
     };
 }
-
 ```
 
 ![Blazor Funnel Chart with Smart Data Label](../images/funnel/blazor-funnel-chart-smart-data-label.png)
 {% previewsample "https://blazorplayground.syncfusion.com/embed/hjVKWrCqppsLzynA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
+## Border radius
+
+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).
+
+```cshtml
+@using Syncfusion.Blazor.Charts
+
+ <SfAccumulationChart Title="Recruitment Process" EnableAnimation="false" >
+            <AccumulationChartLegendSettings Visible="false"></AccumulationChartLegendSettings>
+            <AccumulationChartSeriesCollection>
+                <AccumulationChartSeries DataSource="@FunnelChartPoints" XName="InterviewProcess" YName="Candidates" BorderRadius="8"
+                                         Type="AccumulationType.Funnel" Height="80%" Width="40%">
+                    <AccumulationDataLabelSettings Visible="true" Name="DataLabelMappingName" Position="AccumulationLabelPosition.Inside">
+                        <AccumulationChartDataLabelFont FontWeight="600"></AccumulationChartDataLabelFont>
+                    </AccumulationDataLabelSettings>
+                </AccumulationChartSeries>
+            </AccumulationChartSeriesCollection>
+ </SfAccumulationChart>
+
+@code {
+    public List<FunnelData> FunnelChartPoints { get; set; } = new List<FunnelData>
+    {
+        new FunnelData { InterviewProcess = "Hired", Candidates = 55, DataLabelMappingName="Hired: 55"},
+        new FunnelData { InterviewProcess = "Personal Interview", Candidates = 58, DataLabelMappingName="Personal Interview: 58"},
+        new FunnelData { InterviewProcess = "Telephonic Interview", Candidates = 85, DataLabelMappingName="Telephonic Interview: 85"},
+        new FunnelData { InterviewProcess = "Screening", Candidates = 105, DataLabelMappingName="Screening: 105"},
+        new FunnelData { InterviewProcess = "Initial Validation", Candidates = 145, DataLabelMappingName="Initial Validation: 145"},
+        new FunnelData { InterviewProcess = "Candidates Applied", Candidates = 250, DataLabelMappingName="Candidates Applied: 250"},
+    };
+
+    public class FunnelData
+    {
+        public string InterviewProcess { get; set; }
+        public double Candidates { get; set; }
+        public string DataLabelMappingName { get; set; }
+    }
+}
+```
+![Blazor Funnel Chart with border radius applied.](../images/funnel/blazor-funnel-border-radius.png)
+
 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.
 
 ## See also

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

@@ -304,6 +304,40 @@ The [StartAngle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.
 ![Blazor Pie Chart with Color and Text Mapping](../images/pie-dough-nut/blazor-pie-chart-text-mapping.png)
 {% previewsample "https://blazorplayground.syncfusion.com/embed/VNrUCrWqTiZCBNJq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
+## Border radius
+
+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).
+
+```cshtml
+@using Syncfusion.Blazor.Charts
+
+<SfAccumulationChart Title="Pie Chart with Border Radius">
+    <AccumulationChartSeriesCollection>
+        <AccumulationChartSeries DataSource="@DonutChartPoints" XName="Food" YName="Amount" InnerRadius="40%" BorderRadius="8">
+        </AccumulationChartSeries>
+    </AccumulationChartSeriesCollection>
+    <AccumulationChartLegendSettings Visible="false"></AccumulationChartLegendSettings>
+</SfAccumulationChart>
+
+@code {
+    public List<DonutData> DonutChartPoints { get; set; } = new List<DonutData>
+    {
+        new DonutData { Food = "Milk", Amount = 10, DataLabelMappingName = "Milk: 10%"},
+        new DonutData { Food = "Rice", Amount = 30, DataLabelMappingName = "Rice: 30%"},
+        new DonutData { Food = "Cereals", Amount = 20, DataLabelMappingName = "Cereals: 20%"},
+        new DonutData { Food = "Water", Amount = 15, DataLabelMappingName = "Water: 15%"},
+        new DonutData { Food = "Vegetables", Amount = 25, DataLabelMappingName = "Vegetables: 25%"},
+    };
+    public class DonutData
+    {
+        public string Food { get; set; }
+        public double Amount { get; set; }
+        public string DataLabelMappingName { get; set; }
+    }
+}
+```
+![Blazor Pie Chart with border radius applied.](../images/pie-dough-nut/blazor-pie-chart-border-radius.png)
+
 ## Hide pie or doughnut border
 
 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

@@ -213,6 +213,44 @@ By setting the [Explode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor
 ![Explode in Blazor Pyramid Chart](../images/pyramid/blazor-pyramid-chart-explode.png)
 {% previewsample "https://blazorplayground.syncfusion.com/embed/BthAMBMATgJWwkNT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
+## Border radius
+
+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).
+
+```cshtml
+@using Syncfusion.Blazor.Charts
+
+<SfAccumulationChart Title="Food Consumption Pyramid">
+    <AccumulationChartLegendSettings Visible="false">
+    </AccumulationChartLegendSettings>
+    <AccumulationChartSeriesCollection>
+        <AccumulationChartSeries DataSource="@PyramidChartPoints" XName="Foods" YName="Percentage" Type="AccumulationType.Pyramid" Width="45%" Height="80%" BorderRadius="8">
+            <AccumulationDataLabelSettings Visible="true" Position="AccumulationLabelPosition.Outside" Name="DataLabelMappingName">
+            </AccumulationDataLabelSettings>
+        </AccumulationChartSeries>
+    </AccumulationChartSeriesCollection>
+</SfAccumulationChart>
+
+@code {
+    public List<PyramidData> PyramidChartPoints { get; set; } = new List<PyramidData>
+    {
+          new PyramidData { Foods = "Oils", Percentage = 2, DataLabelMappingName = "Oils: 2%" },
+          new PyramidData { Foods = "Nuts", Percentage = 10, DataLabelMappingName = "Nuts: 10%" },
+          new PyramidData { Foods = "Fruits", Percentage = 15, DataLabelMappingName = "Fruits: 15%" },
+          new PyramidData { Foods = "Dairy", Percentage = 23, DataLabelMappingName = "Dairy: 23%" },
+          new PyramidData { Foods = "Vegetables", Percentage = 23, DataLabelMappingName = "Vegetables: 23%" },
+          new PyramidData { Foods = "Grains", Percentage = 27, DataLabelMappingName = "Grains: 27%"}
+    };
+    public class PyramidData
+    {
+        public string Foods { get; set; }
+        public double Percentage { get; set; }
+        public string DataLabelMappingName { get; set; }
+    }
+}
+```
+![Blazor Pyramid Chart with border radius applied.](../images/pyramid/blazor-pyramid-border-radius.png)
+
 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.
 
 ## See also