## Range Line Chart (S—142)

A price chart card with 1D / 1W / 1M / 1Y tabs; the line morphs between ranges and a crosshair reads any point.

- URL: https://sundaeui.dev/components/range-line-chart
- 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/range-line-chart.json`
- Tags: stock, chart, price, line-chart, range-tabs, crosshair

Switching range morphs the existing path into the new one instead of redrawing, and the headline change re-computes for that period.
Hover or drag to move a crosshair; the big number and date follow it, then snap back to the latest value when you leave.

### Usage

```tsx
import { RangeLineChart } from '@/components/sundae/range-line-chart'

<RangeLineChart />
```

### Props

- `series` (`Record<string, number[]>`, required): Values per range key.
- `format` (`(n: number) => string`): Value formatter.
- `labels` (`Record<string, (i: number) => string>`): Point label per range.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Finance, analytics and pricing cards.

### When not to use

- Comparing several series: use a multi-line chart with a legend.

### Accessibility

- Range tabs are a radiogroup; the chart is an image with a summary of first, last and change.
- Arrow keys move the crosshair when the chart is focused.
- Reduced motion removes the movement and keeps every state change.

### Keyboard

- ← / →: Move crosshair