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

# Funnel

Renders a funnel chart showing values as trapezoids with decreasing widths.

## Usage

```tsx theme={null}
import { FunnelChart, Funnel } from 'recharts';

<FunnelChart width={600} height={300}>
  <Funnel data={data} dataKey="value" />
</FunnelChart>
```

## Props

<ParamField path="dataKey" type="string | number | function" required>
  The key or getter function of a group of data which should be displayed in the funnel.
</ParamField>

<ParamField path="data" type="array">
  The source data which each element is an object.
</ParamField>

<ParamField path="nameKey" type="string | number | function" default="name">
  Name represents each sector in the tooltip.
  This allows you to extract the name from the data:

  * `string`: the name of the field in the data object
  * `number`: the index of the field in the data
  * `function`: a function that receives the data object and returns the name
</ParamField>

<ParamField path="fill" type="string" default="#808080">
  The fill color of trapezoids.
</ParamField>

<ParamField path="stroke" type="string" default="#fff">
  The stroke color of trapezoids.
</ParamField>

<ParamField path="strokeWidth" type="number | string">
  The width of the stroke.
</ParamField>

<ParamField path="shape" type="ReactElement | function">
  If set a ReactElement, the shape of funnel can be customized.
  If set a function, the function will be called to render customized shape.
</ParamField>

<ParamField path="activeShape" type="ReactElement | function">
  This component is rendered when this graphical item is activated
  (could be by mouse hover, touch, keyboard, programmatically).
</ParamField>

<ParamField path="label" type="boolean | object | ReactElement | function">
  Renders labels for each trapezoid. Options:

  * `true`: renders default labels
  * `false`: no labels are rendered
  * `object`: the props of LabelList component
  * `ReactElement`: a custom label element
  * `function`: a render function of custom label
</ParamField>

<ParamField path="hide" type="boolean" default="false">
  Hides the whole graphical element when true.

  Hiding an element is different from removing it from the chart:
  Hidden graphical elements are still visible in Legend,
  and can be included in axis domain calculations,
  depending on `includeHidden` props of your XAxis/YAxis.
</ParamField>

<ParamField path="lastShapeType" type="'triangle' | 'rectangle'" default="triangle">
  The shape type of the last trapezoid in the funnel.
</ParamField>

<ParamField path="reversed" type="boolean">
  If true, the funnel is rendered upside down.
</ParamField>

<ParamField path="legendType" type="LegendType" default="rect">
  The type of icon in legend.  If set to 'none', no legend item will be rendered.
</ParamField>

<ParamField path="tooltipType" type="TooltipType">
  The type of tooltip item.
</ParamField>

### Animation props

<ParamField path="isAnimationActive" type="boolean | 'auto'" default="auto">
  If set false, animation of funnel will be disabled.
  If set "auto", the animation will be disabled in SSR and will respect the user's prefers-reduced-motion system preference for accessibility.
</ParamField>

<ParamField path="animationBegin" type="number" default="400">
  Specifies when the animation should begin, the unit of this option is ms.
</ParamField>

<ParamField path="animationDuration" type="number" default="1500">
  Specifies the duration of animation, the unit of this option is ms.
</ParamField>

<ParamField path="animationEasing" type="AnimationTiming" default="ease">
  The type of easing function.
</ParamField>

<ParamField path="onAnimationStart" type="function">
  The customized event handler of animation start.
</ParamField>

<ParamField path="onAnimationEnd" type="function">
  The customized event handler of animation end.
</ParamField>

### Event handlers

<ParamField path="onClick" type="function">
  The customized event handler of click on the area in this group.

  ```tsx theme={null}
  (data: FunnelTrapezoidItem, index: number, e: React.MouseEvent) => void
  ```
</ParamField>

<ParamField path="onMouseDown" type="function">
  The customized event handler of mousedown on the area in this group.
</ParamField>

<ParamField path="onMouseUp" type="function">
  The customized event handler of mouseup on the area in this group.
</ParamField>

<ParamField path="onMouseMove" type="function">
  The customized event handler of mousemove on the area in this group.
</ParamField>

<ParamField path="onMouseOver" type="function">
  The customized event handler of mouseover on the area in this group.
</ParamField>

<ParamField path="onMouseOut" type="function">
  The customized event handler of mouseout on the area in this group.
</ParamField>

<ParamField path="onMouseEnter" type="function">
  The customized event handler of mouseenter on the area in this group.
</ParamField>

<ParamField path="onMouseLeave" type="function">
  The customized event handler of mouseleave on the area in this group.
</ParamField>

### Layout props

<ParamField path="id" type="string">
  Unique identifier of this component.
  Used as an HTML attribute `id`, and also to identify this element internally.

  If undefined, Recharts will generate a unique ID automatically.
</ParamField>

<ParamField path="className" type="string">
  CSS class name for styling.
</ParamField>

## Source

`https://github.com/recharts/recharts/blob/main/src/cartesian/Funnel.tsx`