Skip to content

1005021: add preview sample and proper API link for Series label and … #140

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Venkatesh-kumar04 wants to merge 3 commits into
base: development
Choose a base branch
from
Open

1005021: add preview sample and proper API link for Series label and … #140

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3d419d5
1005021: add preview sample and proper API link for Series label and …
Venkatesh-kumar04 Aug 25, 2026
b130bf0
1005021: Add preview sample and API link for Series label and NoRiser…
Venkatesh-kumar04 Aug 26, 2026
bc492a4
1005021: Add preview sample and API link for Series label and NoRiser…
Venkatesh-kumar04 Aug 26, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 2 additions & 3 deletions chart-sdk/blazor/charts/chart-types/step-area.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down Expand Up @@ -356,8 +356,7 @@ The `ShowRisers` property determines whether vertical riser lines are displayed

```

<!-- TODO: Add preview sample after release -->
![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

Expand Down
36 changes: 17 additions & 19 deletions chart-sdk/blazor/charts/series-label.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down Expand Up @@ -83,8 +83,7 @@ To display series labels, set the `Visible` property of `SeriesLabelSettings` to

```

<!-- TODO: Add Blazor Playground sample after release -->
![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

Expand All @@ -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

Expand Down Expand Up @@ -183,8 +182,7 @@ In the `SeriesLabelFont`:

```

<!-- TODO: Add Blazor Playground sample after release -->
![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

Expand Down