> ## Documentation Index
> Fetch the complete documentation index at: https://docs.attio.com/llms.txt
> Use this file to discover all available pages before exploring further.

# <Chart.Funnel />

> Labeled steps narrowing from the first.

```js theme={"system"}
import {Chart} from "attio/client"
```

`Chart` is a namespace, not a renderable component. Use `Chart.Funnel`.

A funnel has no axes, so a step has no `x`, `y`, or `seriesId`. It is a labeled stage, the same
shape a pie slice takes. `format` and `currency` render the step values in the tooltip.

Steps draw in the order they are sent. Each step's conversion is measured against the one before
it, so the first step is the whole and always draws at 100%.

A funnel keeps a minimum of 120px per step and draws wider than its container rather than squeeze.
The extra width scrolls horizontally. Keep the steps to a handful.

See [Using charts](../../guides/using-charts) for height tokens, color tokens, `format`, and the
empty and error states.

## Example

```tsx TypeScript theme={"system"}
import {Chart} from "attio/client"

export function MyDialog() {
  return (
    <Chart.Funnel
      title="Pipeline"
      data={[
        {label: "Leads", value: 400},
        {label: "Qualified", value: 220, color: "yellow"},
        {label: "Proposal", value: 90, color: "red"},
        {label: "Won", value: 40, color: "green"},
      ]}
      format="number"
    />
  )
}
```

## Props

<ParamField path="data" type="Array<ChartFunnelStep>" required>
  Two or more steps, in the order they are passed through. Each step is `{label, value, color?}`.
  `label` is drawn above the stage. `color` defaults to `"blue"`.

  An empty list, or a first step whose value is `0`, draws **No data**.
</ParamField>

<ParamField path="format" type="'number' | 'compact' | 'percent' | 'currency' | 'date' | 'datetime'">
  How step values are rendered. See [Using charts](../../guides/using-charts#format).
</ParamField>

<ParamField path="currency" type="string">
  An ISO 4217 code, for example `"USD"`. Required when `format` is `"currency"`, and rejected for
  every other format.
</ParamField>

<ParamField path="title" type="string">
  A caption above the chart.
</ParamField>

<ParamField path="height" type="'small' | 'medium' | 'large' | 'extraLarge'">
  The height of the whole chart, including title.

  Defaults to `"medium"` (240px). See [Using charts](../../guides/using-charts#height).
</ParamField>