Funnel

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

Usage

import { FunnelChart, Funnel } from 'recharts';

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

Props

dataKey · string | number | function · required

The key or getter function of a group of data which should be displayed in the funnel.

data · array

The source data which each element is an object.

nameKey · 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

fill · string · default: "#808080"

The fill color of trapezoids.

stroke · string · default: "#fff"

The stroke color of trapezoids.

strokeWidth · number | string

The width of the stroke.

shape · 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.

activeShape · ReactElement | function

This component is rendered when this graphical item is activated (could be by mouse hover, touch, keyboard, programmatically).

label · 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

hide · 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.

lastShapeType · 'triangle' | 'rectangle' · default: "triangle"

The shape type of the last trapezoid in the funnel.

reversed · boolean

If true, the funnel is rendered upside down.

legendType · LegendType · default: "rect"

The type of icon in legend. If set to ‘none’, no legend item will be rendered.

tooltipType · TooltipType

The type of tooltip item.

Animation props

isAnimationActive · 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.

animationBegin · number · default: "400"

Specifies when the animation should begin, the unit of this option is ms.

animationDuration · number · default: "1500"

Specifies the duration of animation, the unit of this option is ms.

animationEasing · AnimationTiming · default: "ease"

The type of easing function.

onAnimationStart · function

The customized event handler of animation start.

onAnimationEnd · function

The customized event handler of animation end.

Event handlers

onClick · function

The customized event handler of click on the area in this group.

(data: FunnelTrapezoidItem, index: number, e: React.MouseEvent) => void

onMouseDown · function

The customized event handler of mousedown on the area in this group.

onMouseUp · function

The customized event handler of mouseup on the area in this group.

onMouseMove · function

The customized event handler of mousemove on the area in this group.

onMouseOver · function

The customized event handler of mouseover on the area in this group.

onMouseOut · function

The customized event handler of mouseout on the area in this group.

onMouseEnter · function

The customized event handler of mouseenter on the area in this group.

onMouseLeave · function

The customized event handler of mouseleave on the area in this group.

Layout props

id · 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.

className · string

CSS class name for styling.

Source

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