Class ChartDefaultFont

Provides options for customizing the text style of the chart component.

Inheritance
System.Object
ChartSubComponent
ChartDefaultFont
ChartAxisLabelStyle
ChartAxisMultiLevelLabelTextStyle
ChartAxisTitleStyle
ChartCrosshairTextStyle
ChartDataLabelFont
ChartLegendTextStyle
ChartStackLabelFont
ChartStriplineTextStyle
ChartSubTitleStyle
ChartTitleStyle
ChartTooltipTextStyle
Namespace: Syncfusion.Blazor.Charts
Assembly: Syncfusion.Blazor.dll
Syntax
public class ChartDefaultFont : ChartSubComponent, ISubcomponentTracker, IChartDefaultFont

Constructors

ChartDefaultFont()

Declaration
public ChartDefaultFont()

Properties

Color

Gets or sets the color for the text.

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

A string representing the color for the text. The default value is null.
Remarks

Accepts values in hex and rgba as a valid CSS color string.

Examples
// The following code demonstrates setting a custom font color for the text.
<SfChart Title="Olympic Medals" SubTitle="In the year 2023">
    <ChartTitleStyle Color="black"></ChartTitleStyle>
    <ChartSubTitleStyleColor="blue"></ChartSubTitleStyle>
    <ChartPrimaryXAxis Title="Country" ValueType="Syncfusion.Blazor.Charts.ValueType.Category">
        <ChartAxisCrosshairTooltip Enable="true">
            <ChartCrosshairTextStyle Color="red"></ChartCrosshairTextStyle>
        </ChartAxisCrosshairTooltip>
        <ChartAxisLabelStyle Color="green"></ChartAxisLabelStyle>
        <ChartAxisTitleStyle Color="red"></ChartAxisTitleStyle>
    </ChartPrimaryXAxis>
    <ChartPrimaryYAxis>
        <ChartStriplines>
            <ChartStripline Start="20" End="25" Color="red">
                <ChartStriplineTextStyle Color="red"/>
            </ChartStripline>
        </ChartStriplines>
    </ChartPrimaryYAxis>
    <ChartCrosshairSettings Enable="true"></ChartCrosshairSettings>
    <ChartTooltipSettings Enable="true">
        <ChartTooltipTextStyle Color="green"></ChartTooltipTextStyle>
    </ChartTooltipSettings>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@MedalDetails" Name="Gold" XName="Country" YName="Gold" Type="ChartSeriesType.Column">
            <ChartMarker>
                <ChartDataLabel Visible="true">
                    <ChartDataLabelFont Color="yellow"></ChartDataLabelFont>
                </ChartDataLabel>
            </ChartMarker>
        </ChartSeries>
    </ChartSeriesCollection>
    <ChartLegendSettings Visible="true">
        <ChartLegendTextStyle Color="blue"></ChartLegendTextStyle>
     </ChartLegendSettings>
</SfChart>

FontFamily

Gets or sets the font family for the text.

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

A string representing the font family for the text. The default value is "Segoe UI".
Remarks

This property specifies the font face used in rendering the text, offering a wide variety of standard and custom fonts.

Examples
// The following code demonstrates setting a custom font family for the text.
<SfChart Title="Olympic Medals" SubTitle="In the year 2023">
    <ChartTitleStyle FontFamily="Arial"></ChartTitleStyle>
    <ChartSubTitleStyle FontFamily="Arial"></ChartSubTitleStyle>
    <ChartPrimaryXAxis Title="Country" ValueType="Syncfusion.Blazor.Charts.ValueType.Category">
        <ChartAxisCrosshairTooltip Enable="true">
            <ChartCrosshairTextStyle FontFamily="Arial"></ChartCrosshairTextStyle>
        </ChartAxisCrosshairTooltip>
        <ChartAxisLabelStyle FontFamily="Arial"></ChartAxisLabelStyle>
        <ChartAxisTitleStyle FontFamily="Arial"></ChartAxisTitleStyle>
    </ChartPrimaryXAxis>
    <ChartPrimaryYAxis>
        <ChartStriplines>
            <ChartStripline Start="20" End="25" Color="red">
                <ChartStriplineTextStyle FontFamily="Arial" />
            </ChartStripline>
        </ChartStriplines>
    </ChartPrimaryYAxis>
    <ChartCrosshairSettings Enable="true"></ChartCrosshairSettings>
    <ChartTooltipSettings Enable="true">
        <ChartTooltipTextStyle FontFamily="Arial"></ChartTooltipTextStyle>
    </ChartTooltipSettings>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@MedalDetails" Name="Gold" XName="Country" YName="Gold" Type="ChartSeriesType.Column">
            <ChartMarker>
                <ChartDataLabel Visible="true">
                    <ChartDataLabelFont FontFamily="Arial"></ChartDataLabelFont>
                </ChartDataLabel>
            </ChartMarker>
        </ChartSeries>
    </ChartSeriesCollection>
    <ChartLegendSettings Visible="true">
        <ChartLegendTextStyle FontFamily="Arial"></ChartLegendTextStyle>
     </ChartLegendSettings>
