Class ChartTooltipTextStyle

Provides options to customize the text style of the tooltip.

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

Constructors

ChartTooltipTextStyle()

Declaration
public ChartTooltipTextStyle()

Properties

Color

Gets or sets the font color of the tooltip text.

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

A string specifying the color of the tooltip text. The default font color is determined by the chart's theme. By default, the theme is set to Material with a font color of rgba(249, 250, 251, 1).
Overrides
Remarks

Accepts a valid CSS color string in hex or rgba format.

Examples
// This example demonstrates how to customize the text color of a tooltip in a chart.
<SfChart>
    <ChartTooltipSettings Enable="true">
        <ChartTooltipTextStyle Color="green" />
    </ChartTooltipSettings>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@Data" XName="XValue" YName="YValue">
            <ChartMarker Visible="true" Width="10" Height="10" />
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>

FontFamily

Gets or sets the font family of the tooltip text.

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

A string representing the font family for the tooltip text. The default font family is determined by the chart's theme. By default, the theme is set to Material with the font family Roboto.
Overrides
Remarks

This property is used to customize the appearance of the tooltip text to match the overall design of the chart.

Examples
// This example demonstrates how to customize the text font family of a tooltip in a chart.
<SfChart>
    <ChartTooltipSettings Enable="true">
        <ChartTooltipTextStyle FontFamily="italic" />
    </ChartTooltipSettings>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@Data" XName="XValue" YName="YValue">
            <ChartMarker Visible="true" Width="10" Height="10" />
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>

FontWeight

Gets or sets the font weight of the tooltip text.

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

A string representing the font weight for the tooltip text. The default font weight is determined by the chart's theme. By default, the theme is set to Material with a font weight of 400.
Overrides
Remarks

This property is used to customize the font weight of the tooltip text.

Examples
// This example demonstrates how to customize the text font weight of a tooltip in a chart.
<SfChart>
    <ChartTooltipSettings Enable="true">
        <ChartTooltipTextStyle FontWeight="bold" />
    </ChartTooltipSettings>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@Data" XName="XValue" YName="YValue">
            <ChartMarker Visible="true" Width="10" Height="10" />
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>

Size

Gets or sets the font size for the tooltip text.

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

A string representing the font size for the tooltip text. The default font size for the tooltip text is 12px.
Overrides
Remarks

This property can be used to set the size of the tooltip text, allowing for better visibility and customization based on user preferences or design requirements.

Examples
// This example demonstrates how to customize the text size of a tooltip in a chart.
<SfChart>
    <ChartTooltipSettings Enable="true">
        <ChartTooltipTextStyle Size="15px" />
    </ChartTooltipSettings>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@Data" XName="XValue" YName="YValue">
            <ChartMarker Visible="true" Width="10" Height="10" />
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>

Implements