# Funnel chart

A tapered conversion funnel with drop-off at every step, a device split that morphs the band, and dots that stream through it.

- ID: `funnel-chart`
- Import: `animui/funnel-chart`
- Category: Data
- Runtime exports: `FunnelChart`
- Declaration: `types/pro/funnel-chart.d.ts`
- Type provenance: reconstructed-from-docs-and-runtime
- Related: sankey-flow, bar-chart, waffle-chart, stepper

```tsx
import { FunnelChart } from 'animui/funnel-chart';
```

This import example is not a complete render recipe: read the declaration below and its local references for required props, data, callbacks and provider context. Use `animui info funnel-chart` to resolve the local declaration graph. Global setup is in `llms.txt`.

```ts
/** Reconstructed from saved Arc documentation and runtime binding evidence; original TypeScript source was unavailable. */
import type { ComponentType, ReactNode, CSSProperties, Ref, ButtonHTMLAttributes, HTMLAttributes, ReactElement } from 'react';

export interface FunnelStage { id: string; label: string; value: number; color?: string; }
export interface FunnelSegment { label: string; value: number; color?: string; }
export interface FunnelChartProps {
  stages: FunnelStage[];
  segments?: FunnelSegment[];
  label: string;
  unit?: string;
  view?: "total" | "split" | string;
  flow?: boolean;
  orientation?: "auto" | "horizontal" | "vertical";
  height?: number;
  formatValue?: (value: number) => string;
  activeIndex?: number | null;
  onActiveChange?: (index: number | null) => void;
  emptyLabel?: string;
  ref?: Ref<HTMLElement>;
  className?: string;
}

export declare const FunnelChart: ComponentType<FunnelChartProps>;

export default FunnelChart;
```