diff --git a/blazor-toc.html b/blazor-toc.html index 6abe23d80f..92302a8701 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 62dfaa3c5f..f66a4218c6 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" %} +**Show Risers** + +The `ShowRisers` property determines whether vertical riser lines are displayed between consecutive data points in the series. Set this property to `true` to show the riser lines or `false` to hide them. Hiding risers can simplify the chart appearance and make the overall trend easier to follow. + +```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 } + }; +} + +``` + +Need to add the preview sample +![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..d4ff209628 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..3ec7bddb36 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..c8e89aa7d3 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..18343f592c --- /dev/null +++ b/blazor/chart/series-label.md @@ -0,0 +1,192 @@ +--- +layout: post +title: Series Label in Blazor Charts Component | Syncfusion +description: Check out and learn here all about the Series label in the Syncfusion Blazor Charts component and much more. +platform: Blazor +control: Chart +documentation: ug +keywords: Blazor Chart series label, series label, chart labels, inline series labels, chart series customization, SeriesLabelSettings +--- + +# 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 helping users identify series inline and reduces reliance on the legend. + +This feature is especially useful in multi-series visualizations and exported charts, where quick in-chart identification is important. It is currently supported for Line, Area, Scatter, Column, and Bar series, as well as Polar Line and Radar Line series. Series labels can be enabled and customized using the `SeriesLabelSettings` property. + +## Enable series labels + +To display series labels, set the `Visible` property of `SeriesLabelSettings` to `true` for the required series. + +```cshtml + +@using Syncfusion.Blazor.Charts + + + + + + + + + + + + + + + + + + + + + + + +@code { + public class MetricData + { + public string Month { get; set; } + public double Value { get; set; } + } + + public List ActiveUsersData = new() + { + new MetricData { Month = "Feb", Value = 420 }, + new MetricData { Month = "Mar", Value = 460 }, + new MetricData { Month = "Apr", Value = 445 }, + new MetricData { Month = "May", Value = 495 }, + new MetricData { Month = "Jun", Value = 535 } + }; + + public List SupportTicketsData = new() + { + new MetricData { Month = "Feb", Value = 210 }, + new MetricData { Month = "Mar", Value = 240 }, + new MetricData { Month = "Apr", Value = 225 }, + new MetricData { Month = "May", Value = 260 }, + new MetricData { Month = "Jun", Value = 275 } + }; + + public List FeatureRequestsData = new() + { + new MetricData { Month = "Feb", Value = 65 }, + new MetricData { Month = "Mar", Value = 78 }, + new MetricData { Month = "Apr", Value = 72 }, + new MetricData { Month = "May", Value = 95 }, + new MetricData { Month = "Jun", Value = 108 } + }; +} + +``` + +Need to add the preview sample +![Blazor line chart displaying inline series labels](images/series-label/blazor-line-chart-series-label.webp) + +## Customization + +You can customize the appearance of the series label using the following properties. + +### SeriesLabelSettings Properties + +Configure the main series label appearance: + +In the `SeriesLabelSettings`: +* `Visible`: Enables or disables the display of series labels. Set to `true` to display the label for the corresponding series. +* `Text`: Specifies the custom text to be displayed in the series label. If this property is not set, the label displays the corresponding series name by default. +* `Background`: Specifies the background color of the series label. This helps the label stand out clearly within the chart area. +* `Opacity`: Specifies the transparency level of the series label. The accepted range is from 0 to 1, where 0 represents full transparency and 1 represents full opacity. +* `ShowOverlapText`: Determines whether overlapping series labels should be displayed. This is useful when labels overlap because the corresponding series are positioned close to one another. + +In the `SeriesLabelBorder`: +* `Color`: Specifies the border color of the series label. This can be used to visually separate the label from the chart background. +* `Width`: Specifies the width of the border around the series label. A higher value makes the border more visible. + +In the `SeriesLabelFont`: +* `Size`: Specifies the font size of the label text. +* `Color`: Specifies the font color of the label text. +* `FontFamily`: Specifies the font family of the label text. +* `FontWeight`: Specifies the font weight of the label text. + +```cshtml + +@using Syncfusion.Blazor.Charts + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +@code { + public class MetricData + { + public string Month { get; set; } + public double Value { get; set; } + } + + public List ActiveUsersData = new() + { + new MetricData { Month = "Feb", Value = 420 }, + new MetricData { Month = "Mar", Value = 460 }, + new MetricData { Month = "Apr", Value = 445 }, + new MetricData { Month = "May", Value = 495 }, + new MetricData { Month = "Jun", Value = 535 } + }; + + public List SupportTicketsData = new() + { + new MetricData { Month = "Feb", Value = 210 }, + new MetricData { Month = "Mar", Value = 240 }, + new MetricData { Month = "Apr", Value = 225 }, + new MetricData { Month = "May", Value = 260 }, + new MetricData { Month = "Jun", Value = 275 } + }; + + public List FeatureRequestsData = new() + { + new MetricData { Month = "Feb", Value = 65 }, + new MetricData { Month = "Mar", Value = 78 }, + new MetricData { Month = "Apr", Value = 72 }, + new MetricData { Month = "May", Value = 95 }, + new MetricData { Month = "Jun", Value = 108 } + }; +} + +``` + +Need to add the preview sample +![Blazor line chart with customized series label background, font, and border](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 to explore the available chart features. You can also check the [Blazor Chart Example](https://blazor.syncfusion.com/demos/chart/line?theme=bootstrap5) to learn how chart types are used to visualize data trends over equal intervals.