diff --git a/blazor-toc.html b/blazor-toc.html index e1d13842e7..91ea3a4248 100644 --- a/blazor-toc.html +++ b/blazor-toc.html @@ -1485,6 +1485,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..694a062c00 100644 --- a/blazor/chart/chart-types/step-area.md +++ b/blazor/chart/chart-types/step-area.md @@ -302,6 +302,62 @@ 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..2b352ef78d --- /dev/null +++ b/blazor/chart/series-label.md @@ -0,0 +1,310 @@ +--- +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 feature displays the name of each series directly within the chart area. This improves readability by identifying each series inline and reducing the need to refer to the legend. The label can be enabled and customized using the `SeriesLabelSettings` property. + +## Enable series label + +To enable the series label, set the `Visible` property of the `SeriesLabelSettings` configuration to **true** within the series settings. + +```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 + +The appearance of the series label can be customized using the following properties. + +In the `SeriesLabelSettings`: +* `Text`: Sets custom text for the series label. By default, the series name is displayed. +* `Background`: Sets the background color of the series label. +* `Opacity`: Sets the transparency of the series label. The accepted range is from `0` to `1`. +* `ShowOverlapText`: Specifies whether overlapping series labels are allowed. + +In the `SeriesLabelBorder`: +* `Color`: Sets the border color of the series label. +* `Width`: Sets the border width of the series label. + +In the `SeriesLabelFont`: +* `Size`: Sets the font size of the label text. +* `Color`: Sets the font color of the label text. +* `FontFamily`: Specifies the font family of the label text. +* `FontWeight`: Sets the font weight of the label text. + +```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. +