Class SeriesLabelSettings

Provides options to customize the inline series labels that render the series name directly on the chart.

Inheritance
object
ComponentBase
OwningComponentBase
SfOwningComponentBase
ChartSubComponent
SeriesLabelSettings
Implements
Inherited Members
Namespace: Syncfusion.Blazor.Charts
Assembly: Syncfusion.Blazor.Charts.dll
Syntax
public class SeriesLabelSettings : ChartSubComponent, IComponent, IHandleEvent, IHandleAfterRender, IDisposable
Remarks

The SeriesLabelSettings allows you to display the series name as a label directly on the chart area, providing a clear visual identification of each series. Use this component as a nested child of ChartSeries to configure the appearance, visibility, and behavior of inline series labels.

Examples
<SfChart>
  <ChartSeriesCollection>
    <ChartSeries DataSource="@Data" XName="X" YName="Y" Type="ChartSeriesType.Line" Name="Revenue">
      <SeriesLabelSettings Visible="true" Background="#E8F5E9" ShowOverlapText="false">
        <SeriesLabelFont Size="16px" Color="#2E7D32" FontWeight="bold"></SeriesLabelFont>
        <SeriesLabelBorder Width="2" Color="#2E7D32" />
      </SeriesLabelSettings>
    </ChartSeries>
  </ChartSeriesCollection>
</SfChart>

Constructors

SeriesLabelSettings()

Declaration
public SeriesLabelSettings()

Properties

Background

Gets or sets the background color of the inline series label.

Declaration
[Parameter]
public string Background { get; set; }
Property Value
Type Description
string

Accepts valid CSS color string values such as hexadecimal, rgba, and color names. The default value is transparent.
Remarks

The background color is used to set the background color of the series label.

Examples
// The following example demonstrates setting a background color for the series label:
<SfChart>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@WeatherReports" XName="X" YName="Y">
            <SeriesLabelSettings Visible="true" Background="#E8F5E9"/>
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>

Border

Gets or sets the options to customize the border of the inline series label.

Declaration
[Parameter]
public SeriesLabelBorder Border { get; set; }
Property Value
Type Description
SeriesLabelBorder

Accepts the instance of the SeriesLabelBorder class. The default value is a new instance of the SeriesLabelBorder class.
Remarks

Use this property to customize the border of inline series labels in the Chart series.

Examples
// The following example demonstrates setting a custom border for inline series labels:
<SfChart>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@WeatherReports" XName="X" YName="Y" Type="ChartSeriesType.Line">
            <SeriesLabelSettings Visible="true">
                <SeriesLabelBorder Width="2" Color="#2E7D32" />
            </SeriesLabelSettings>
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>

Font

Gets or sets the options to customize the font of the inline series labels for the Chart series.

Declaration
[Parameter]
public SeriesLabelFont Font { get; set; }
Property Value
Type Description
SeriesLabelFont

Accepts the instance of the SeriesLabelFont class. The default value is a new instance of the SeriesLabelFont class.
Remarks

Based on the Chart theme, the font style will be applied to the inline series labels.

Examples
// The following example demonstrates setting a custom font style for inline series labels:
<SfChart>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@WeatherReports" XName="X" YName="Y">
            <SeriesLabelSettings Visible="true">
                <SeriesLabelFont Size="16px" FontFamily="Arial" FontWeight="bold" Color="#2E7D32"></SeriesLabelFont>
            </SeriesLabelSettings>
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>

Opacity

Gets or sets the opacity of the inline series label.

Declaration
[Parameter]
public double Opacity { get; set; }
Property Value
Type Description
double

A double representing the opacity level of the series label. Possible values range from 0 to 1. The default value is 1.
Remarks

This property specifies the transparency level of the series label background.

Examples
// This example demonstrates setting the opacity of a series label to 0.5:
<SfChart>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@WeatherReports" XName="X" YName="Y">
            <SeriesLabelSettings Visible="true" Opacity="0.5"/>
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>

ShowOverlapText

Gets or sets a value indicating whether overlapping inline series labels are allowed.

Declaration
[Parameter]
public bool ShowOverlapText { get; set; }
Property Value
Type Description
bool

A boolean indicating if overlapping series labels are allowed. The default value is false.
Remarks

When the ShowOverlapText property is set to false, the chart will attempt to reposition series labels to avoid overlapping. Set to true to allow labels to overlap if necessary.

Examples
// The following code demonstrates how to allow overlapping series labels:
<SfChart>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@WeatherReports" XName="X" YName="Y">
            <SeriesLabelSettings Visible="true" ShowOverlapText="true"/>
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>

Text

Gets or sets the text for the series label.

Declaration
[Parameter]
public string? Text { get; set; }
Property Value
Type Description
string

A string representing the custom text for the series label. The default value is null, which displays the series name.
Remarks

Use the Text property to specify custom text for the series label. When this property is set, the custom text will be displayed instead of the series name. If this property is null or empty, the ChartSeries name will be used as the label text.

Examples
// The following example demonstrates how to set custom text for the series label:
<SfChart>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@WeatherReports" XName="X" YName="Y" Name="Revenue">
            <SeriesLabelSettings Visible="true" Text="Total Revenue"/>
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>

Visible

Gets or sets a value indicating whether the inline series label is visible.

Declaration
[Parameter]
public bool Visible { get; set; }
Property Value
Type Description
bool

A boolean value is accepted. Set to true to enable the series label; otherwise, false. The default value is false.
Remarks

Use the Visible property to control the visibility of inline series labels in the Chart series.

Examples
// The following example demonstrates how to enable inline series labels in the chart:
<SfChart>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@WeatherReports" XName="X" YName="Y" Type="ChartSeriesType.Line">
            <SeriesLabelSettings Visible="true"/>
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>

Implements