FunnelSeries API
Extended documentation for the FunnelSeries interface with detailed information on the module's properties and available APIs.
Demos
Import
import { FunnelSeries } from '@mui/x-charts-pro';
// or
import { FunnelSeries } from '@mui/x-charts-premium';The radius, in pixels, of the corners of the funnel sections.
Type:number
Default:8
The type of curve to use for the line. - `bump`: A curve that creates a smooth transition between points, with a bump in the middle. - `linear`: A straight line between points. - `linear-sharp`: A straight line between points, the smaller end of the funnel is a triangle. - `step`: A step line that creates a staircase effect. - `pyramid`: A pyramid shape that connects the points. - `step-pyramid`: A step line that creates a staircase effect, with a pyramid shape. Read more about curves at [curve interpolation](https://mui.com/x/react-charts/funnel/#curve-interpolation).
Type:'bump' | 'linear' | 'linear-sharp' | 'pyramid' | 'step' | 'step-pyramid'
Default:'linear'
Controls how the funnel is drawn. Ignored on `step` and `linear-sharp` curves. This affects different curves in different ways: - `bump` & `linear`: Controls which section is the "starting" point of the funnel. This section has straight edges. - `pyramid` & `step-pyramid`: Fully changes the direction of the shape.
Type:'auto' | 'decreasing' | 'increasing'
Default:'auto'
The scope to apply when the series is highlighted.
Type:{ highlight?: 'item' | 'none' | 'series', fade?: 'global' | 'none' | 'series' }
The label to display on the tooltip or the legend. It can be a string or a function.
Type:(location: 'legend' | 'tooltip') => string | string
Defines the mark type for the series. There is a default mark type for each series type.
Type:'circle' | 'line' | 'line+mark' | 'square' | ComponentClass<ChartsLabelCustomMarkProps, any> | FunctionComponent<ChartsLabelCustomMarkProps>
The label configuration for the funnel plot. Allows to customize the position and margin of the label that is displayed on the funnel sections. If set to `false`, the label will not be displayed.
Type:FunnelLabelOptions | ((item: FunnelItem) => FunnelLabelOptions | false) | false
Default:{ vertical: 'middle', horizontal: 'center' }
Formatter used to render values in tooltip or other data display.
Type:(value: { id?: number | string, value: number, label?: (location: 'legend' | 'section' | 'tooltip') => string | string, color?: string, labelMarkType?: 'circle' | 'line' | 'line+mark' | 'square' | ComponentClass<ChartsLabelCustomMarkProps, any> | FunctionComponent<ChartsLabelCustomMarkProps> }, context: { dataIndex: number }) => string
Defines if the funnel sections are filled or outlined. An `outlined` funnel will have a stroke around the sections and a translucent fill. A `filled` funnel will have a solid fill and no stroke.
Type:'filled' | 'outlined'
Default:'filled'