From 3d419d5409202a7b2519a805ab4c819d36ce53aa Mon Sep 17 00:00:00 2001 From: Venkatesan Kumar Date: Tue, 25 Aug 2026 17:55:04 +0530 Subject: [PATCH 1/3] 1005021: add preview sample and proper API link for Series label and NoRiser feature --- .../blazor/charts/chart-types/step-area.md | 5 +-- chart-sdk/blazor/charts/series-label.md | 38 +++++++++---------- 2 files changed, 20 insertions(+), 23 deletions(-) diff --git a/chart-sdk/blazor/charts/chart-types/step-area.md b/chart-sdk/blazor/charts/chart-types/step-area.md index 1b6c615db..f4ff3d0c4 100644 --- a/chart-sdk/blazor/charts/chart-types/step-area.md +++ b/chart-sdk/blazor/charts/chart-types/step-area.md @@ -304,7 +304,7 @@ The [ChartSeriesBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor. **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. +The [ShowRisers](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_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 @@ -356,8 +356,7 @@ The `ShowRisers` property determines whether vertical riser lines are displayed ``` - -![Blazor Step Area Chart NoRiser Series](../images/chart-types-images/blazor-step-area-chart-noriser-series.webp) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hZrRtmMIKgGAEhCg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Step Area Chart NoRiser Series](../images/chart-types-images/blazor-step-area-chart-noriser-series.webp)" %} ## Empty points diff --git a/chart-sdk/blazor/charts/series-label.md b/chart-sdk/blazor/charts/series-label.md index 563399237..8efe6d7ad 100644 --- a/chart-sdk/blazor/charts/series-label.md +++ b/chart-sdk/blazor/charts/series-label.md @@ -1,6 +1,6 @@ --- layout: post -title: Blazor Charts Series Label Examples | Syncfusion® +title: Blazor Charts Series Label Examples | Syncfusion® description: Learn how to display series names inline in Syncfusion Blazor Charts. Use SeriesLabelSettings to improve readability of multi-series charts. platform: Blazor control: Charts @@ -12,13 +12,13 @@ keywords: Blazor Chart series label, series label, chart labels, inline series l 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.Series labels can be enabled and customized using the `SeriesLabelSettings` property. +This feature is especially useful in multi-series visualizations and exported charts, where quick in-chart identification is important.Series labels can be enabled and customized using the [SeriesLabelSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SeriesLabelSettings.html) property. N> **Supported Series Types:** Series labels are available for Line, Area, Scatter, Column, Bar, Polar Line, and Radar Line chart types. ## Enable series labels -To display series labels, set the `Visible` property of `SeriesLabelSettings` to `true` for the required series. +To display series labels, set the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SeriesLabelSettings.html#Syncfusion_Blazor_Charts_SeriesLabelSettings_Visible) property of [SeriesLabelSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SeriesLabelSettings.html) to `true` for the required series. ```cshtml @@ -83,8 +83,7 @@ To display series labels, set the `Visible` property of `SeriesLabelSettings` to ``` - -![Blazor line chart displaying inline series labels](images/series-label/blazor-line-chart-series-label.webp) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LXhRXwCeUtiqTzwA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor line chart displaying inline series labels](images/series-label/blazor-line-chart-series-label.webp)" %} ## Customization @@ -94,22 +93,22 @@ You can customize the appearance of the series label using the following propert 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. For example, set `Opacity="0.5"` for 50% transparency. -* `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 [SeriesLabelSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SeriesLabelSettings.html): +* [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SeriesLabelSettings.html#Syncfusion_Blazor_Charts_SeriesLabelSettings_Visible): Enables or disables the display of series labels. Set to `true` to display the label for the corresponding series. +* [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SeriesLabelSettings.html#Syncfusion_Blazor_Charts_SeriesLabelSettings_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](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SeriesLabelSettings.html#Syncfusion_Blazor_Charts_SeriesLabelSettings_Background): Specifies the background color of the series label. This helps the label stand out clearly within the chart area. +* [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SeriesLabelSettings.html#Syncfusion_Blazor_Charts_SeriesLabelSettings_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. For example, set `Opacity="0.5"` for 50% transparency. +* [ShowOverlapText](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SeriesLabelSettings.html#Syncfusion_Blazor_Charts_SeriesLabelSettings_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`: +In the [SeriesLabelBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SeriesLabelBorder.html): * `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. +* [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SeriesLabelBorder.html#Syncfusion_Blazor_Charts_SeriesLabelBorder_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. Valid values include `normal`, `bold`, `600`, `700`, etc. (CSS font-weight format). +In the [SeriesLabelFont](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SeriesLabelFont.html): +* [Size](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SeriesLabelFont.html#Syncfusion_Blazor_Charts_SeriesLabelFont_Size): Specifies the font size of the label text. +* [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SeriesLabelFont.html#Syncfusion_Blazor_Charts_SeriesLabelFont_Color): Specifies the font color of the label text. +* [FontFamily](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SeriesLabelFont.html#Syncfusion_Blazor_Charts_SeriesLabelFont_FontFamily): Specifies the font family of the label text. +* [FontWeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SeriesLabelFont.html#Syncfusion_Blazor_Charts_SeriesLabelFont_FontWeight): Specifies the font weight of the label text. Valid values include `normal`, `bold`, `600`, `700`, etc. (CSS font-weight format). ```cshtml @@ -183,8 +182,7 @@ In the `SeriesLabelFont`: ``` - -![Blazor line chart with customized series label background, font, and border](images/series-label/blazor-line-chart-series-label-customization.webp) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LXhHXQWeAXmXdxjU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor line chart with customized series label background, font, and border](images/series-label/blazor-line-chart-series-label-customization.webp)" %} ## See also From b130bf0d8a9dfe41a6aa69013c14497fc866895a Mon Sep 17 00:00:00 2001 From: Venkatesan Kumar Date: Wed, 26 Aug 2026 10:43:11 +0530 Subject: [PATCH 2/3] 1005021: Add preview sample and API link for Series label and NoRiser feature --- chart-sdk/blazor/charts/series-label.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/chart-sdk/blazor/charts/series-label.md b/chart-sdk/blazor/charts/series-label.md index 8efe6d7ad..530c83f3e 100644 --- a/chart-sdk/blazor/charts/series-label.md +++ b/chart-sdk/blazor/charts/series-label.md @@ -1,6 +1,6 @@ ---- +--- layout: post -title: Blazor Charts Series Label Examples | Syncfusion® +title: Blazor Charts Series Label Examples | Syncfusion® description: Learn how to display series names inline in Syncfusion Blazor Charts. Use SeriesLabelSettings to improve readability of multi-series charts. platform: Blazor control: Charts From bc492a4ff27709fe11c11621c96cc8f814de1dc3 Mon Sep 17 00:00:00 2001 From: Venkatesan Kumar Date: Wed, 26 Aug 2026 12:19:57 +0530 Subject: [PATCH 3/3] 1005021: Add preview sample and API link for Series label and NoRiser feature --- chart-sdk/blazor/charts/series-label.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/chart-sdk/blazor/charts/series-label.md b/chart-sdk/blazor/charts/series-label.md index 530c83f3e..4f02a5f02 100644 --- a/chart-sdk/blazor/charts/series-label.md +++ b/chart-sdk/blazor/charts/series-label.md @@ -1,4 +1,4 @@ ---- +--- layout: post title: Blazor Charts Series Label Examples | Syncfusion® description: Learn how to display series names inline in Syncfusion Blazor Charts. Use SeriesLabelSettings to improve readability of multi-series charts.