Charts - Funnel 🧪

Funnel charts allow to express quantity evolution along a process, such as audience engagement, population education levels or yields of multiple processes.

Basics

Funnel charts series must contain a data property containing an array of objects. Each object corresponds to a section of the funnel. It must contain a property value and can have other optional properties, like label and id.

<FunnelChart
  series={[
    {
      data: [{ value: 200 }, { value: 180 }, { value: 90 }, { value: 50 }],
    },
  ]}
  height={300}
/>

<FunnelChart
  series={[
    {
      data: [{ value: 200 }, { value: 180 }, { value: 90 }, { value: 50 }],
    },
  ]}
  height={300}
/>

Press Enter to start editing

Display legends

The funnel chart displays a legend by default. The only requirement is to provide a label value in the data objects.

To disable the legend, set the hideLegend prop to true.

Hide legend

<Controls hideLegend={hideLegend} setHideLegend={setHideLegend} />
<FunnelChart
  series={[
    {
      data: [
        { value: 200, label: 'A' },
        { value: 180, label: 'B' },
        { value: 90, label: 'C' },
        { value: 50, label: 'D' },
      ],
    },
  ]}
  hideLegend={hideLegend}
  {...funnelProps}
/>

<Controls hideLegend={hideLegend} setHideLegend={setHideLegend} />
<FunnelChart
  series={[
    {
      data: [
        { value: 200, label: 'A' },
        { value: 180, label: 'B' },
        { value: 90, label: 'C' },
        { value: 50, label: 'D' },
      ],
    },
  ]}
  hideLegend={hideLegend}
  {...funnelProps}
/>

Press Enter to start editing

Pyramid Chart

The pyramid chart is a variation of the funnel chart.

To create a pyramid chart, set the curve property to pyramid in the series.

<FunnelChart
  series={[
    {
      curve: 'pyramid',
      data: [{ value: 10 }, { value: 90 }, { value: 180 }, { value: 400 }],
    },
  ]}
  height={300}
/>

<FunnelChart
  series={[
    {
      curve: 'pyramid',
      data: [{ value: 10 }, { value: 90 }, { value: 180 }, { value: 400 }],
    },
  ]}
  height={300}
/>

Press Enter to start editing

Labels

The funnel chart displays labels by default. It shows the value of the data item in each section. To format the labels, a valueFormatter function can be provided.

<FunnelChart
  series={[
    {
      data: [
        { value: 200, label: 'A' },
        { value: 180, label: 'B' },
        { value: 90, label: 'C' },
        { value: 50, label: 'D' },
      ],
      valueFormatter: (item, context) =>
        `${item.label}${context.dataIndex} ${item.value}.00`,
    },
  ]}
  {...funnelProps}
/>

<FunnelChart
  series={[
    {
      data: [
        { value: 200, label: 'A' },
        { value: 180, label: 'B' },
        { value: 90, label: 'C' },
        { value: 50, label: 'D' },
      ],
      valueFormatter: (item, context) =>
        `${item.label}${context.dataIndex} ${item.value}.00`,
    },
  ]}
  {...funnelProps}
/>

Press Enter to start editing

Styling labels

The labels can be styled by using the funnelSectionClasses.label helper.

<FunnelChart
  series={[
    {
      data: [{ value: 200 }, { value: 180 }, { value: 90 }, { value: 50 }],
    },
  ]}
  sx={{
    [`& .${funnelSectionClasses.label}`]: {
      fill: 'white',
      textShadow: '1px 1px 2px rgba(0,0,0,0.5)',
    },
  }}
  {...funnelProps}
/>

<FunnelChart
  series={[
    {
      data: [{ value: 200 }, { value: 180 }, { value: 90 }, { value: 50 }],
    },
  ]}
  sx={{
    [`& .${funnelSectionClasses.label}`]: {
      fill: 'white',
      textShadow: '1px 1px 2px rgba(0,0,0,0.5)',
    },
  }}
  {...funnelProps}
/>

Press Enter to start editing

Positioning labels

The labels can be positioned relative to the section they represent. The sectionLabel property accepts an object with the following properties:

position.vertical: The vertical position of the label. It can be top, center or bottom.
position.horizontal: The horizontal position of the label. It can be start, middle or end.
margin: The margin between the label and the section.
dominantBaseline: The vertical alignment of the text. It can be auto, baseline, text-before-edge, text-after-edge, central, hanging, or middle.
textAnchor: The horizontal alignment of the text. It can be start, middle or end.

The sectionLabel property can be set to false to hide the labels. It also accepts a function that receives the data object and should return the label configuration.

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

<FunnelChart
  // Space to display the labels
  series={[
    {
      sectionLabel: {
        position: {
          horizontal: 'start',
          vertical: 'bottom'
        },
        textAnchor: 'start',
        dominantBaseline: 'middle',
        offset: {
          x: -10,
          y: 10
        }
      }
    }
  ]}
/>

Playground

horizontal

vertical

textAnchor

dominantBaseline

offsetX

offsetY

hide

Styling

Curve interpolation

The interpolation between data points can be customized by the curve property. This property expects one of the following string values, corresponding to the interpolation method: 'linear', 'linear-sharp', 'bump', 'pyramid', 'step' and 'step-pyramid'.

This series property adds the option to control the interpolation of a series.

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