</SfChart>

FontStyle

Gets or sets the font style for the text.

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

A string representing the font style for the text. The default value is "Normal".
Remarks

The font style can be used to apply settings like Italic or Oblique to the text, affecting its emphasis and legibility.

Examples
// The following code demonstrates setting a custom font style for the text.
<SfChart Title="Olympic Medals" SubTitle="In the year 2023">
    <ChartTitleStyle FontStyle="bold"></ChartTitleStyle>
    <ChartSubTitleStyle FontStyle="bold"></ChartSubTitleStyle>
    <ChartPrimaryXAxis Title="Country" ValueType="Syncfusion.Blazor.Charts.ValueType.Category">
        <ChartAxisCrosshairTooltip Enable="true">
            <ChartCrosshairTextStyle FontStyle="bold"></ChartCrosshairTextStyle>
        </ChartAxisCrosshairTooltip>
        <ChartAxisLabelStyle FontStyle="bold"></ChartAxisLabelStyle>
        <ChartAxisTitleStyle FontStyle="bold"></ChartAxisTitleStyle>
    </ChartPrimaryXAxis>
    <ChartPrimaryYAxis>
        <ChartStriplines>
            <ChartStripline Start="20" End="25" Color="red">
                <ChartStriplineTextStyle FontStyle="bold"/>
            </ChartStripline>
        </ChartStriplines>
    </ChartPrimaryYAxis>
    <ChartCrosshairSettings Enable="true"></ChartCrosshairSettings>
    <ChartTooltipSettings Enable="true">
        <ChartTooltipTextStyle FontStyle="bold"></ChartTooltipTextStyle>
    </ChartTooltipSettings>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@MedalDetails" Name="Gold" XName="Country" YName="Gold" Type="ChartSeriesType.Column">
            <ChartMarker>
                <ChartDataLabel Visible="true">
                    <ChartDataLabelFont FontStyle="bold"></ChartDataLabelFont>
                </ChartDataLabel>
            </ChartMarker>
        </ChartSeries>
    </ChartSeriesCollection>
    <ChartLegendSettings Visible="true">
        <ChartLegendTextStyle FontStyle="bold"></ChartLegendTextStyle>
     </ChartLegendSettings>
</SfChart>

FontWeight

Gets or sets the font weight for the text.

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

A string representing the font weight for the text. The default value is "Normal".
Remarks

Use this property to define the thickness of the text characters, providing levels of boldness.

Examples
// The following code demonstrates setting a custom font weight for the text.
<SfChart Title="Olympic Medals" SubTitle="In the year 2023">
    <ChartTitleStyle FontWeight="600"></ChartTitleStyle>
    <ChartSubTitleStyle FontWeight="600"></ChartSubTitleStyle>
    <ChartPrimaryXAxis Title="Country" ValueType="Syncfusion.Blazor.Charts.ValueType.Category">
        <ChartAxisCrosshairTooltip Enable="true">
            <ChartCrosshairTextStyle FontWeight="600"></ChartCrosshairTextStyle>
        </ChartAxisCrosshairTooltip>
        <ChartAxisLabelStyle FontWeight="600"></ChartAxisLabelStyle>
        <ChartAxisTitleStyle FontWeight="600"></ChartAxisTitleStyle>
    </ChartPrimaryXAxis>
    <ChartPrimaryYAxis>
        <ChartStriplines>
            <ChartStripline Start="20" End="25" Color="red">
                <ChartStriplineTextStyle FontWeight="600" />
            </ChartStripline>
        </ChartStriplines>
    </ChartPrimaryYAxis>
    <ChartCrosshairSettings Enable="true"></ChartCrosshairSettings>
    <ChartTooltipSettings Enable="true">
        <ChartTooltipTextStyle FontWeight="600"></ChartTooltipTextStyle>
    </ChartTooltipSettings>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@MedalDetails" Name="Gold" XName="Country" YName="Gold" Type="ChartSeriesType.Column">
            <ChartMarker>
                <ChartDataLabel Visible="true">
                    <ChartDataLabelFont FontWeight="600"></ChartDataLabelFont>
                </ChartDataLabel>
            </ChartMarker>
        </ChartSeries>
    </ChartSeriesCollection>
    <ChartLegendSettings Visible="true">
        <ChartLegendTextStyle FontWeight="600"></ChartLegendTextStyle>
     </ChartLegendSettings>
</SfChart>

Opacity

Gets or sets the opacity for the text.

Declaration
public double Opacity { get; set; }
Property Value
Type Description
System.Double

