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'