Crosshair
Vertical crosshair line + dot tracking pointer position. Works standalone or syncs to ChartSyncProvider for stacked-chart broadcast. Ref-based — zero re-renders.
Primitive:
ChartCrosshairInteractive demo
Usage
import { ChartRoot, ChartCrosshair } from '@ramtt/charts'
<ChartRoot data={data} height={200}>
<ChartCrosshair tooltipMode="index" />
</ChartRoot>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| lineColor | string | '#71717a' | Crosshair line color |
| lineWidth | number | 0.5 | Line stroke width |
| dotRadius | number | 3 | Hover dot radius |
| dotColor | string | '#16a34a' | Hover dot color |
| tooltipMode | 'index' | 'nearest' | 'band' | 'index' | Tracking strategy |
| maxDistance | number | 50 | Max distance for nearest mode in px |
| onHover | (index: number | null) => void | — | Per-frame hover callback |