Merge branch 'development' into 998039-acc-legend

Author: Keerthivasan-Ramamoorthy

blazor/chart/images/legend/blazor-column-chart-legend-template.png

@@ -678,6 +678,101 @@ The series [Name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts
 
 ![Hiding Legend Item in Blazor Column Chart](images/legend/blazor-column-chart-hide-legend-item.png)
 
+## Legend Template
+
+Legend templates allow you to replace default legend icons and text with custom HTML or Blazor markup for each series. This enables branded styles, richer content (icons, multi-line text, badges), improved readability, and localization.
+
+To use, add a `LegendItemTemplate` inside any [ChartSeries](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html) you want to customize. The rendered content becomes the legend item and can be styled with CSS. Legend interactions (click to toggle series) remain unless [ToggleVisibility](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartLegendSettings.html#Syncfusion_Blazor_Charts_ChartLegendSettings_ToggleVisibility) is set to false. Templates work with all legend positions, alignments, and paging.
+
+```
+@using Syncfusion.Blazor.Charts
+
+@* Initialize the chart and configure essential features *@
+<SfChart Title="Olympic Medals">
+    @* Set category axis for country names *@
+    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category" />
+
+    @* Show the legend and enable series toggle *@
+    <ChartLegendSettings Visible="true" />
+
+    <ChartSeriesCollection>
+        @* Gold column series *@
+        <ChartSeries DataSource="@MedalDetails" Name="Gold" XName="Country" Width="2" Opacity="1" YName="Gold" Fill="#FFD700" Type="ChartSeriesType.Column">
+            @* Custom legend with icon, label, and total count *@
+            <LegendItemTemplate>
+                <div style="display:flex; align-items:center; gap:10px; padding:4px 0;">
+                    <span style="font-size:18px;">🥇</span>
+                    <div style="display:flex; flex-direction:column; line-height:1.15;">
+                        <span style="font-family:'Segoe UI'; font-size:14px; font-weight:700; color:#FFD700;">Gold</span>
+                        <span style="font-size:12px; opacity:0.85;">Awarded for first place finishes</span>
+                        <span style="font-size:12px; opacity:0.75;">Total: @GoldTotal</span>
+                    </div>
+                </div>
+            </LegendItemTemplate>
+        </ChartSeries>
+
+        @* Silver column series *@
+        <ChartSeries DataSource="@MedalDetails" Name="Silver" XName="Country" Width="2" Opacity="1" YName="Silver" Fill="#898989" Type="ChartSeriesType.Column">
+            @* Custom legend with icon, label, and total count *@
+            <LegendItemTemplate>
+                <div style="display:flex; align-items:center; gap:10px; padding:4px 0;">
+                    <span style="font-size:18px;">🥈</span>
+                    <div style="display:flex; flex-direction:column; line-height:1.15;">
+                        <span style="font-family:'Segoe UI'; font-size:14px; font-weight:700; color:#898989;">Silver</span>
+                        <span style="font-size:12px; opacity:0.85;">Awarded for second place finishes</span>
+                        <span style="font-size:12px; opacity:0.75;">Total: @SilverTotal</span>
+                    </div>
+                </div>
+            </LegendItemTemplate>
+        </ChartSeries>
+
+        @* Bronze column series *@
+        <ChartSeries DataSource="@MedalDetails" Name="Bronze" XName="Country" Width="2" Opacity="1" YName="Bronze" Fill="#CD7F32" Type="ChartSeriesType.Column">
+            @* Custom legend with icon, label, and total count *@
+            <LegendItemTemplate>
+                <div style="display:flex; align-items:center; gap:10px; padding:4px 0;">
+                    <span style="font-size:18px;">🥉</span>
+                    <div style="display:flex; flex-direction:column; line-height:1.15;">
+                        <span style="font-family:'Segoe UI'; font-size:14px; font-weight:700; color:#CD7F32;">Bronze</span>
+                        <span style="font-size:12px; opacity:0.85;">Awarded for third place finishes</span>
+                        <span style="font-size:12px; opacity:0.75;">Total: @BronzeTotal</span>
+                    </div>
+                </div>
+            </LegendItemTemplate>
+        </ChartSeries>
+    </ChartSeriesCollection>
+
+</SfChart>
+
+@code {
+
+    public class ChartData
+    {
+        public string Country { get; set; }
+        public double Gold { get; set; }
+        public double Silver { get; set; }
+        public double Bronze { get; set; }
+    }
+
+    public List<ChartData> MedalDetails = new()
+    {
+        new ChartData{ Country= "USA",      Gold=50, Silver=70, Bronze=45 },
+        new ChartData{ Country= "China",    Gold=40, Silver=60, Bronze=55 },
+        new ChartData{ Country= "Japan",    Gold=70, Silver=60, Bronze=50 },
+        new ChartData{ Country= "Australia",Gold=60, Silver=56, Bronze=40 },
+        new ChartData{ Country= "France",   Gold=50, Silver=45, Bronze=35 },
+        new ChartData{ Country= "Germany",  Gold=40, Silver=30, Bronze=22 },
+        new ChartData{ Country= "Italy",    Gold=40, Silver=35, Bronze=37 },
+        new ChartData{ Country= "Sweden",   Gold=30, Silver=25, Bronze=27 }
+    };
+
+    public int GoldTotal => (int)MedalDetails.Sum(m => m.Gold);
+    public int SilverTotal => (int)MedalDetails.Sum(m => m.Silver);
+    public int BronzeTotal => (int)MedalDetails.Sum(m => m.Bronze);
+}
+```
+![Legend Template in Blazor Column Chart](images/legend/blazor-column-chart-legend-template.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 Chart Example](https://blazor.syncfusion.com/demos/chart/line?theme=bootstrap5) to know various chart types and how to represent time-dependent data, showing trends at equal intervals.
 
 ## See also

blazor/chart/legend.md

@@ -561,3 +561,94 @@ The series [Name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts
 ```
 
 ![Blazor Stock Chart hiding legend item](images/blazor-stock-chart-hidding-legend.png)
+
+## Legend Template
+
+Legend templates allow you to replace default legend icons and text with custom HTML or Blazor markup for each series. This enables branded styles, richer content (icons, multi-line text, badges), improved readability, and localization.
+
+To use, add a `LegendItemTemplate` inside any [StockChartSeries](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartSeries.html#Syncfusion_Blazor_Charts_StockChartSeries) you want to customize. The rendered content becomes the legend item and can be styled with CSS. Legend interactions (click to toggle series) remain unless [ToggleVisibility](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLegendSettings.html#Syncfusion_Blazor_Charts_StockChartLegendSettings_ToggleVisibility) is set to false. Templates work with all legend positions, alignments, and paging.
+
+```
+@using Syncfusion.Blazor.Charts
+
+@* Initialize the stock chart component and configure its essential features *@
+<SfStockChart Title="AAPL vs GOOGL Stock Price"
+              SelectionMode="SelectionMode.Series">
+
+    @* Display the legend and allow toggling series visibility on interaction *@
+    <StockChartLegendSettings Visible="true" ToggleVisibility="true" />
+
+    <StockChartSeriesCollection>
+
+        @* Define the first series using OHLC fields and render it as a line to show trend *@
+        <StockChartSeries DataSource="@StockDetails" Type="ChartSeriesType.Line" XName="Date" High="High" Low="Low" Open="Open" Close="Close" Name="Apple Stock Price" Fill="@AppleColor">
+            @* This legend item contains an emoji indicator, a color swatch, a descriptive label, and a dynamic point count *@
+            <LegendItemTemplate>
+                <div style="display:flex; align-items:center; gap:10px; padding:6px 0;">
+                    <span style="font-size:18px;">🍎</span>
+                    <div style="display:flex; flex-direction:column; line-height:1.2;">
+                        <span style="font-family:'Segoe UI'; font-size:14px; font-weight:700; color:@AppleColor;">
+                            Apple Stock Price
+                        </span>
+                        <span style="font-size:12px; opacity:0.85;">
+                            AAPL OHLC rendered as Line
+                        </span>
+                        <span style="font-size:12px; opacity:0.75;">
+                            Points: @StockDetails.Count
+                        </span>
+                    </div>
+                </div>
+            </LegendItemTemplate>
+        </StockChartSeries>
+
+        @* Define the second series using the same OHLC fields and render it as a spline for a smoothed trend *@
+        <StockChartSeries DataSource="@StockDetails" Type="ChartSeriesType.Spline" XName="Date" High="High" Low="Low" Open="Open" Close="Close" Name="Google Stock Price" Fill="@GoogleColor">
+            @* This legend item presents an emoji indicator, a color swatch, a descriptive label, and a dynamic point count *@
+            <LegendItemTemplate>
+                <div style="display:flex; align-items:center; gap:10px; padding:6px 0;">
+                    <span style="font-size:18px;">🔍</span>
+                    <div style="display:flex; flex-direction:column; line-height:1.2;">
+                        <span style="font-family:'Segoe UI'; font-size:14px; font-weight:700; color:@GoogleColor;">
+                            Google Stock Price
+                        </span>
+                        <span style="font-size:12px; opacity:0.85;">
+                            GOOGL OHLC rendered as Spline
+                        </span>
+                        <span style="font-size:12px; opacity:0.75;">
+                            Points: @StockDetails.Count
+                        </span>
+                    </div>
+                </div>
+            </LegendItemTemplate>
+        </StockChartSeries>
+
+    </StockChartSeriesCollection>
+</SfStockChart>
+
+@code {
+    private string AppleColor => "#16a34a";
+    private string GoogleColor => "#2563eb";
+
+    public class ChartData
+    {
+        public DateTime Date { get; set; }
+        public double Open { get; set; }
+        public double Low { get; set; }
+        public double Close { get; set; }
+        public double High { get; set; }
+        public double Volume { get; set; }
+    }
+
+    public List<ChartData> StockDetails = new List<ChartData>
+    {
+        new ChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068 },
+        new ChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92,       Low = 86.2157, Close = 86.4614, Volume = 912634864 },
+        new ChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066 },
+        new ChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749 },
+        new ChartData { Date = new DateTime(2012, 04, 30), Open = 85.4,    High = 85.4857, Low = 80.7385, Close = 80.75,   Volume = 615249365 }
+    };
+}
+```
+![Blazor Stock Chart legend template](images/blazor-stock-chart-legend-template.png)
+
+