# FunnelChart

> Funnel and pyramid: stage widths follow the value, the outline stays continuous between stages, and the conversion rate between consecutive stages sits on the joint.

Source: https://ui.jcsoftdev.com/docs/components/funnel-chart

Funnel and pyramid: stage widths follow the value, the outline stays
continuous between stages, and the conversion rate between consecutive
stages sits on the joint. Vertical or horizontal, adapts to narrow
containers (labels shrink and truncate, tooltip carries the detail).

## Import

```ts
import { FunnelChart } from "@jcsoftdev/ui/charts";
```

Single-component entry points tree-shake to just this component: `@jcsoftdev/ui/charts/funnel-chart`.

## Usage

```tsx
<FunnelChart
  title="Embudo de reservas del mes"
  stages={bookings}
  variant="funnel"
  orientation="vertical"
  tapered
  neck={0.72}
  showConversion
  tone="categorical"
  gap={4}
  valueFormat="integer"
  tooltip
  loading={false}
  animate
  labels={spanishLabels}
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `title` * | `string` |  |  |
| `description` | `string` |  |  |
| `stages` * | `readonly FunnelDatum[]` |  | Stages in order: widest first. |
| `variant` | `"funnel" \| "pyramid"` | `"funnel"` | `funnel` narrows towards the last stage; `pyramid` tapers it to a point with the first stage as the base. |
| `orientation` | `"horizontal" \| "vertical"` | `"vertical"` |  |
| `tapered` | `boolean` | `true` | Trapezoid stages that narrow into the next one (default); `false` draws straight bars of each stage's own width. |
| `neck` | `number` | `0.72` | How far the last stage narrows, as a fraction of its width (funnel, tapered). |
| `showConversion` | `boolean` | `true` | Conversion % between consecutive stages. |
| `tone` | `"accent" \| "categorical"` | `"categorical"` | `categorical` colors each stage; `accent` fades one brand color. |
| `gap` | `number` | `4` | Space between stages, in pixels. |
| `height` | `number \| "fill"` |  |  |
| `aspectRatio` | `number` |  | Width / height ratio; sizes the drawing from the container width when `height` is not "fill". |
| `valueFormat` | `ValueFormat` |  |  |
| `tooltip` | `boolean` | `true` |  |
| `loading` | `boolean` | `false` |  |
| `animate` | `boolean` | `true` |  |
| `labels` | `Partial<FunnelLabels>` |  |  |
| `className` | `string` |  |  |

`*` marks a required prop.

## Storybook stories

- [Default](/storybook/?path=/story/charts-funnelchart--default)
- [Tapered](/storybook/?path=/story/charts-funnelchart--tapered)
- [Stepped](/storybook/?path=/story/charts-funnelchart--stepped)
- [Horizontal Tapered](/storybook/?path=/story/charts-funnelchart--horizontal-tapered)
- [Horizontal](/storybook/?path=/story/charts-funnelchart--horizontal)
- [Accent Ramp](/storybook/?path=/story/charts-funnelchart--accent-ramp)
- [Pyramid](/storybook/?path=/story/charts-funnelchart--pyramid)
- [Horizontal Pyramid](/storybook/?path=/story/charts-funnelchart--horizontal-pyramid)
- [Without Conversion](/storybook/?path=/story/charts-funnelchart--without-conversion)
- [Loading](/storybook/?path=/story/charts-funnelchart--loading)
- [Empty](/storybook/?path=/story/charts-funnelchart--empty)
- [Narrow](/storybook/?path=/story/charts-funnelchart--narrow)
- [Narrow Horizontal](/storybook/?path=/story/charts-funnelchart--narrow-horizontal)
- [Fill Parent](/storybook/?path=/story/charts-funnelchart--fill-parent)

## Source

`packages/ui/src/charts/funnel-chart/funnel-chart.tsx`