Class ChartAxisCrosshairTooltip

Provides option to customize the axis's crosshair tooltip.

Inheritance

System.Object

ChartSubComponent

ChartAxisCrosshairTooltip

Namespace: Syncfusion.Blazor.Charts

Assembly: Syncfusion.Blazor.dll

Syntax

public class ChartAxisCrosshairTooltip : ChartSubComponent, ISubcomponentTracker

Constructors

ChartAxisCrosshairTooltip()

Declaration

public ChartAxisCrosshairTooltip()

Properties

Enable

Gets or sets a value indicating whether the crosshair tooltip is enabled.

Declaration

public bool Enable { get; set; }

Property Value

Type	Description
System.Boolean	true if the crosshair tooltip is enabled; otherwise, false. The default value is false.

Remarks

This property can be used to enable or disable the crosshair tooltip on the chart's axis.

Examples

// This example demonstrates how to enable crosshair and display a tooltip for the X-axis in a Chart.
<SfChart>
    <ChartPrimaryXAxis>
        <ChartAxisCrosshairTooltip Enable="true"></ChartAxisCrosshairTooltip>
    </ChartPrimaryXAxis>
    <ChartCrosshairSettings Enable="true" />
    <ChartSeriesCollection>
        <ChartSeries DataSource="@Data" XName="XValue" YName="YValue">
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>

Fill

Gets or sets the fill color of the tooltip background.

Declaration

public string Fill { get; set; }

Property Value

Type	Description
System.String	A string representing the fill color of the tooltip background. The default fill color is determined by the chart's theme. By default, the theme is set to Material with a fill color of rgba(97, 97, 97, 1).

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 fill color of the X-axis tooltip in a Chart.
<SfChart>
    <ChartPrimaryXAxis>
        <ChartAxisCrosshairTooltip Enable="true" Fill="red"></ChartAxisCrosshairTooltip>
    </ChartPrimaryXAxis>
    <ChartCrosshairSettings Enable="true" />
    <ChartSeriesCollection>
        <ChartSeries DataSource="@Data" XName="XValue" YName="YValue">
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>

TextStyle

Gets or sets an instance of ChartCrosshairTextStyle which controls the customization of the text style of the crosshair tooltip.

Declaration

public ChartCrosshairTextStyle TextStyle { get; set; }

Property Value

Type	Description
ChartCrosshairTextStyle	An instance of ChartCrosshairTextStyle.

Remarks

Use this property to customize specific styling attributes, such as color and font properties, for the crosshair tooltip text.

Examples

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