---
title: "FunnelChart"
description: "Where a process narrows, stage by stage, widest first. Each stage shows its value; the tooltip adds its share of the first stage."
---

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

# FunnelChart

## From contact to visit

```tsx
import { ChartPanel, FunnelChart } from '@arbol-ai/ui/charts';

<ChartPanel note="24% of the contacts attended an appointment" title="Conversion funnel">
  <FunnelChart
    aria-label="Conversion from contact to visit"
    description="1,240 contacted, 812 answered, 356 booked and 298 attended."
    stages={[
      { label: 'Contacted', value: 1240 },
      { label: 'Answered', value: 812 },
      { label: 'Booked', value: 356 },
      { label: 'Attended', value: 298 },
    ]}
  />
</ChartPanel>
```

## Source

The examples above are [`src/charts/funnel-chart.examples.tsx`](https://github.com/getarbol/project-arbol-ui/blob/main/src/charts/funnel-chart.examples.tsx), which the library's tests render too.

Source: https://epidermis.getarbol.com/components/charts/funnel-chart/index.mdx