Value tracker
Animated horizontal reference line with a left-edge value pill that follows the hovered data value. Ref-based, fades on mouse leave.
Primitive:
ChartValueTrackerInteractive demo
Usage
import { ChartRoot, ChartBar, ChartValueTracker } from '@ramtt/charts'
<ChartRoot data={data} height={200}>
<ChartBar />
<ChartValueTracker formatValue={(v) => `${v}%`} color="var(--chart-1)" />
</ChartRoot>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| formatValue | (v: number) => string | — | Pill label formatter (default: toLocaleString) |
| color | string | 'var(--chart-1)' | Line + pill color |