FunnelChart API

API reference docs for the React FunnelChart component. Learn about the props, CSS, and other APIs of this exported module.

Demos

For examples and details on the usage of this React component, visit the component demo pages:

Charts - Export
Charts - Funnel 🧪

Import

import { FunnelChart } from '@mui/x-charts-pro/FunnelChart';
// or
import { FunnelChart } from '@mui/x-charts-pro';

Learn about the difference by reading this guide on minimizing bundle size.

Props

Props of the native component are also available.

Name	Type	Default	Description
series*	Array<object>	-	The series to display in the funnel chart. An array of FunnelSeriesType objects.
axisHighlight	{ x?: 'band' \| 'line' \| 'none', y?: 'band' \| 'line' \| 'none' }	-	The configuration of axes highlight. Default is set to 'band' in the bar direction. Depends on `layout` prop. See highlighting docs for more details.
categoryAxis	{ categories?: Array<string>, disableLine?: bool, disableTicks?: bool, id?: number \| string, position?: 'bottom' \| 'left' \| 'none' \| 'right' \| 'top', scaleType?: 'band', size?: number, tickLabelStyle?: object, tickSize?: number } \| { categories?: Array<string>, disableLine?: bool, disableTicks?: bool, id?: number \| string, position?: 'bottom' \| 'left' \| 'none' \| 'right' \| 'top', scaleType?: 'log', size?: number, tickLabelStyle?: object, tickSize?: number } \| { categories?: Array<string>, disableLine?: bool, disableTicks?: bool, id?: number \| string, position?: 'bottom' \| 'left' \| 'none' \| 'right' \| 'top', scaleType?: 'pow', size?: number, tickLabelStyle?: object, tickSize?: number } \| { categories?: Array<string>, disableLine?: bool, disableTicks?: bool, id?: number \| string, position?: 'bottom' \| 'left' \| 'none' \| 'right' \| 'top', scaleType?: 'sqrt', size?: number, tickLabelStyle?: object, tickSize?: number } \| { categories?: Array<string>, disableLine?: bool, disableTicks?: bool, id?: number \| string, position?: 'bottom' \| 'left' \| 'none' \| 'right' \| 'top', scaleType?: 'time', size?: number, tickLabelStyle?: object, tickSize?: number } \| { categories?: Array<string>, disableLine?: bool, disableTicks?: bool, id?: number \| string, position?: 'bottom' \| 'left' \| 'none' \| 'right' \| 'top', scaleType?: 'utc', size?: number, tickLabelStyle?: object, tickSize?: number } \| { categories?: Array<string>, disableLine?: bool, disableTicks?: bool, id?: number \| string, position?: 'bottom' \| 'left' \| 'none' \| 'right' \| 'top', scaleType?: 'linear', size?: number, tickLabelStyle?: object, tickSize?: number }	{ position: 'none' }	The configuration of the category axis.
colors	Array<string> \| func	rainbowSurgePalette	Color palette used to colorize multiple series.
disableAxisListener	bool	false	If `true`, the charts will not listen to the mouse move event. It might break interactive features, but will improve performance.
gap	number	0	The gap, in pixels, between funnel sections.
height	number	-	The height of the chart in px. If not defined, it takes the height of the parent element.
hideLegend	bool	false	If `true`, the legend is not rendered.
highlightedItem	{ dataIndex?: number, seriesId: number \| string }	-	The highlighted item. Used when the highlight is controlled.
id	string	-	This prop is used to help implement the accessibility logic. If you don't provide this prop. It falls back to a randomly generated id.
loading	bool	false	If `true`, a loading overlay is displayed.
localeText	object	-	Localized text for chart components.
margin	number \| { bottom?: number, left?: number, right?: number, top?: number }	-	The margin between the SVG and the drawing area. It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
onAxisClick	func	-	The function called for onClick events. The second argument contains information about all funnel elements at the current position. Signature:`function(event: MouseEvent, data: null \| ChartsAxisData) => void` `event` The mouse event recorded on the `<svg/>` element. `data` The data about the clicked axis and items associated with it.
onHighlightChange	func	-	The callback fired when the highlighted item changes. Signature:`function(highlightedItem: HighlightItemData \| null) => void` `highlightedItem` The newly highlighted item.
onItemClick	func	-	Callback fired when a funnel item is clicked. Signature:`function(event: React.MouseEvent, funnelItemIdentifier: FunnelItemIdentifier) => void` `event` The event source of the callback. `funnelItemIdentifier` The funnel item identifier.
skipAnimation	bool	-	If `true`, animations are skipped. If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
slotProps	object	{}	The props used for each component slot.
slots	object	{}	Overridable component slots. See Slots API below for more details.
width	number	-	The width of the chart in px. If not defined, it takes the width of the parent element.

The ref is forwarded to the root element.

Slots

Slot name	Default component	Description
axisLabel	`ChartsText`	Custom component for axis label.
axisLine	`'line'`	Custom component for the axis main line.
axisTick	`'line'`	Custom component for the axis tick.
axisTickLabel	`ChartsText`	Custom component for tick label.
baseButton
baseIconButton
funnelSection	`FunnelSection`	Custom component for funnel section.
funnelSectionLabel	`FunnelSectionLabel`	Custom component for funnel section label.
legend	`ChartsLegend`	Custom rendering of the legend.
loadingOverlay	`ChartsLoadingOverlay`	Overlay component rendered when the chart is in a loading state.
noDataOverlay	`ChartsNoDataOverlay`	Overlay component rendered when the chart has no data to display.
toolbar	`ChartsToolbar`	Custom component for the toolbar.
tooltip	`ChartsTooltipRoot`	Custom component for the tooltip popper.

Source code

If you did not find the information in this page, consider having a look at the implementation of the component for more detail.