Class ChartDataLabelFont

Provide options to customize the text style of datalabel.

Inheritance
System.Object
ChartSubComponent
ChartDefaultFont
ChartDataLabelFont
Inherited Members
Namespace: Syncfusion.Blazor.Charts
Assembly: Syncfusion.Blazor.dll
Syntax
public class ChartDataLabelFont : ChartDefaultFont, ISubcomponentTracker, IChartDefaultFont

Constructors

ChartDataLabelFont()

Declaration
public ChartDataLabelFont()

Properties

Color

Gets or sets the color of the data label text in the SfChart.

Declaration
public override string Color { get; set; }
Property Value
Type Description
System.String

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

Use the Color property to change the font color of data labels in the SfChart series.

Examples
// The following example demonstrates how to set a custom color for data label text:
<SfChart>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@WeatherReports" XName="X" YName="Y">
            <ChartMarker>
                <ChartDataLabel Visible="true">
                    <ChartDataLabelFont Color="#c0faf4"></ChartDataLabelFont>
                </ChartDataLabel>
            </ChartMarker>
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>

FontFamily

Gets or sets the font family of the datalabel text in the SfChart.

Declaration
public override string FontFamily { get; set; }
Property Value
Type Description
System.String

A string representing the font family of the datalabel text. The default font family is determined by the SfChart theme. By default, the theme is set to Material with datalabel font family Roboto.
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 data label text:
<SfChart>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@WeatherReports" XName="X" YName="Y">
            <ChartMarker>
                <ChartDataLabel Visible="true">
                    <ChartDataLabelFont FontFamily="Arial"></ChartDataLabelFont>
                </ChartDataLabel>
            </ChartMarker>
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>

FontWeight

Gets or sets the font weight of the datalabel text in the SfChart.

Declaration
public override string FontWeight { get; set; }
Property Value
Type Description
System.String

A string representing the font weight of the datalabel text. The default font weight is determined by the SfChart theme. By default, the theme is set to Material with datalabel font weight of 400.
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 data label text:
<SfChart>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@WeatherReports" XName="X" YName="Y">
            <ChartMarker>
                <ChartDataLabel Visible="true">
                    <ChartDataLabelFont FontWeight="bold"></ChartDataLabelFont>
                </ChartDataLabel>
            </ChartMarker>
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>

Size

Gets or sets the size of the data label text in the SfChart.

Declaration
public override string Size { get; set; }
Property Value
Type Description
System.String

A string representing the font size of the datalabel text. The default size is determined by the SfChart theme. By default, the theme is set to Material with a datalabel text size of 12px.
Overrides
Remarks

Use the Size property to change the font size of data labels in the SfChart series. The size value accepts standard CSS font size specifications such as 'px', 'em', etc.

Examples
// The following example demonstrates how to set a custom font size for data label text:
<SfChart>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@WeatherReports" XName="X" YName="Y">
            <ChartMarker>
                <ChartDataLabel Visible="true">
                    <ChartDataLabelFont Size="20px"></ChartDataLabelFont>
                </ChartDataLabel>
            </ChartMarker>
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>