Skip to content

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'

Properties

Data associated to the funnel section.

Type:Readonly<FunnelValueType[]>


Type:'funnel'


Optional

The radius, in pixels, of the corners of the funnel sections.

Type:number

Default:8


Optional

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'


Optional

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'


Optional

The scope to apply when the series is highlighted.

Type:HighlightScope


Optional

The id of this series.

Type:SeriesId


Optional

The label to display on the tooltip or the legend. It can be a string or a function.

Type:string | ((location: 'tooltip' | 'legend') => string)


Optional

Defines the mark type for the series.

There is a default mark type for each series type.

Type:ChartsLabelMarkType


Optional

Layout of the funnel.

Type:'horizontal' | 'vertical'

Default:'vertical'


Optional

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' }


Optional

Formatter used to render values in tooltip or other data display.

Type:SeriesValueFormatter<TValue>


Optional

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'


Optional

The id of the x-axis used to render the series.

Type:string


Optional

The id of the y-axis used to render the series.

Type:string