Funnel
Parent Components
Funnel consumes context provided by these components:
Props
dataKeyFunction | number | string
Decides how to extract the value of this Funnel 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 value of this Funnel.
activeShape(union of 5 variants)optional
This component is rendered when this graphical item is activated (could be by mouse hover, touch, keyboard, programmatically).
animationBeginnumberoptional
Specifies when the animation should begin, the unit of this option is ms.
DEFAULT:
400animationDurationnumberoptional
Specifies the duration of animation, the unit of this option is ms.
DEFAULT:
1500animationEasing"ease" | "ease-in" | "ease-in-out" | "ease-out" | "linear"optional
The type of easing function.
DEFAULT:
"ease"childrenReactNodeoptional
classNamestringoptional
dangerouslySetInnerHTMLObjectoptional
dataReadonlyArray<unknown>optional
The source data. Each element should be an object. The properties of each object represent the values of different data dimensions.
Use the
dataKeyprop to specify which properties to use.FORMAT:
data={[{ name: 'a', value: 12 }]} data={[{ label: 'foo', measurements: [5, 12] }]}hidebooleanoptional
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
includeHiddenprops of your XAxis/YAxis.DEFAULT:
falseidstringoptional
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.
isAnimationActive"auto" | false | trueoptional
If set false, animation of funnel will be disabled. If set "auto", the animation will be disabled in SSR and enabled in browser.
DEFAULT:
"auto"labelFunction | Props | ReactNode | false | trueoptional
lastShapeType"rectangle" | "triangle"optional
DEFAULT:
"triangle"legendType"circle" | "cross" | "diamond" | "line" | "none" | "plainline" | "rect" | "square" | "star" | "triangle" | "wye"optional
The type of icon in legend. If set to 'none', no legend item will be rendered.
DEFAULT:
"rect"nameKeyFunction | number | stringoptional
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.
DEFAULT:
"name"reversedbooleanoptional
DEFAULT:
falseshape(union of 5 variants)optional
If set a ReactElement, the shape of funnel can be customized. If set a function, the function will be called to render customized shape.
tooltipType"none"optional
onAbortAdaptChildReactEventHandler<P, T>optional
onAbortCaptureAdaptChildReactEventHandler<P, T>optional
onAnimationEndAdaptChildAnimationEventHandler<P, T>optional
The customized event handler of animation end
onAnimationEndCaptureAdaptChildAnimationEventHandler<P, T>optional
onAnimationIterationAdaptChildAnimationEventHandler<P, T>optional
onAnimationIterationCaptureAdaptChildAnimationEventHandler<P, T>optional
onAnimationStartAdaptChildAnimationEventHandler<P, T>optional
The customized event handler of animation start
onAnimationStartCaptureAdaptChildAnimationEventHandler<P, T>optional
onAuxClickAdaptChildMouseEventHandler<P, T>optional
onAuxClickCaptureAdaptChildMouseEventHandler<P, T>optional
onBeforeInputAdaptChildFormEventHandler<P, T>optional
onBeforeInputCaptureAdaptChildFormEventHandler<P, T>optional
onBlurAdaptChildFocusEventHandler<P, T>optional
onBlurCaptureAdaptChildFocusEventHandler<P, T>optional
onCanPlayAdaptChildReactEventHandler<P, T>optional
onCanPlayCaptureAdaptChildReactEventHandler<P, T>optional
onCanPlayThroughAdaptChildReactEventHandler<P, T>optional
onCanPlayThroughCaptureAdaptChildReactEventHandler<P, T>optional
onChangeAdaptChildFormEventHandler<P, T>optional
onChangeCaptureAdaptChildFormEventHandler<P, T>optional
onClickAdaptChildMouseEventHandler<P, T>optional
The customized event handler of click on the area in this group
onClickCaptureAdaptChildMouseEventHandler<P, T>optional
onCompositionEndAdaptChildCompositionEventHandler<P, T>optional
onCompositionEndCaptureAdaptChildCompositionEventHandler<P, T>optional
onCompositionStartAdaptChildCompositionEventHandler<P, T>optional
onCompositionStartCaptureAdaptChildCompositionEventHandler<P, T>optional
onCompositionUpdateAdaptChildCompositionEventHandler<P, T>optional
onCompositionUpdateCaptureAdaptChildCompositionEventHandler<P, T>optional
onContextMenuAdaptChildMouseEventHandler<P, T>optional
onContextMenuCaptureAdaptChildMouseEventHandler<P, T>optional
onCopyAdaptChildClipboardEventHandler<P, T>optional
onCopyCaptureAdaptChildClipboardEventHandler<P, T>optional
onCutAdaptChildClipboardEventHandler<P, T>optional
onCutCaptureAdaptChildClipboardEventHandler<P, T>optional
onDoubleClickAdaptChildMouseEventHandler<P, T>optional
onDoubleClickCaptureAdaptChildMouseEventHandler<P, T>optional
onDragAdaptChildDragEventHandler<P, T>optional
onDragCaptureAdaptChildDragEventHandler<P, T>optional
onDragEndAdaptChildDragEventHandler<P, T>optional
onDragEndCaptureAdaptChildDragEventHandler<P, T>optional
onDragEnterAdaptChildDragEventHandler<P, T>optional
onDragEnterCaptureAdaptChildDragEventHandler<P, T>optional
onDragExitAdaptChildDragEventHandler<P, T>optional
onDragExitCaptureAdaptChildDragEventHandler<P, T>optional
onDragLeaveAdaptChildDragEventHandler<P, T>optional
onDragLeaveCaptureAdaptChildDragEventHandler<P, T>optional
onDragOverAdaptChildDragEventHandler<P, T>optional
onDragOverCaptureAdaptChildDragEventHandler<P, T>optional
onDragStartAdaptChildDragEventHandler<P, T>optional
onDragStartCaptureAdaptChildDragEventHandler<P, T>optional
onDropAdaptChildDragEventHandler<P, T>optional
onDropCaptureAdaptChildDragEventHandler<P, T>optional
onDurationChangeAdaptChildReactEventHandler<P, T>optional
onDurationChangeCaptureAdaptChildReactEventHandler<P, T>optional
onEmptiedAdaptChildReactEventHandler<P, T>optional
onEmptiedCaptureAdaptChildReactEventHandler<P, T>optional
onEncryptedAdaptChildReactEventHandler<P, T>optional
onEncryptedCaptureAdaptChildReactEventHandler<P, T>optional
onEndedAdaptChildReactEventHandler<P, T>optional
onEndedCaptureAdaptChildReactEventHandler<P, T>optional
onErrorAdaptChildReactEventHandler<P, T>optional
onErrorCaptureAdaptChildReactEventHandler<P, T>optional
onFocusAdaptChildFocusEventHandler<P, T>optional
onFocusCaptureAdaptChildFocusEventHandler<P, T>optional
onGotPointerCaptureAdaptChildPointerEventHandler<P, T>optional
onGotPointerCaptureCaptureAdaptChildPointerEventHandler<P, T>optional
onInputAdaptChildFormEventHandler<P, T>optional
onInputCaptureAdaptChildFormEventHandler<P, T>optional
onInvalidAdaptChildFormEventHandler<P, T>optional
onInvalidCaptureAdaptChildFormEventHandler<P, T>optional
onKeyDownAdaptChildKeyboardEventHandler<P, T>optional
onKeyDownCaptureAdaptChildKeyboardEventHandler<P, T>optional
onKeyPressAdaptChildKeyboardEventHandler<P, T>optional
onKeyPressCaptureAdaptChildKeyboardEventHandler<P, T>optional
onKeyUpAdaptChildKeyboardEventHandler<P, T>optional
onKeyUpCaptureAdaptChildKeyboardEventHandler<P, T>optional
onLoadAdaptChildReactEventHandler<P, T>optional
onLoadCaptureAdaptChildReactEventHandler<P, T>optional
onLoadedDataAdaptChildReactEventHandler<P, T>optional
onLoadedDataCaptureAdaptChildReactEventHandler<P, T>optional
onLoadedMetadataAdaptChildReactEventHandler<P, T>optional
onLoadedMetadataCaptureAdaptChildReactEventHandler<P, T>optional
onLoadStartAdaptChildReactEventHandler<P, T>optional
onLoadStartCaptureAdaptChildReactEventHandler<P, T>optional
onLostPointerCaptureAdaptChildPointerEventHandler<P, T>optional
onLostPointerCaptureCaptureAdaptChildPointerEventHandler<P, T>optional
onMouseDownAdaptChildMouseEventHandler<P, T>optional
The customized event handler of mousedown on the area in this group
onMouseDownCaptureAdaptChildMouseEventHandler<P, T>optional
onMouseEnterAdaptChildMouseEventHandler<P, T>optional
The customized event handler of mouseenter on the area in this group
onMouseLeaveAdaptChildMouseEventHandler<P, T>optional
The customized event handler of mouseleave on the area in this group
onMouseMoveAdaptChildMouseEventHandler<P, T>optional
The customized event handler of mousemove on the area in this group
onMouseMoveCaptureAdaptChildMouseEventHandler<P, T>optional
onMouseOutAdaptChildMouseEventHandler<P, T>optional
The customized event handler of mouseout on the area in this group
onMouseOutCaptureAdaptChildMouseEventHandler<P, T>optional
onMouseOverAdaptChildMouseEventHandler<P, T>optional
The customized event handler of mouseover on the area in this group
onMouseOverCaptureAdaptChildMouseEventHandler<P, T>optional
onMouseUpAdaptChildMouseEventHandler<P, T>optional
The customized event handler of mouseup on the area in this group
onMouseUpCaptureAdaptChildMouseEventHandler<P, T>optional
onPasteAdaptChildClipboardEventHandler<P, T>optional
onPasteCaptureAdaptChildClipboardEventHandler<P, T>optional
onPauseAdaptChildReactEventHandler<P, T>optional
onPauseCaptureAdaptChildReactEventHandler<P, T>optional
onPlayAdaptChildReactEventHandler<P, T>optional
onPlayCaptureAdaptChildReactEventHandler<P, T>optional
onPlayingAdaptChildReactEventHandler<P, T>optional
onPlayingCaptureAdaptChildReactEventHandler<P, T>optional
onPointerCancelAdaptChildPointerEventHandler<P, T>optional
onPointerCancelCaptureAdaptChildPointerEventHandler<P, T>optional
onPointerDownAdaptChildPointerEventHandler<P, T>optional
onPointerDownCaptureAdaptChildPointerEventHandler<P, T>optional
onPointerEnterAdaptChildPointerEventHandler<P, T>optional
onPointerEnterCaptureAdaptChildPointerEventHandler<P, T>optional
onPointerLeaveAdaptChildPointerEventHandler<P, T>optional
onPointerLeaveCaptureAdaptChildPointerEventHandler<P, T>optional
onPointerMoveAdaptChildPointerEventHandler<P, T>optional
onPointerMoveCaptureAdaptChildPointerEventHandler<P, T>optional
onPointerOutAdaptChildPointerEventHandler<P, T>optional
onPointerOutCaptureAdaptChildPointerEventHandler<P, T>optional
onPointerOverAdaptChildPointerEventHandler<P, T>optional
onPointerOverCaptureAdaptChildPointerEventHandler<P, T>optional
onPointerUpAdaptChildPointerEventHandler<P, T>optional
onPointerUpCaptureAdaptChildPointerEventHandler<P, T>optional
onProgressAdaptChildReactEventHandler<P, T>optional
onProgressCaptureAdaptChildReactEventHandler<P, T>optional
onRateChangeAdaptChildReactEventHandler<P, T>optional
onRateChangeCaptureAdaptChildReactEventHandler<P, T>optional
onResetAdaptChildFormEventHandler<P, T>optional
onResetCaptureAdaptChildFormEventHandler<P, T>optional
onScrollAdaptChildUIEventHandler<P, T>optional
onScrollCaptureAdaptChildUIEventHandler<P, T>optional
onSeekedAdaptChildReactEventHandler<P, T>optional
onSeekedCaptureAdaptChildReactEventHandler<P, T>optional
onSeekingAdaptChildReactEventHandler<P, T>optional
onSeekingCaptureAdaptChildReactEventHandler<P, T>optional
onSelectAdaptChildReactEventHandler<P, T>optional
onSelectCaptureAdaptChildReactEventHandler<P, T>optional
onStalledAdaptChildReactEventHandler<P, T>optional
onStalledCaptureAdaptChildReactEventHandler<P, T>optional
onSubmitAdaptChildFormEventHandler<P, T>optional
onSubmitCaptureAdaptChildFormEventHandler<P, T>optional
onSuspendAdaptChildReactEventHandler<P, T>optional
onSuspendCaptureAdaptChildReactEventHandler<P, T>optional
onTimeUpdateAdaptChildReactEventHandler<P, T>optional
onTimeUpdateCaptureAdaptChildReactEventHandler<P, T>optional
onTouchCancelAdaptChildTouchEventHandler<P, T>optional
onTouchCancelCaptureAdaptChildTouchEventHandler<P, T>optional
onTouchEndAdaptChildTouchEventHandler<P, T>optional
onTouchEndCaptureAdaptChildTouchEventHandler<P, T>optional
onTouchMoveAdaptChildTouchEventHandler<P, T>optional
onTouchMoveCaptureAdaptChildTouchEventHandler<P, T>optional
onTouchStartAdaptChildTouchEventHandler<P, T>optional
onTouchStartCaptureAdaptChildTouchEventHandler<P, T>optional
onTransitionEndAdaptChildTransitionEventHandler<P, T>optional
onTransitionEndCaptureAdaptChildTransitionEventHandler<P, T>optional
onVolumeChangeAdaptChildReactEventHandler<P, T>optional
onVolumeChangeCaptureAdaptChildReactEventHandler<P, T>optional
onWaitingAdaptChildReactEventHandler<P, T>optional
onWaitingCaptureAdaptChildReactEventHandler<P, T>optional
onWheelAdaptChildWheelEventHandler<P, T>optional
onWheelCaptureAdaptChildWheelEventHandler<P, T>optional