A double value representing the opacity for the text. The default value is 1.
Remarks

The opacity determines the transparency level of the text, where 1 is completely opaque, and 0 is fully transparent.

Examples
// The following code demonstrates setting a custom font opacity for the text.
<SfChart Title="Olympic Medals" SubTitle="In the year 2023">
    <ChartTitleStyle Opacity=0.5></ChartTitleStyle>
    <ChartSubTitleStyle Opacity=0.5></ChartSubTitleStyle>
    <ChartPrimaryXAxis Title="Country" ValueType="Syncfusion.Blazor.Charts.ValueType.Category">
        <ChartAxisCrosshairTooltip Enable="true">
            <ChartCrosshairTextStyle Opacity=0.5></ChartCrosshairTextStyle>
        </ChartAxisCrosshairTooltip>
        <ChartAxisLabelStyle Opacity=0.5></ChartAxisLabelStyle>
        <ChartAxisTitleStyle Opacity=0.5></ChartAxisTitleStyle>
    </ChartPrimaryXAxis>
    <ChartPrimaryYAxis>
        <ChartStriplines>
            <ChartStripline Start="20" End="25" Color="red">
                <ChartStriplineTextStyle Opacity=0.5 />
            </ChartStripline>
        </ChartStriplines>
    </ChartPrimaryYAxis>
    <ChartCrosshairSettings Enable="true"></ChartCrosshairSettings>
    <ChartTooltipSettings Enable="true">
        <ChartTooltipTextStyle Opacity=0.5></ChartTooltipTextStyle>
    </ChartTooltipSettings>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@MedalDetails" Name="Gold" XName="Country" YName="Gold" Type="ChartSeriesType.Column">
            <ChartMarker>
                <ChartDataLabel Visible="true">
                    <ChartDataLabelFont Opacity=0.5></ChartDataLabelFont>
                </ChartDataLabel>
            </ChartMarker>
        </ChartSeries>
    </ChartSeriesCollection>
    <ChartLegendSettings Visible="true">
        <ChartLegendTextStyle Opacity=0.5></ChartLegendTextStyle>
     </ChartLegendSettings>
</SfChart>

Size

Gets or sets the font size for the text.

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

A string representing the font size for the text. The default value is "16px".
Remarks

This property determines the size of the text, impacting its readability within the chart component context.

Examples
// The following code demonstrates setting a custom font size for the text.
<SfChart Title="Olympic Medals" SubTitle="In the year 2023">
    <ChartTitleStyle Size="16px"></ChartTitleStyle>
    <ChartSubTitleStyle Size="16px"></ChartSubTitleStyle>
    <ChartPrimaryXAxis Title="Country" ValueType="Syncfusion.Blazor.Charts.ValueType.Category">
        <ChartAxisCrosshairTooltip Enable="true">
            <ChartCrosshairTextStyle Size="16px"></ChartCrosshairTextStyle>
        </ChartAxisCrosshairTooltip>
        <ChartAxisLabelStyle Size="13px"></ChartAxisLabelStyle>
        <ChartAxisTitleStyle Size="16px"></ChartAxisTitleStyle>
    </ChartPrimaryXAxis>
    <ChartPrimaryYAxis>
        <ChartStriplines>
            <ChartStripline Start="20" End="25" Color="red">
                <ChartStriplineTextStyle Size="20px"/>
            </ChartStripline>
        </ChartStriplines>
    </ChartPrimaryYAxis>
    <ChartCrosshairSettings Enable="true"></ChartCrosshairSettings>
    <ChartTooltipSettings Enable="true">
        <ChartTooltipTextStyle Size="16px"></ChartTooltipTextStyle>
    </ChartTooltipSettings>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@MedalDetails" Name="Gold" XName="Country" YName="Gold" Type="ChartSeriesType.Column">
            <ChartMarker>
                <ChartDataLabel Visible="true">
                    <ChartDataLabelFont Size="16px"></ChartDataLabelFont>
                </ChartDataLabel>
            </ChartMarker>
        </ChartSeries>
    </ChartSeriesCollection>
    <ChartLegendSettings Visible="true">
        <ChartLegendTextStyle Size="14px"></ChartLegendTextStyle>
     </ChartLegendSettings>
</SfChart>

TextAlignment

Gets or sets the text alignment.

Declaration
public virtual Alignment TextAlignment { get; set; }
Property Value
Type Description
Alignment

One of the Alignment enumerations that specifies the alignment of the text. The options include:

  • Near - Aligns the text to the start of the container.
  • Far - Aligns the text to the far end of the container.
  • Center - Aligns the text to the center of the container.

The default value is Alignment.Center.
Remarks

Text alignment adjusts the horizontal placement of text within its container, affecting its position relative to other content.

