diff --git a/blazor-toc.html b/blazor-toc.html index b447d8de1f..e1564e17cc 100644 --- a/blazor-toc.html +++ b/blazor-toc.html @@ -1491,6 +1491,9 @@
  • Data Labels
    • +
  • + Series Labels +
  • Last Data Label
    • diff --git a/blazor/chart/chart-types/step-area.md b/blazor/chart/chart-types/step-area.md index 11b282a8e1..6c906e7f70 100644 --- a/blazor/chart/chart-types/step-area.md +++ b/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 + + + + + + + + + + + + +@code { + public class ChartPoint + { + public double X { get; set; } + public double Y { get; set; } + } + + public List 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. diff --git a/blazor/chart/images/chart-types-images/blazor-step-area-chart-noriser-series.webp b/blazor/chart/images/chart-types-images/blazor-step-area-chart-noriser-series.webp new file mode 100644 index 0000000000..2d6529bc9b Binary files /dev/null and b/blazor/chart/images/chart-types-images/blazor-step-area-chart-noriser-series.webp differ diff --git a/blazor/chart/images/series-label/blazor-line-chart-series-label-customization.webp b/blazor/chart/images/series-label/blazor-line-chart-series-label-customization.webp new file mode 100644 index 0000000000..2121fbe037 Binary files /dev/null and b/blazor/chart/images/series-label/blazor-line-chart-series-label-customization.webp differ diff --git a/blazor/chart/images/series-label/blazor-line-chart-series-label.webp b/blazor/chart/images/series-label/blazor-line-chart-series-label.webp new file mode 100644 index 0000000000..3ee73792cd Binary files /dev/null and b/blazor/chart/images/series-label/blazor-line-chart-series-label.webp differ diff --git a/blazor/chart/series-label.md b/blazor/chart/series-label.md new file mode 100644 index 0000000000..90d83fda41 --- /dev/null +++ b/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 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +@code { + public class ChartData + { + public string X { get; set; } = string.Empty; + public double Y { get; set; } + } + + public List 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 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 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 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 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 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +@code { + public class ChartData + { + public string X { get; set; } = string.Empty; + public double Y { get; set; } + } + + public List 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 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 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 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 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. + + +