Class ChartCrosshairTextStyle

Provides option to cusomize the tooltip text style of the crosshair tooltip.

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

Constructors

ChartCrosshairTextStyle()

Declaration
public ChartCrosshairTextStyle()

Properties

Color

Gets or sets the color for the crosshair tooltip text.

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

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

The fill color accepts values in hex or rgba as a valid CSS color string.

Examples
// This example demonstrates how to enable the crosshair and customize the text color of the X-axis crosshair tooltip in a Chart.
<SfChart>
    <ChartPrimaryXAxis>
        <ChartAxisCrosshairTooltip Enable="true">
            <ChartCrosshairTextStyle Color="blue"  />
        </ChartAxisCrosshairTooltip>        
    </ChartPrimaryXAxis>
    <ChartCrosshairSettings Enable="true" />
    <ChartSeriesCollection>
        <ChartSeries DataSource="@Data" XName="XValue" YName="YValue">
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>

FontFamily

Gets or sets the font family for the crosshair tooltip text.

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

A string representing the font family for the crosshair 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

The font family can be customized to adhere to organizational typography standards or particular aesthetic choices within charts.

Examples
// This example demonstrates how to enable the crosshair and customize the font family of the X-axis crosshair tooltip in a Chart.
<SfChart>
    <ChartPrimaryXAxis>
        <ChartAxisCrosshairTooltip Enable="true">
            <ChartCrosshairTextStyle FontFamily="Arial" />
        </ChartAxisCrosshairTooltip>        
    </ChartPrimaryXAxis>
    <ChartCrosshairSettings Enable="true" />
    <ChartSeriesCollection>
        <ChartSeries DataSource="@Data" XName="XValue" YName="YValue">
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>

FontWeight

Gets or sets the font weight for the crosshair tooltip text.

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

A string representing the font weight for the crosshair 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 allows modification of text thickness across crosshair tooltips, offering enhanced visual emphasis according to user needs.

Examples
// This example demonstrates how to enable the crosshair and customize the text font weight of the X-axis crosshair tooltip in a Chart.
<SfChart>
    <ChartPrimaryXAxis>
        <ChartAxisCrosshairTooltip Enable="true">
            <ChartCrosshairTextStyle FontWeight="bold" />
        </ChartAxisCrosshairTooltip>        
    </ChartPrimaryXAxis>
    <ChartCrosshairSettings Enable="true" />
    <ChartSeriesCollection>
        <ChartSeries DataSource="@Data" XName="XValue" YName="YValue">
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>

Size

Gets or sets the font size for the crosshair tooltip text.

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

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

This property allows the customization of tooltip text size to ensure readability across devices with different screen resolutions.

Examples
// This example demonstrates how to enable the crosshair and customize the text size of the X-axis crosshair tooltip in a Chart.
<SfChart>
    <ChartPrimaryXAxis>
        <ChartAxisCrosshairTooltip Enable="true">
            <ChartCrosshairTextStyle Size="15px" />
        </ChartAxisCrosshairTooltip>        
    </ChartPrimaryXAxis>
    <ChartCrosshairSettings Enable="true" />
    <ChartSeriesCollection>
        <ChartSeries DataSource="@Data" XName="XValue" YName="YValue">
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>

Implements