<FunnelChart
  series={[{ 
    curve: 'bump',
    variant: 'filled',
    // borderRadius: 0,
  }]}
  gap={0}
/>

Gap

The gap between the sections can be customized by the gap property. It accepts a number that represents the gap in pixels.

<FunnelChart
  series={[
    {
      data: [{ value: 200 }, { value: 180 }, { value: 90 }, { value: 50 }],
    },
  ]}
  height={300}
  gap={10}
/>

<FunnelChart
  series={[
    {
      data: [{ value: 200 }, { value: 180 }, { value: 90 }, { value: 50 }],
    },
  ]}
  height={300}
  gap={10}
/>

Press Enter to start editing

Border radius

The border radius of the sections can be customized by the borderRadius property. It accepts a number that represents the radius in pixels.

The bump curve interpolation will not respect the border radius.
The linear, linear-sharp and pyramid curves respect the border radius to some extent due to the angle of the sections.
The step and step-pyramid curves respect the border radius.

To understand how the border radius interacts with the curve prop, see the curve interpolation example above.

The borderRadius property will also behave differently depending on whether the gap property is greater than 0.

If the gap is 0, the border radius will be applied to the corners of the sections that are not connected to another section.
If the gap is greater than 0, the border radius will be applied to all the corners of the sections.

Variant

The funnel sections can be displayed in two different styles using the variant property:

'filled' (default): Sections have a solid fill and no stroke.
'outlined': Sections have a translucent fill with a colored stroke around them.

The outlined variant creates a more lightweight visual style.

Leads
Calls
Meetings
Deals

<FunnelChart
  series={[
    {
      data,
      variant: 'outlined',
    },
  ]}
  height={300}
/>

<FunnelChart
  series={[
    {
      data,
      variant: 'outlined',
    },
  ]}
  height={300}
/>

Press Enter to start editing

Colors

The funnel colors can be customized in two ways.

You can provide a color palette. Each section of the funnel will be colored according to this palette.
You can provide a color property in data objects, which overrides the palette.

<FunnelChart
  colors={['hotpink', 'red']} // Use custom colors
  series={[
    {
      data: [
        { value: 20 }, // Get color from the palette
        { value: 10, color: 'slateblue' }, // Override palette color (red)
        { value: 5 },
      ],
    },
  ]}
  height={300}
/>

<FunnelChart
  colors={['hotpink', 'red']} // Use custom colors
  series={[
    {
      data: [
        { value: 20 }, // Get color from the palette
        { value: 10, color: 'slateblue' }, // Override palette color (red)
        { value: 5 },
      ],
    },
  ]}
  height={300}
/>

Press Enter to start editing

Multiple funnels

By default, multiple series are displayed on top of each other.

Simply provide multiple series to the funnel chart and make sure that they have different colors or styles to differentiate them.

The order of the series determines the display order. The first series is at the bottom and the last is at the top.

<FunnelChart
  sx={{ '.MuiFunnelSection-series-big': { filter: 'brightness(0.7)' } }}
  series={[
    {
      id: 'big',
      data: dataBig,
      sectionLabel: {
        position: { horizontal: 'end' },
        textAnchor: 'start',
        offset: { x: 10 },
      },
    },
    { data: dataSmall, curve: 'bump' },
  ]}
  height={300}
/>

<FunnelChart
  sx={{ '.MuiFunnelSection-series-big': { filter: 'brightness(0.7)' } }}
  series={[
    {
      id: 'big',
      data: dataBig,
      sectionLabel: {
        position: { horizontal: 'end' },
        textAnchor: 'start',
        offset: { x: 10 },
      },
    },
    { data: dataSmall, curve: 'bump' },
  ]}
  height={300}
/>

Press Enter to start editing

Highlight

The hovered element can be highlighted by setting highlightScope.highlight property to one of the possible values.

To fade elements which are not hovered, set the highlightScope.fade property.

highlight

fade

Category axis

The funnel chart uses a category axis as the default axis. This axis always follows the orientation of the chart.

The funnel chart does not display an axis by default. To display a category axis, pass a position and a list of categories to the categoryAxis props.

<FunnelChart
  series={[populationByEducationLevelPercentageSeriesLabeled]}
  categoryAxis={{
    categories: ['First', 'Second', 'Third', 'Fourth', 'Fifth'],
    position: 'left',
    disableLine: true,
    disableTicks: true,
    size: 60,
  }}
  {...funnelProps}
/>

<FunnelChart
  series={[populationByEducationLevelPercentageSeriesLabeled]}
  categoryAxis={{
    categories: ['First', 'Second', 'Third', 'Fourth', 'Fifth'],
    position: 'left',
    disableLine: true,
    disableTicks: true,
    size: 60,
  }}
  {...funnelProps}
/>

Press Enter to start editing

Scaled sections

By default, the sections have the same size because they use the band scale type. A linear scale, is also available, and will scale the the sections based on their value. To do so, set the scaleType property to linear in the categoryAxis.

<FunnelChart
  series={[populationByEducationLevelPercentageSeriesLabeled]}
  categoryAxis={{ scaleType: 'linear' }}
  {...funnelProps}
/>

<FunnelChart
  series={[populationByEducationLevelPercentageSeriesLabeled]}
  categoryAxis={{ scaleType: 'linear' }}
  {...funnelProps}
/>

Press Enter to start editing

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.