Charts - Bar demos

Explore bar chart demos and examples.

TinyBarChart

import { ChartsContainer } from '@mui/x-charts/ChartsContainer';
import { BarPlot } from '@mui/x-charts/BarChart';

const uData = [4000, 3000, 2000, 2780, 1890, 2390, 3490];
const xLabels = [
  'Page A',
  'Page B',
  'Page C',
  'Page D',
  'Page E',
  'Page F',
  'Page G',
];

export default function TinyBarChart() {
  return (
    <ChartsContainer
      width={500}
      height={300}
      series={[{ data: uData, label: 'uv', type: 'bar' }]}
      xAxis={[{ scaleType: 'band', data: xLabels }]}
    >
      <BarPlot />
    </ChartsContainer>
  );
}

SimpleBarChart

import Box from '@mui/material/Box';
import { BarChart } from '@mui/x-charts/BarChart';

const uData = [4000, 3000, 2000, 2780, 1890, 2390, 3490];
const pData = [2400, 1398, 9800, 3908, 4800, 3800, 4300];
const xLabels = [
  'Page A',
  'Page B',
  'Page C',
  'Page D',
  'Page E',
  'Page F',
  'Page G',
];

export default function SimpleBarChart() {
  return (
    <Box sx={{ width: '100%', height: 300 }}>
      <BarChart
        series={[
          { data: pData, label: 'pv', id: 'pvId' },
          { data: uData, label: 'uv', id: 'uvId' },
        ]}
        xAxis={[{ data: xLabels, height: 28 }]}
        yAxis={[{ width: 50 }]}
      />
    </Box>
  );
}

StackedBarChart

import Box from '@mui/material/Box';
import { BarChart } from '@mui/x-charts/BarChart';

const uData = [4000, 3000, 2000, 2780, 1890, 2390, 3490];
const pData = [2400, 1398, 9800, 3908, 4800, 3800, 4300];
const xLabels = [
  'Page A',
  'Page B',
  'Page C',
  'Page D',
  'Page E',
  'Page F',
  'Page G',
];

export default function StackedBarChart() {
  return (
    <Box sx={{ width: '100%', height: 300 }}>
      <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 }]}
      />
    </Box>
  );
}

MixedBarChart

import Box from '@mui/material/Box';
import { BarChart } from '@mui/x-charts/BarChart';

const uData = [4000, 3000, 2000, 2780, 1890, 2390, 3490];
const pData = [2400, 1398, 9800, 3908, 4800, 3800, 4300];
const amtData = [2400, 2210, 2290, 2000, 2181, 2500, 2100];

const xLabels = [
  'Page A',
  'Page B',
  'Page C',
  'Page D',
  'Page E',
  'Page F',
  'Page G',
];

export default function MixedBarChart() {
  return (
    <Box sx={{ width: '100%', height: 300 }}>
      <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 }]}
      />
    </Box>
  );
}

PositiveAndNegativeBarChart

import Box from '@mui/material/Box';
import { BarChart } from '@mui/x-charts/BarChart';

const uData = [4000, 3000, 2000, 2780, 1890, 2390, 3490];
const pData = [2400, 1398, -9800, 3908, 4800, -3800, 4300];

const xLabels = [
  'Page A',
  'Page B',
  'Page C',
  'Page D',
  'Page E',
  'Page F',
  'Page G',
];

export default function PositiveAndNegativeBarChart() {
  return (
    <Box sx={{ width: '100%', height: 300 }}>
      <BarChart
        series={[
          { data: pData, label: 'pv' },
          { data: uData, label: 'uv' },
        ]}
        xAxis={[{ data: xLabels, height: 28 }]}
        yAxis={[{ width: 60, max: 10000 }]}
      />
    </Box>
  );
}

BarChartStackedBySign

import Box from '@mui/material/Box';
import { BarChart } from '@mui/x-charts/BarChart';

const pData = [2400, 1398, -9800, 3908, 4800, -3800, 4300];
const uData = [4000, -3000, -2000, 2780, -1890, 2390, 3490];

const xLabels = [
  'Page A',
  'Page B',
  'Page C',
  'Page D',
  'Page E',
  'Page F',
  'Page G',
];

export default function BarChartStackedBySign() {
  return (
    <Box sx={{ width: '100%', height: 300 }}>
      <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 }]}
      />
    </Box>
  );
}

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.

MUI X Missing license key

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.