Class ChartCrosshairSettings

Provides option to customize the crosshair for the charts.

Inheritance

System.Object

ChartSubComponent

ChartCrosshairSettings

Namespace: Syncfusion.Blazor.Charts

Assembly: Syncfusion.Blazor.dll

Syntax

public class ChartCrosshairSettings : ChartSubComponent, ISubcomponentTracker

Constructors

ChartCrosshairSettings()

Declaration

public ChartCrosshairSettings()

Properties

DashArray

Gets or sets the dasharray for the crosshair.

Declaration

public string DashArray { get; set; }

Property Value

Type	Description
System.String	A string representing the dasharray for the crosshair. The default value is an empty string.

Remarks

This property allows customization of the crosshair line by specifying a dash pattern.

Examples

// This example demonstrates how to enable crosshair in a Chart and apply a dash pattern to its line.
<SfChart>
    <ChartCrosshairSettings Enable="true" DashArray="5,3" />
    <ChartSeriesCollection>
        <ChartSeries DataSource="@Data" XName="XValue" YName="YValue">
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>

Enable

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

Declaration

public bool Enable { get; set; }

Property Value

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

Remarks

This property determines if the crosshair will be displayed on the chart when hovering over data points.

Examples

// This example demonstrates how to enable the crosshair in a Chart to display data point indicators on hover.
<SfChart>
    <ChartCrosshairSettings Enable="true" />
    <ChartSeriesCollection>
        <ChartSeries DataSource="@Data" XName="XValue" YName="YValue">
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>

HighlightCategory

Gets or sets a value indicating whether the entire category range is highlighted when hovered over.

Declaration

public bool HighlightCategory { get; set; }

Property Value

Type	Description
System.Boolean	true to highlight the entire category range on hover; false otherwise. The default value is false.

Remarks

This property is applicable only to category axes.

Examples

// This example demonstrates how to enable the crosshair and highlight the entire category when hovering over data points.
<SfChart>
    <ChartCrosshairSettings Enable="true" HighlightCategory="true" />
    <ChartSeriesCollection>
        <ChartSeries DataSource="@Data" XName="XValue" YName="YValue">
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>

Line

Gets or sets an instance of ChartCrosshairLine which controls the customization of the crosshair line of the chart.

Declaration

public ChartCrosshairLine Line { get; set; }

Property Value

Type	Description
ChartCrosshairLine	The default value is an instance of ChartCrosshairLine.

Remarks

Use this property to define specific styling attributes for the crosshair line, such as color and width.

Examples

// This example demonstrates how to enable crosshair in a Chart and customize its line width.
<SfChart>
    <ChartCrosshairSettings Enable="true">
        <ChartCrosshairLine Width="2" Color="blue"></ChartCrosshairLine>
    </ChartCrosshairSettings>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@Data" XName="XValue" YName="YValue">
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>

LineType

Gets or sets the line type for the crosshair.

Declaration

public LineType LineType { get; set; }

Property Value

Type	Description
LineType	One of the LineType enumerations that specifies the type of the crosshair line. The options include: None: Hides both vertical and horizontal crosshair lines. Both: Shows both vertical and horizontal crosshair lines. Vertical: Shows the vertical line. Horizontal: Shows the horizontal line. The default mode is LineType.Both.

Remarks

This property determines how the crosshair line is displayed on the chart, allowing for customization based on user preferences.

Examples

// This example demonstrates how to enable the crosshair in a Chart and display it as a vertical line.
<SfChart>
    <ChartCrosshairSettings Enable="true" LineType="LineType.Vertical" />
    <ChartSeriesCollection>
        <ChartSeries DataSource="@Data" XName="XValue" YName="YValue">
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>

SnapToData

Enables or disables snapping of the horizontal crosshair to the nearest data point.

Declaration

public bool SnapToData { get; set; }

Property Value

Type	Description
System.Boolean	A boolean value indicating whether snapping is enabled. The default is false.

Remarks

Setting this property to true aligns the horizontal crosshair with the nearest data point for improved precision.