Class SeriesLabelFont

Provides options to customize the text style of inline series labels.

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

The SeriesLabelFont allows you to customize the font properties (such as size, color, font family, font weight, and font style) of inline series labels in the chart. Use this component as a nested child of SeriesLabelSettings to configure the font style.

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

Constructors

SeriesLabelFont()

Declaration
public SeriesLabelFont()

Properties

Color

Gets or sets the color of the inline series label text in the Chart.

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

Accepts valid CSS color string values, including hexadecimal, rgba, and color names. The default color is determined by the Chart's theme. By default, the theme is set to Material with a series label text color of black.
Overrides
Remarks

Use the Color property to change the font color of inline series labels in the Chart series.

Examples
// The following example demonstrates how to set a custom color for series label text:
<SfChart>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@WeatherReports" XName="X" YName="Y">
            <SeriesLabelSettings Visible="true">
                <SeriesLabelFont Color="#E7910F"></SeriesLabelFont>
            </SeriesLabelSettings>
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>

FontFamily

Gets or sets the font family of the inline series label text in the Chart.

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

A string representing the font family of the series label text. The default font family is determined by the Chart's theme. By default, the theme is set to Material with series label font family Segoe UI.
Overrides
Remarks

The font family accepts typical CSS font family syntax, allowing customization to match the desired text style.

Examples
// The following example demonstrates how to set a custom font family for series label text:
<SfChart>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@WeatherReports" XName="X" YName="Y">
            <SeriesLabelSettings Visible="true">
                <SeriesLabelFont FontFamily="Arial"></SeriesLabelFont>
            </SeriesLabelSettings>
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>

FontWeight

Gets or sets the font weight of the inline series label text in the Chart.

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

A string representing the font weight of the series label text. The default font weight is determined by the Chart's theme. By default, the theme is set to Material with series label font weight of normal.
Overrides
Remarks

The font weight can be a number (100 to 900), or a keyword such as 'normal', 'bold', 'bolder', or 'lighter'.

Examples
// The following example demonstrates how to set a custom font weight for series label text:
<SfChart>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@WeatherReports" XName="X" YName="Y">
            <SeriesLabelSettings Visible="true">
                <SeriesLabelFont FontWeight="bold"></SeriesLabelFont>
            </SeriesLabelSettings>
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>

Size

Gets or sets the size of the inline series label text.

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

A string representing the font size of the series label text. The default size is determined by the Chart's theme. By default, the theme is set to Material with a series label text size of 14px.
Overrides
Remarks

Use the Size property to change the font size of inline series labels in the Chart series. The size value accepts standard CSS font-size units such as 'px', 'em', etc.

Examples
// The following example demonstrates how to set a custom font size for series label text:
<SfChart>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@WeatherReports" XName="X" YName="Y" Name="Revenue">
            <SeriesLabelSettings Visible="true">
                <SeriesLabelFont Size="18px"></SeriesLabelFont>
            </SeriesLabelSettings>
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>

Implements