Skip to content

🚀 Material UI and MUI X v9 are out! Check out the announcement blogpost.

Charts - Bar demos

Explore bar chart demos and examples.

TinyBarChart

Edit code

<ChartsContainer
  width={500}
  height={300}
  series={[{ data: uData, label: 'uv', type: 'bar' }]}
  xAxis={[{ scaleType: 'band', data: xLabels }]}
>
  <BarPlot />
</ChartsContainer>

<ChartsContainer
  width={500}
  height={300}
  series={[{ data: uData, label: 'uv', type: 'bar' }]}
  xAxis={[{ scaleType: 'band', data: xLabels }]}
>
  <BarPlot />
</ChartsContainer>

Press Enter to start editing

SimpleBarChart

pv
uv

Edit code

<BarChart
  series={[
    { data: pData, label: 'pv', id: 'pvId' },
    { data: uData, label: 'uv', id: 'uvId' },
  ]}
  xAxis={[{ data: xLabels, height: 28 }]}
  yAxis={[{ width: 50 }]}
/>

<BarChart
  series={[
    { data: pData, label: 'pv', id: 'pvId' },
    { data: uData, label: 'uv', id: 'uvId' },
  ]}
  xAxis={[{ data: xLabels, height: 28 }]}
  yAxis={[{ width: 50 }]}
/>

Press Enter to start editing

StackedBarChart

pv
uv

Edit code

<BarChart
  series={[
    { data: pData, label: 'pv', id: 'pvId', stack: 'total' },
    { data: uData, label: 'uv', id: 'uvId', stack: 'total' },
  ]}
  xAxis={[{ data: xLabels, height: 28 }]}
  yAxis={[{ width: 50 }]}
/>

<BarChart
  series={[
    { data: pData, label: 'pv', id: 'pvId', stack: 'total' },
    { data: uData, label: 'uv', id: 'uvId', stack: 'total' },
  ]}
  xAxis={[{ data: xLabels, height: 28 }]}
  yAxis={[{ width: 50 }]}
/>

Press Enter to start editing

MixedBarChart

pv
amt
uv

Edit code

<BarChart
  series={[
    { data: pData, label: 'pv', stack: 'stack1' },
    { data: amtData, label: 'amt' },
    { data: uData, label: 'uv', stack: 'stack1' },
  ]}
  xAxis={[{ data: xLabels, height: 28 }]}
  yAxis={[{ width: 50 }]}
/>

<BarChart
  series={[
    { data: pData, label: 'pv', stack: 'stack1' },
    { data: amtData, label: 'amt' },
    { data: uData, label: 'uv', stack: 'stack1' },
  ]}
  xAxis={[{ data: xLabels, height: 28 }]}
  yAxis={[{ width: 50 }]}
/>

Press Enter to start editing

PositiveAndNegativeBarChart

pv
uv

Edit code

<BarChart
  series={[
    { data: pData, label: 'pv' },
    { data: uData, label: 'uv' },
  ]}
  xAxis={[{ data: xLabels, height: 28 }]}
  yAxis={[{ width: 60, max: 10000 }]}
/>

<BarChart
  series={[
    { data: pData, label: 'pv' },
    { data: uData, label: 'uv' },
  ]}
  xAxis={[{ data: xLabels, height: 28 }]}
  yAxis={[{ width: 60, max: 10000 }]}
/>

Press Enter to start editing

BarChartStackedBySign

pv
uv

Edit code

<BarChart
  series={[
    { data: pData, label: 'pv', id: 'pvId', stack: 'stack1' },
    { data: uData, label: 'uv', id: 'uvId', stack: 'stack1' },
  ]}
  xAxis={[{ data: xLabels, height: 28 }]}
  yAxis={[{ width: 60 }]}
/>

<BarChart
  series={[
    { data: pData, label: 'pv', id: 'pvId', stack: 'stack1' },
    { data: uData, label: 'uv', id: 'uvId', stack: 'stack1' },
  ]}
  xAxis={[{ data: xLabels, height: 28 }]}
  yAxis={[{ width: 60 }]}
/>

Press Enter to start editing

BiaxialBarChart

pv
uv

Population pyramid

South Korea Population Pyramid - 2022

Male
Female

Source: KOSIS

Waterfall chart

The following demo shows a waterfall chart built with a range bar chart.

Histogram

A histogram displays the distribution of a numeric variable. The Bar Chart has no built-in histogram, so split your dataset into equal-width bins first (the demo includes a computeBins helper as a starting point), then plot the counts.

Use a band x-axis with categoryGapRatio and barGapRatio set to 0 so adjacent bars touch — what makes a histogram readable. To avoid artifacts between bars, set the shape-rendering to 'crispEdges' for the bars.

Frequency

Bin count

API

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

<BarChart />
<BarElement />
<BarPlot />