Crosshair in React Chart
Use the ChartCrosshair component to draw reference lines on hover or touch, helping users read values precisely along the axes.
Enable Crosshair
To enable the crosshair feature in a chart, set the enable property to true in the ChartCrosshair configuration. This displays reference lines that follow the pointer along the active axes, helping users accurately identify data points. By default, the crosshair is disabled.
Highlight Category
To shade the hovered category band on a category X-axis, set highlightCategory to true on the ChartCrosshair component. This works when the X-axis valueType is Category, making the entire category span easier to read.
Label
To display labels on the crosshair, set the enable property to true in the ChartCrosshairTooltip component for the required axis (e.g., primaryXAxis or primaryYAxis). You can customize the label’s appearance using the fill property for background color and textStyle for font styling.
Label Formatter
Use the formatter property in the ChartCrosshairTooltip component to customize crosshair label text. The formatter accepts a callback that returns a formatted string, allowing you to add prefixes or suffixes (such as units or currency), apply custom number/date formatting, or transform axis values for primaryXAxis or primaryYAxis.
Line Type
Control which crosshair lines are displayed by setting the lineType property in the ChartCrosshair component. You can choose Vertical, Horizontal, or Both to highlight the X-axis, Y-axis, or both axes respectively.
Snap
The snap property in the ChartCrosshair component controls pointer behavior. When set to true, the crosshair snaps to the nearest visible data point for accurate reading. When set to false, the crosshair moves freely along the axes without snapping.
Styles
Style the crosshair lines via the lineStyle property on the ChartCrosshair component. Configure: