Feature(1005021): Add Series Label documentation for Blazor Charts

blazor-toc.html

@@ -1485,6 +1485,9 @@
 			<li>
 				<a href="/blazor/chart/data-labels">Data Labels</a>
 			</li>
+			<li>
+				<a href="/blazor/chart/series-label">Series Labels</a>
+			</li>
 			<li>
 				<a href="/blazor/chart/last-data-label">Last Data Label</a>
 			</li>

blazor/chart/chart-types/step-area.md

@@ -302,6 +302,63 @@ The [ChartSeriesBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.
 ```
 {% previewsample "https://blazorplayground.syncfusion.com/embed/rXrgWhBxpxgIqdqw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
+**No risers**
+
+You can eliminate the vertical lines between points by setting the `ShowRisers` property to `false` in the series.
+This approach is useful for highlighting trends without the distraction of risers.
+
+```cshtml
+
+@using Syncfusion.Blazor.Charts
+
+<SfChart Title="England - Run Rate">
+    <ChartPrimaryXAxis Title="Overs"></ChartPrimaryXAxis>
+    <ChartPrimaryYAxis Title="Runs"></ChartPrimaryYAxis>
+    <ChartTooltipSettings Enable="true"></ChartTooltipSettings>
+    <ChartSeriesCollection>
+        <ChartSeries DataSource="@ChartData" XName="X" YName="Y" Type="ChartSeriesType.StepArea"
+                    Opacity="0.1" ShowRisers="false" >
+            <ChartSeriesBorder Width="1.5"></ChartSeriesBorder>
+        </ChartSeries>
+    </ChartSeriesCollection>
+</SfChart>
+
+@code {
+    public class ChartPoint
+    {
+        public double X { get; set; }
+        public double Y { get; set; }
+    }
+
+    public List<ChartPoint> ChartData = new()
+    {
+        new() { X = 1,  Y = 7  },
+        new() { X = 2,  Y = 1  },
+        new() { X = 3,  Y = 1  },
+        new() { X = 4,  Y = 14 },
+        new() { X = 5,  Y = 1  },
+        new() { X = 6,  Y = 10 },
+        new() { X = 7,  Y = 8  },
+        new() { X = 8,  Y = 6  },
+        new() { X = 9,  Y = 10 },
+        new() { X = 10, Y = 10 },
+        new() { X = 11, Y = 16 },
+        new() { X = 12, Y = 6  },
+        new() { X = 13, Y = 14 },
+        new() { X = 14, Y = 7  },
+        new() { X = 15, Y = 5  },
+        new() { X = 16, Y = 2  },
+        new() { X = 17, Y = 14 },
+        new() { X = 18, Y = 7  },
+        new() { X = 19, Y = 7  },
+        new() { X = 20, Y = 10 }
+    };
+}
+
+```
+
+![Blazor Step Area Chart NoRiser Series](../images/chart-types-images/blazor-step-area-chart-noriser-series.webp)
+
 ## Empty points
 
 Data points with `null`, `double.NaN` or `undefined` values are considered empty. Empty data points are ignored and not plotted on the chart.

blazor/chart/series-label.md

@@ -0,0 +1,302 @@
+---
+layout: post
+title: Series Label in Blazor Charts Component | Syncfusion
+description: Checkout and learn here all about the Series label in Syncfusion Blazor Charts component and much more.
+platform: Blazor
+control: Chart
+documentation: ug
+---
+
+# Series Label in Blazor Charts Component
+
+The series label displays the name of each series inline, positioned near the end of the series path or the last visible data point. This helps identify each series without referring to the legend.
+
+## Overview
+
+Enable series labels using the `SeriesLabelSettings` property within the series configuration. Set the `visible` property to **true** to display the label.
+
+```cshtml
+
+@using Syncfusion.Blazor.Charts
+
+<SfChart Title="Country Values by Year">
+    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category"></ChartPrimaryXAxis>
+    <ChartPrimaryYAxis Title="Value"></ChartPrimaryYAxis>
+    <ChartLegendSettings Visible="true"></ChartLegendSettings>
+    <ChartTooltipSettings Enable="true"></ChartTooltipSettings>
+    <ChartSeriesCollection>
+        <ChartSeries DataSource="@VietnamData" XName="X" YName="Y"
+            Name="Vietnam" Type="ChartSeriesType.Line" Width="2">
+            <ChartMarker Visible="true" Width="7" Height="7"
+                Shape="ChartShape.Circle" IsFilled="true">
+            </ChartMarker>
+            <SeriesLabelSettings Visible="true" ></SeriesLabelSettings>
+        </ChartSeries>
+        <ChartSeries DataSource="@IndonesiaData" XName="X" YName="Y"
+        Name="Indonesia" Type="ChartSeriesType.Line" Width="2">
+            <ChartMarker Visible="true" Width="5" Height="5" 
+                Shape="ChartShape.Rectangle" IsFilled="true">
+            </ChartMarker>
+            <SeriesLabelSettings Visible="true" > </SeriesLabelSettings>
+        </ChartSeries>
+        <ChartSeries DataSource="@FranceData" XName="X" YName="Y"
+            Name="France" Type="ChartSeriesType.Line" Width="2">
+            <ChartMarker Visible="true" Width="5" Height="5"
+                Shape="ChartShape.Rectangle" IsFilled="true">
+            </ChartMarker>
+            <SeriesLabelSettings Visible="true" ></SeriesLabelSettings>
+        </ChartSeries>
+        <ChartSeries DataSource="@PolandData" XName="X" YName="Y"
+            Name="Poland" Type="ChartSeriesType.Line" Width="2">
+            <ChartMarker Visible="true" Width="5" Height="5" Shape="ChartShape.Rectangle" IsFilled="true">
+            </ChartMarker>
+            <SeriesLabelSettings Visible="true" ></SeriesLabelSettings>
+        </ChartSeries>
+        <ChartSeries DataSource="@MexicoData" XName="X" YName="Y"
+            Name="Mexico" Type="ChartSeriesType.Line" Width="2">
+            <ChartMarker Visible="true" Width="5" Height="5"
+                Shape="ChartShape.Rectangle" IsFilled="true">
+            </ChartMarker>
+            <SeriesLabelSettings Visible="true" ></SeriesLabelSettings>
+        </ChartSeries>
+    </ChartSeriesCollection>
+</SfChart>
+
+@code {
+    public class ChartData
+    {
+        public string X { get; set; } = string.Empty;
+        public double Y { get; set; }
+    }
+
+    public List<ChartData> VietnamData = new()
+    {
+        new() { X = "2016", Y = 7.8 },
+        new() { X = "2017", Y = 10.3 },
+        new() { X = "2018", Y = 15.5 },
+        new() { X = "2019", Y = 17.5 },
+        new() { X = "2020", Y = 19.5 },
+        new() { X = "2021", Y = 23.0 },
+        new() { X = "2022", Y = 20.0 },
+        new() { X = "2023", Y = 19.0 },
+        new() { X = "2024", Y = 22.1 }
+    };
+
+    public List<ChartData> IndonesiaData = new()
+    {
+        new() { X = "2016", Y = 4.8 },
+        new() { X = "2017", Y = 5.2 },
+        new() { X = "2018", Y = 6.2 },
+        new() { X = "2019", Y = 7.8 },
+        new() { X = "2020", Y = 9.3 },
+        new() { X = "2021", Y = 14.3 },
+        new() { X = "2022", Y = 15.6 },
+        new() { X = "2023", Y = 16.0 },
+        new() { X = "2024", Y = 17.0 }
+    };
+
+    public List<ChartData> FranceData = new()
+    {
+        new() { X = "2016", Y = 14.6 },
+        new() { X = "2017", Y = 15.5 },
+        new() { X = "2018", Y = 15.4 },
+        new() { X = "2019", Y = 14.4 },
+        new() { X = "2020", Y = 11.6 },
+        new() { X = "2021", Y = 13.9 },
+        new() { X = "2022", Y = 12.1 },
+        new() { X = "2023", Y = 10.0 },
+        new() { X = "2024", Y = 10.8 }
+    };
+
+    public List<ChartData> PolandData = new()
+    {
+        new() { X = "2016", Y = 8.9 },
+        new() { X = "2017", Y = 10.3 },
+        new() { X = "2018", Y = 10.8 },
+        new() { X = "2019", Y = 9.0 },
+        new() { X = "2020", Y = 7.9 },
+        new() { X = "2021", Y = 8.5 },
+        new() { X = "2022", Y = 7.4 },
+        new() { X = "2023", Y = 6.4 },
+        new() { X = "2024", Y = 7.1 }
+    };
+
+    public List<ChartData> MexicoData = new()
+    {
+        new() { X = "2016", Y = 19.0 },
+        new() { X = "2017", Y = 20.0 },
+        new() { X = "2018", Y = 20.2 },
+        new() { X = "2019", Y = 18.4 },
+        new() { X = "2020", Y = 16.8 },
+        new() { X = "2021", Y = 18.5 },
+        new() { X = "2022", Y = 18.4 },
+        new() { X = "2023", Y = 16.3 },
+        new() { X = "2024", Y = 13.7 }
+    };
+}
+
+```
+
+![Series Label in Blazor Line Chart](images/series-label/blazor-line-chart-series-label.webp)
+
+## Customization
+
+Customize the appearance of series labels using the following properties:
+
+* `Text` – Custom text for the label. By default, the series name is used.
+* `Background` – Background color of the label.
+* `Opacity` – Specifies the transparency of the label.
+* `ShowOverlapText` – When set to `false`, overlapping labels are hidden.
+* `SeriesLabelFont` – Used to customize the label font such as size, family, weight, and color.
+* `SeriesLabelBorder` – Used to customize the border width and color.
+
+```cshtml
+
+@using Syncfusion.Blazor.Charts
+
+<SfChart>
+    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category"></ChartPrimaryXAxis>
+    <ChartPrimaryYAxis Title="Value"></ChartPrimaryYAxis>
+    <ChartLegendSettings Visible="true"></ChartLegendSettings>
+    <ChartTooltipSettings Enable="true"></ChartTooltipSettings>
+    <ChartSeriesCollection>
+        <ChartSeries DataSource="@VietnamData" XName="X" YName="Y"
+            Name="Vietnam" Type="ChartSeriesType.Line" Width="2">
+            <ChartMarker Visible="true" Width="7" Height="7" Shape="ChartShape.Circle" IsFilled="true">
+            </ChartMarker>
+            <SeriesLabelSettings Visible="true" Text="Vietnam" Background="#E8F5E9" Opacity="0.9"
+                ShowOverlapText="true">
+                <SeriesLabelFont Size="12px" FontFamily="Segoe UI" FontWeight="600" Color="#2E7D32" />
+                <SeriesLabelBorder Width="2" Color="#2E7D32" />
+            </SeriesLabelSettings>
+        </ChartSeries>
+        <ChartSeries DataSource="@IndonesiaData" XName="X" YName="Y"
+            Name="Indonesia" Type="ChartSeriesType.Line" Width="2">
+            <ChartMarker Visible="true" Width="5" Height="5" Shape="ChartShape.Rectangle" IsFilled="true">
+            </ChartMarker>
+            <SeriesLabelSettings Visible="true" Text="Indonesia" Background="#E8F5E9" Opacity="0.9"
+                ShowOverlapText="true">
+                <SeriesLabelFont Size="12px" FontFamily="Segoe UI" FontWeight="600" Color="#2E7D32" />
+                <SeriesLabelBorder Width="2" Color="#2E7D32" />
+            </SeriesLabelSettings>
+        </ChartSeries>
+        <ChartSeries DataSource="@FranceData" XName="X" YName="Y"
+            Name="France" Type="ChartSeriesType.Line" Width="2">
+            <ChartMarker Visible="true" Width="5" Height="5" Shape="ChartShape.Rectangle" IsFilled="true">
+            </ChartMarker>
+            <SeriesLabelSettings Visible="true" Text="France" Background="#E8F5E9" Opacity="0.9"  
+                ShowOverlapText="true">
+                <SeriesLabelFont Size="12px" FontFamily="Segoe UI" FontWeight="600" Color="#2E7D32" />
+                <SeriesLabelBorder Width="2" Color="#2E7D32" />
+            </SeriesLabelSettings>
+        </ChartSeries>
+        <ChartSeries DataSource="@PolandData" XName="X" YName="Y"
+            Name="Poland" Type="ChartSeriesType.Line" Width="2">
+            <ChartMarker Visible="true" Width="5" Height="5" Shape="ChartShape.Rectangle" IsFilled="true">
+            </ChartMarker>
+            <SeriesLabelSettings Visible="true" Text="Poland" Background="#E8F5E9" Opacity="0.9"
+                ShowOverlapText="true">
+                <SeriesLabelFont Size="12px" FontFamily="Segoe UI" FontWeight="600" Color="#2E7D32" />
+                <SeriesLabelBorder Width="2" Color="#2E7D32" />
+            </SeriesLabelSettings>
+        </ChartSeries>
+
+        <ChartSeries DataSource="@MexicoData" XName="X" YName="Y"
+            Name="Mexico" Type="ChartSeriesType.Line" Width="2">
+            <ChartMarker Visible="true" Width="5" Height="5" Shape="ChartShape.Rectangle" IsFilled="true">
+            </ChartMarker>
+            <SeriesLabelSettings Visible="true" Text="Mexico" Background="#E8F5E9" Opacity="0.9"
+                ShowOverlapText="true">
+                <SeriesLabelFont Size="12px" FontFamily="Segoe UI" FontWeight="600" Color="#2E7D32" />
+                <SeriesLabelBorder Width="2" Color="#2E7D32" />
+            </SeriesLabelSettings>
+        </ChartSeries>
+    </ChartSeriesCollection>
+</SfChart>
+
+@code {
+    public class ChartData
+    {
+        public string X { get; set; } = string.Empty;
+        public double Y { get; set; }
+    }
+
+    public List<ChartData> VietnamData = new()
+    {
+        new() { X = "2016", Y = 7.8 },
+        new() { X = "2017", Y = 10.3 },
+        new() { X = "2018", Y = 15.5 },
+        new() { X = "2019", Y = 17.5 },
+        new() { X = "2020", Y = 19.5 },
+        new() { X = "2021", Y = 23.0 },
+        new() { X = "2022", Y = 20.0 },
+        new() { X = "2023", Y = 19.0 },
+        new() { X = "2024", Y = 22.1 }
+    };
+
+    public List<ChartData> IndonesiaData = new()
+    {
+        new() { X = "2016", Y = 4.8 },
+        new() { X = "2017", Y = 5.2 },
+        new() { X = "2018", Y = 6.2 },
+        new() { X = "2019", Y = 7.8 },
+        new() { X = "2020", Y = 9.3 },
+        new() { X = "2021", Y = 14.3 },
+        new() { X = "2022", Y = 15.6 },
+        new() { X = "2023", Y = 16.0 },
+        new() { X = "2024", Y = 17.0 }
+    };
+
+    public List<ChartData> FranceData = new()
+    {
+        new() { X = "2016", Y = 14.6 },
+        new() { X = "2017", Y = 15.5 },
+        new() { X = "2018", Y = 15.4 },
+        new() { X = "2019", Y = 14.4 },
+        new() { X = "2020", Y = 11.6 },
+        new() { X = "2021", Y = 13.9 },
+        new() { X = "2022", Y = 12.1 },
+        new() { X = "2023", Y = 10.0 },
+        new() { X = "2024", Y = 10.8 }
+    };
+
+    public List<ChartData> PolandData = new()
+    {
+        new() { X = "2016", Y = 8.9 },
+        new() { X = "2017", Y = 10.3 },
+        new() { X = "2018", Y = 10.8 },
+        new() { X = "2019", Y = 9.0 },
+        new() { X = "2020", Y = 7.9 },
+        new() { X = "2021", Y = 8.5 },
+        new() { X = "2022", Y = 7.4 },
+        new() { X = "2023", Y = 6.4 },
+        new() { X = "2024", Y = 7.1 }
+    };
+
+    public List<ChartData> MexicoData = new()
+    {
+        new() { X = "2016", Y = 19.0 },
+        new() { X = "2017", Y = 20.0 },
+        new() { X = "2018", Y = 20.2 },
+        new() { X = "2019", Y = 18.4 },
+        new() { X = "2020", Y = 16.8 },
+        new() { X = "2021", Y = 18.5 },
+        new() { X = "2022", Y = 18.4 },
+        new() { X = "2023", Y = 16.3 },
+        new() { X = "2024", Y = 13.7 }
+    };
+}
+
+```
+
+![Series Label in Blazor Line Chart Customization](images/series-label/blazor-line-chart-series-label-customization.webp)
+
+## See also
+
+* [Data Label](./data-labels)
+* [Legend](./legend)
+
+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 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.
+
+
+