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'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.
Type:FunnelCurveType
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:'increasing' | 'decreasing' | 'auto'
Default:'auto'
The label to display on the tooltip or the legend. It can be a string or a function.
Type:string | ((location: 'tooltip' | 'legend') => string)
Defines the mark type for the series.
There is a default mark type for each series type.
Type:ChartsLabelMarkType
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:SeriesValueFormatter<TValue>
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'