Charts - Funnel

Use funnel charts to show how quantities change through sequential steps, such as conversion or engagement stages.

Labels

The funnel shows labels by default (each section's value). Use the valueFormatter prop to format them.

Edit code

<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 sectionLabel property controls label position. It accepts an object with:

position.vertical: 'top', 'middle', or 'bottom'
position.horizontal: 'start', 'center', or 'end'
offset: space between the label and the section anchor. Pass a number for both axes, or { x?, y? }.

textAnchor and dominantBaseline are forwarded to the SVG text element. They behave like the SVG attributes of the same names, not like CSS properties, and the funnel chart only accepts the values below. See text-anchor and dominant-baseline on MDN for what each keyword does.

textAnchor: 'start', 'middle', or 'end'
dominantBaseline: 'auto', 'baseline', 'hanging', 'middle', 'central', 'text-after-edge', or 'text-before-edge'

Set sectionLabel to false to hide labels. You can also pass a function that receives the data object and returns the label config.

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

Use the curve property to choose the shape between sections. It accepts 'linear', 'linear-sharp', 'bump', 'pyramid', 'step', or 'step-pyramid'.

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

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

Gap

Use the gap property to set the space between sections (in pixels).

Edit code

<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

Use the borderRadius property to round section corners (in pixels).

The bump curve ignores border radius. The linear, linear-sharp, and pyramid curves respect it partly, depending on section angles. The step and step-pyramid curves respect it fully.

See Curve interpolation for how curve and borderRadius interact.

If gap is 0, radius applies only to corners not connected to another section. If gap is greater than 0, radius applies to all corners.

Variant

Use the variant property to switch between styles:

'filled' (default): solid fill, no stroke
'outlined': translucent fill with a colored stroke

The outlined variant is lighter visually.

Leads
Calls
Meetings
Deals

Edit code

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

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

Press Enter to start editing

Colors

You can customize funnel colors in two ways:

Pass a color palette. Each section uses a color from the palette.
Set a color property on each data object to override the palette for that section.

Edit code

<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

CSS

You can style the funnel with CSS. Each section group has a data-series attribute for targeting. Use :nth-child or :nth-of-type to target specific sections, as in the demo below.

Edit code

<FunnelChart
  {...funnelProps}
  sx={{
    [`[data-series="main"] .${funnelClasses.section}:nth-of-type(1)`]: {
      fill: 'url(#pattern)',
    },
  }}
>
  <defs>
    <pattern id="pattern" width="50" height="50" patternUnits="userSpaceOnUse">
      <rect width="100%" height="100%" fill="hotpink" />
      <circle fill="slateblue" cx="15" cy="15" r="10" />
      <circle fill="slateblue" cx="40" cy="40" r="10" />
    </pattern>
  </defs>
</FunnelChart>

<FunnelChart
  {...funnelProps}
  sx={{
    [`[data-series="main"] .${funnelClasses.section}:nth-of-type(1)`]: {
      fill: 'url(#pattern)',
    },
  }}
>
  <defs>
    <pattern id="pattern" width="50" height="50" patternUnits="userSpaceOnUse">
      <rect width="100%" height="100%" fill="hotpink" />
      <circle fill="slateblue" cx="15" cy="15" r="10" />
      <circle fill="slateblue" cx="40" cy="40" r="10" />
    </pattern>
  </defs>
</FunnelChart>

Press Enter to start editing

Multiple funnels

By default, multiple series are stacked. Pass multiple series and use different colors or styles to tell them apart. The first series is at the bottom, the last at the top.

Edit code

<FunnelChart
  sx={{ '& [data-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={{ '& [data-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

Set highlightScope.highlight to 'item' to highlight the hovered section. Set highlightScope.fade to 'global' to fade the other sections.

highlight

fade

Category axis

The funnel uses a category axis that follows the chart orientation. By default, the axis is hidden.

To show it, pass position and categories to the categoryAxis prop.

Edit code

<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, sections use the band scale (equal width). Set scaleType to 'linear' in the categoryAxis configuration to scale section width by value.

Edit code

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

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

Press Enter to start editing

Auto-sizing axis

You can set the axis size to 'auto' to automatically calculate the axis dimension based on tick label measurements. This is useful when your tick labels have varying lengths.

Use auto-sizing

API

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

Charts - Funnel

Overview

Basics

Legend

Pyramid chart

Labels

Styling labels

Positioning labels

Playground

Styling

Curve interpolation

Playground

Gap

Border radius

Variant

Colors

CSS

Multiple funnels

Highlight

Category axis

Scaled sections

Auto-sizing axis

API