Examples
// The following code demonstrates setting a text alignment for the subtitle text.
<SfChart Title="Olympic Medals" SubTitle="In the year 2023">
    <ChartTitleStyle TextAlignment="Alignment.Far"></ChartTitleStyle>
    <ChartSubTitleStyle TextAlignment="Alignment.Far"></ChartSubTitleStyle>
    <ChartPrimaryXAxis Title="Country" ValueType="Syncfusion.Blazor.Charts.ValueType.Category">
        <ChartAxisCrosshairTooltip Enable="true">
            <ChartCrosshairTextStyle TextAlignment="Alignment.Far"></ChartCrosshairTextStyle>
        </ChartAxisCrosshairTooltip>
        <ChartAxisLabelStyle TextAlignment="Alignment.Far"></ChartAxisLabelStyle>
        <ChartAxisTitleStyle TextAlignment="Alignment.Far"></ChartAxisTitleStyle>
    </ChartPrimaryXAxis>
    <ChartPrimaryYAxis>
        <ChartStriplines>
            <ChartStripline Start="20" End="25" Color="red">
                <ChartStriplineTextStyle TextAlignment="Alignment.Far"/>
            </ChartStripline>
        </ChartStriplines>
    </ChartPrimaryYAxis>
    <ChartCrosshairSettings Enable="true"></ChartCrosshairSettings>
    <ChartTooltipSettings Enable="true">
        <ChartTooltipTextStyle TextAlignment="Alignment.Far"></ChartTooltipTextStyle>
    </ChartTooltipSettings>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@MedalDetails" Name="Gold" XName="Country" YName="Gold" Type="ChartSeriesType.Column">
            <ChartMarker>
                <ChartDataLabel Visible="true">
                    <ChartDataLabelFont TextAlignment="Alignment.Far"></ChartDataLabelFont>
                </ChartDataLabel>
            </ChartMarker>
        </ChartSeries>
    </ChartSeriesCollection>
    <ChartLegendSettings Visible="true">
        <ChartLegendTextStyle TextAlignment="Alignment.Far"></ChartLegendTextStyle>
     </ChartLegendSettings>
</SfChart>

TextOverflow

Gets or sets the text overflow behavior to employ when the text exceeds the defined margins.

Declaration
public TextOverflow TextOverflow { get; set; }
Property Value
Type Description
TextOverflow

One of the TextOverflow enumeration that specifies the text overflow options. The options include:

  • TextOverflow.Trim: Trims the text if it exceeds the defined margins.
  • TextOverflow.Wrap: Wraps the text if it exceeds the defined margins.
  • TextOverflow.None: Shows the text as it is.
    The default value is TextOverflow.Trim.
Remarks

This property manages how text should behave when it's too long for its allocated space, either by trimming, wrapping, or displaying fully.

Examples
// The following code demonstrates setting a text alignment for the subtitle text.
<SfChart Title="Olympic Medals" SubTitle="In the year 2023">
    <ChartTitleStyle TextOverflow="TextOverflow.None"></ChartTitleStyle>
    <ChartSubTitleStyle TextOverflow="TextOverflow.None"></ChartSubTitleStyle>
    <ChartPrimaryXAxis Title="Country" ValueType="Syncfusion.Blazor.Charts.ValueType.Category">
        <ChartAxisCrosshairTooltip Enable="true">
            <ChartCrosshairTextStyle TextOverflow="TextOverflow.None"></ChartCrosshairTextStyle>
        </ChartAxisCrosshairTooltip>
        <ChartAxisLabelStyle TextOverflow="TextOverflow.None"></ChartAxisLabelStyle>
        <ChartAxisTitleStyle TextOverflow="TextOverflow.None"></ChartAxisTitleStyle>
    </ChartPrimaryXAxis>
    <ChartPrimaryYAxis>
        <ChartStriplines>
            <ChartStripline Start="20" End="25" Color="red">
                <ChartStriplineTextStyle TextOverflow="TextOverflow.None"/>
            </ChartStripline>
        </ChartStriplines>
    </ChartPrimaryYAxis>
    <ChartCrosshairSettings Enable="true"></ChartCrosshairSettings>
    <ChartTooltipSettings Enable="true">
        <ChartTooltipTextStyle TextOverflow="TextOverflow.None"></ChartTooltipTextStyle>
    </ChartTooltipSettings>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@MedalDetails" Name="Gold" XName="Country" YName="Gold" Type="ChartSeriesType.Column">
            <ChartMarker>
                <ChartDataLabel Visible="true">
                    <ChartDataLabelFont TextOverflow="TextOverflow.None"></ChartDataLabelFont>
                </ChartDataLabel>
            </ChartMarker>
        </ChartSeries>
    </ChartSeriesCollection>
    <ChartLegendSettings Visible="true">
        <ChartLegendTextStyle TextOverflow="TextOverflow.None"></ChartLegendTextStyle>
     </ChartLegendSettings>
</SfChart>