## Funnel Chart (S—293)

A conversion funnel: stepped bars with drop-off between stages, toggle counts or percent, and tap a stage for detail.

- URL: https://sundaeui.dev/components/funnel-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/funnel-chart.json`
- Tags: drop-off, chart, growth, funnel, analytics, conversion

Each stage is a centred bar scaled to its count. Between stages the drop-off is stated as a number and a percent, which is what people actually read a funnel for.
Selecting a stage shows conversion from the top and from the previous step.

### Usage

```tsx
import { FunnelChart } from '@/components/sundae/funnel-chart'

<FunnelChart />
```

### Props

- `stages` (`{ name: string; value: number }[]`, required): Stages top to bottom.
- `unit` (`'count' | 'percent'`, default `'count'`): Label mode.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Product analytics, checkout and signup reports.

### When not to use

- Non-sequential steps: use bars.

### Accessibility

- Stages are a list of buttons with value and conversion in the label.
- The chart shape is decorative; numbers are text.
- Reduced motion removes the movement and keeps every state change.