🚀 MUI X v6 is out! Discover what's new and get started now!

Charts - Bars

Bar charts express quantities through a bar's length, using a common baseline.

Basics

Bar charts series should contain a data property containing an array of values.

You can customize bar ticks with the xAxis. This axis might have scaleType='band' and its data should have the same length as your series.

<BarChart
  xAxis={[{ scaleType: 'band', data: ['group A', 'group B', 'group C'] }]}
  series={[{ data: [4, 3, 5] }, { data: [1, 6, 3] }, { data: [2, 5, 6] }]}
  width={500}
  height={400}
/>

<BarChart
  xAxis={[{ scaleType: 'band', data: ['group A', 'group B', 'group C'] }]}
  series={[{ data: [4, 3, 5] }, { data: [1, 6, 3] }, { data: [2, 5, 6] }]}
  width={500}
  height={400}
/>

Press Enter to start editing

Stacking

Each bar series can get a stack property which expects a string value. Series with the same stack will be stacked on top of each other.

<BarChart
  series={[
    { data: [3, 4, 1, 6, 5], stack: 'A', label: 'series A1' },
    { data: [4, 3, 1, 5, 8], stack: 'A', label: 'series A2' },
    { data: [4, 2, 5, 4, 1], stack: 'B', label: 'series B1' },
    { data: [2, 8, 1, 3, 1], stack: 'B', label: 'series B2' },
    { data: [10, 6, 5, 8, 9], label: 'series C1' },
  ]}
  width={600}
  height={500}
/>

<BarChart
  series={[
    { data: [3, 4, 1, 6, 5], stack: 'A', label: 'series A1' },
    { data: [4, 3, 1, 5, 8], stack: 'A', label: 'series A2' },
    { data: [4, 2, 5, 4, 1], stack: 'B', label: 'series B1' },
    { data: [2, 8, 1, 3, 1], stack: 'B', label: 'series B2' },
    { data: [10, 6, 5, 8, 9], label: 'series C1' },
  ]}
  width={600}
  height={500}
/>

Press Enter to start editing

Charts - Bars

Basics

Stacking

Stacking strategy 🚧