Skip to content
+

Charts - Pyramid 🧪

The pyramid chart is a variation of the funnel chart.

Pyramid Chart

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

Press Enter to start editing

Direction

The pyramid automatically changes its direction based on the provided data. If the values are sorted in ascending order, the pyramid is drawn upright. If the values are sorted in descending order, the pyramid is drawn upside-down.

In order to manually control the direction of the pyramid, the funnelDirection property can be set to either increasing or decreasing.

This is useful when the data is not sorted, or when you want to enforce a specific direction regardless of the data order.

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

<FunnelChart
  series={[{
    curve: 'pyramid',
    funnelDirection: 'auto',
    ...
  }]}
/>

Playground

Segments

By default, the pyramid chart creates segments with the same height. To make the segments proportional to the values, set categoryAxis.scaleType to linear. This adjusts the height of each segment based on the value it represents.

  • Above $30 a day
  • $10-$30 a day
  • $1.90-$10 a day
  • Below $1.90 a day
Press Enter to start editing

Styling

A pyramid chart can be styled in all the same ways as the funnel chart.

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

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

Playground

API

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