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={300}
/>

<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={300}
/>

Press Enter to start editing

Stacking

Each bar series can get a stack property expecting 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={350}
/>

<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={350}
/>

Press Enter to start editing

Stacking strategy

You can use the stackOffset and stackOrder properties to define how the series will be stacked.

By default, they are stacked in the order you defined them, with positive values stacked above 0 and negative values stacked below 0.

For more information, see stacking docs.