diff --git a/blazor/stock-chart/images/blazor-stock-chart-legend-template.png b/blazor/stock-chart/images/blazor-stock-chart-legend-template.png new file mode 100644 index 0000000000..136baac754 Binary files /dev/null and b/blazor/stock-chart/images/blazor-stock-chart-legend-template.png differ diff --git a/blazor/stock-chart/legend.md b/blazor/stock-chart/legend.md index 262dddc258..90d110db75 100644 --- a/blazor/stock-chart/legend.md +++ b/blazor/stock-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 *@ + + + @* Display the legend and allow toggling series visibility on interaction *@ + + + + + @* Define the first series using OHLC fields and render it as a line to show trend *@ + + @* This legend item contains an emoji indicator, a color swatch, a descriptive label, and a dynamic point count *@ + +
+ 🍎 +
+ + Apple Stock Price + + + AAPL OHLC rendered as Line + + + Points: @StockDetails.Count + +
+
+
+
+ + @* Define the second series using the same OHLC fields and render it as a spline for a smoothed trend *@ + + @* This legend item presents an emoji indicator, a color swatch, a descriptive label, and a dynamic point count *@ + +
+ 🔍 +
+ + Google Stock Price + + + GOOGL OHLC rendered as Spline + + + Points: @StockDetails.Count + +
+
+
+
+ +
+
+ +@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 StockDetails = new List + { + 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) + +