Class ChartAxisCrosshairTooltip

Provides option to customize the axis's crosshair tooltip.

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

Constructors

ChartAxisCrosshairTooltip()

Declaration
public ChartAxisCrosshairTooltip()

Properties

Enable

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

Declaration
[Parameter]
public bool Enable { get; set; }
Property Value
Type Description
bool

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
[Parameter]
public string Fill { get; set; }
Property Value
Type Description
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
[Parameter]
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>

Implements