## Price History (S—250)

A price chart with low and high markers, a draggable alert line, range tabs and a verdict on whether now is good.

- URL: https://sundaeui.dev/components/price-history
- 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/price-history.json`
- Tags: shopping, chart, tracker, history, price, alert

The line shows price over time with the lowest and highest points labelled. Drag the dashed alert line to set a target; the alert summary updates.
The verdict compares today to the range (“Near its low”) so the chart answers the real question at a glance.

### Usage

```tsx
import { PriceHistory } from '@/components/sundae/price-history'

<PriceHistory />
```

### Props

- `points` (`number[]`, required): Daily prices, oldest first.
- `currency` (`string`, default `'USD'`): Currency.
- `onAlert` (`(target: number) => void`): Alert set.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Shopping, travel fares, price trackers.

### When not to use

- Fast-moving markets: use a trading chart.

### Accessibility

- The chart has a text summary of low, high and current price.
- The alert handle is a slider with the target price in aria-valuetext.
- Reduced motion removes the movement and keeps every state change.

### Keyboard

- ↑ / ↓ on the alert: Move target by 1