## Scrub Sparkline (S—056)

A KPI with an area sparkline you can scrub; the number, delta and date follow the cursor.

- URL: https://sundaeui.dev/components/scrub-sparkline
- Category: Cards & data visualization · Art direction: Refined
- Access: Sundae Pro (authenticated install)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/scrub-sparkline.json`
- Tags: kpi, chart, scrub, data, sparkline, analytics

A big headline number with a delta chip, over a smooth or stepped area chart.
Move across the chart (or use arrow keys) and a dot rides the line while the number, delta and date update.

### Usage

```tsx
import { ScrubSparkline } from '@/components/sundae/scrub-sparkline'

<ScrubSparkline label="Monthly revenue" points={values} labels={months} format={(n) => `$${n.toLocaleString()}`} />
```

### Props

- `label` (`string`, required): KPI name.
- `points` (`number[]`, required): Series values.
- `labels` (`string[]`, required): Label per point.
- `format` (`(n: number) => string`, default `toLocaleString`): Number formatter.
- `curve` (`'smooth' | 'step'`, default `'smooth'`): Line shape.
- `color` (`string`, default `'#4ade80'`): Line colour.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Dashboard KPI tiles where the trend matters as much as the number.

### When not to use

- Several series at once.

### Accessibility

- The chart is role="slider" over the points; aria-valuetext reads "Mar 2026: $48,210".
- Delta direction is shown by symbol and colour, not colour alone.
- Reduced motion removes dot easing.

### Keyboard

- ← / →: Previous / next point
- Home / End: First / last point