diff --git a/blazor/chart/images/legend/blazor-column-chart-legend-template.png b/blazor/chart/images/legend/blazor-column-chart-legend-template.png
new file mode 100644
index 0000000000..37c39a29ff
Binary files /dev/null and b/blazor/chart/images/legend/blazor-column-chart-legend-template.png differ
diff --git a/blazor/chart/legend.md b/blazor/chart/legend.md
index a4042eb30b..0dd96c3f9c 100644
--- a/blazor/chart/legend.md
+++ b/blazor/chart/legend.md
@@ -678,6 +678,101 @@ The series [Name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts
+## 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 *@
+
+ @* Set category axis for country names *@
+
+
+ @* Show the legend and enable series toggle *@
+
+
+
+ @* Gold column series *@
+
+ @* Custom legend with icon, label, and total count *@
+
+
+ 🥇
+
+ Gold
+ Awarded for first place finishes
+ Total: @GoldTotal
+
+
+
+
+
+ @* Silver column series *@
+
+ @* Custom legend with icon, label, and total count *@
+
+
+ 🥈
+
+ Silver
+ Awarded for second place finishes
+ Total: @SilverTotal
+
+
+
+
+
+ @* Bronze column series *@
+
+ @* Custom legend with icon, label, and total count *@
+
+
+ 🥉
+
+ Bronze
+ Awarded for third place finishes
+ Total: @BronzeTotal
+
+
+
+
+
+
+
+
+@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 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);
+}
+```
+
+
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