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 should 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 property 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

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

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

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', 'bump' and 'step'.

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

Playground

curveType

bump

linear

step

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={['lightcoral', '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={['lightcoral', '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 },
  ]}
  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 },
  ]}
  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.