# Source: https://mui.com/x/react-charts/bar-demo.md

---
title: Charts - Bar demos
productId: x-charts
components: BarChart, BarElement, BarPlot
---

# Charts - Bar demos

This page groups demos using bar charts.

## TinyBarChart

```tsx
import { ChartContainer } from '@mui/x-charts/ChartContainer';
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 (
    <ChartContainer
      width={500}
      height={300}
      series={[{ data: uData, label: 'uv', type: 'bar' }]}
      xAxis={[{ scaleType: 'band', data: xLabels }]}
    >
      <BarPlot />
    </ChartContainer>
  );
}

```

## SimpleBarChart

```tsx
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

```tsx
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

```tsx
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

```tsx
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

```tsx
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>
  );
}

```

## BiaxialBarChart

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

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 BiaxialBarChart() {
  return (
    <Box sx={{ width: '100%', height: 300 }}>
      <BarChart
        series={[
          {
            data: pData,
            label: 'pv',
            id: 'pvId',

            yAxisId: 'leftAxisId',
          },
          {
            data: uData,
            label: 'uv',
            id: 'uvId',
            yAxisId: 'rightAxisId',
          },
        ]}
        xAxis={[{ data: xLabels, height: 28 }]}
        yAxis={[
          { id: 'leftAxisId', width: 50 },
          { id: 'rightAxisId', position: 'right' },
        ]}
      />
    </Box>
  );
}

```

## Population pyramid

```tsx
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
import { BarChart } from '@mui/x-charts/BarChart';

const ageGroups = [
  '100+ yrs',
  '95-99 yrs',
  '90-94 yrs',
  '85-89 yrs',
  '80-84 yrs',
  '75-79 yrs',
  '70-74 yrs',
  '65-69 yrs',
  '60-64 yrs',
  '55-59 yrs',
  '50-54 yrs',
  '45-49 yrs',
  '40-44 yrs',
  '35-39 yrs',
  '30-34 yrs',
  '25-29 yrs',
  '20-24 yrs',
  '15-19 yrs',
  '10-14 yrs',
  '5-9 yrs',
  '0-4 yrs',
];

const male = [
  1139, 8291, 50323, 201240, 476263, 696606, 1012668, 1478069, 2042614, 2068112,
  2258061, 2061862, 2067075, 1808706, 1796779, 1933726, 1620461, 1183580, 1189663,
  1097221, 766227,
];

const female = [
  5770, 36739, 168603, 445118, 762492, 899933, 1152098, 1585781, 2105499, 2045845,
  2231491, 2000130, 1967944, 1673805, 1593655, 1695058, 1484776, 1104293, 1122176,
  1044863, 727814,
];

const numberFormatter = Intl.NumberFormat('en-US', {
  useGrouping: true,
});
const numberWithSuffixFormatter = new Intl.NumberFormat('en-US', {
  notation: 'compact',
});
const valueFormatter = (population: number | null) =>
  population ? `${numberFormatter.format(Math.abs(population))}` : '';

export default function PopulationPyramidBarChart() {
  return (
    <Stack width="100%" height={550} sx={{ mx: [0, 4] }}>
      <Typography
        variant="h6"
        component="span"
        textAlign="center"
        data-hide-overview
      >
        South Korea Population Pyramid - 2022
      </Typography>
      <BarChart
        layout="horizontal"
        margin={{ right: 0, left: 0 }}
        series={[
          {
            data: male.map((population) => -population),
            label: 'Male',
            type: 'bar',
            valueFormatter,
            stack: 'stack',
          },
          {
            data: female,
            label: 'Female',
            type: 'bar',
            valueFormatter,
            stack: 'stack',
          },
        ]}
        yAxis={[
          {
            data: ageGroups,
            width: 60,
            tickLabelInterval: (value, index) => index % 2 === 0,
            disableLine: true,
            disableTicks: true,
          },
        ]}
        xAxis={[
          {
            valueFormatter: (population: number) =>
              numberWithSuffixFormatter.format(Math.abs(population)),
            disableLine: true,
            disableTicks: true,
            domainLimit(min, max) {
              const extremum = Math.max(-min, max);
              const roundedExtremum = Math.ceil(extremum / 100_000) * 100_000;
              return { min: -roundedExtremum, max: roundedExtremum };
            },
          },
        ]}
        grid={{ vertical: true }}
      />
      <Typography variant="caption">Source: KOSIS</Typography>
    </Stack>
  );
}

```

## Waterfall Chart [<span class="plan-premium"></span>](/x/introduction/licensing/#premium-plan 'Premium plan')

The following demo shows a waterfall chart built using a [range bar chart](/x/react-charts/range-bar/).

```tsx
import * as React from 'react';
import { useTheme } from '@mui/system';
import { rainbowSurgePalette } from '@mui/x-charts/colorPalettes';
import { BarChartPremium } from '@mui/x-charts-premium/BarChartPremium';

const dollarFormatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  compactDisplay: 'short',
  currency: 'USD',
  maximumFractionDigits: 0,
});

export default function WaterfallChart() {
  const theme = useTheme();
  const palette = rainbowSurgePalette(theme.palette.mode);
  const blue = palette[0];
  const red = palette[2];
  const green = palette[4];

  return (
    <BarChartPremium
      xAxis={[
        {
          data: [
            'Revenue',
            'Product\nSales',
            'Services\nRevenue',
            'Cost of\nGoods Sold',
            'Marketing\nExpenses',
            'Operating\nExpenses',
            'Tax',
            'Net Profit',
          ],
        },
      ]}
      yAxis={[
        {
          width: 72,
          valueFormatter: (value: number) => dollarFormatter.format(value),
        },
      ]}
      series={[
        {
          type: 'rangeBar',
          data: [
            [0, 500_000],
            [500_000, 650_000],
            [650_000, 730_000],
            [730_000, 530_000],
            [530_000, 455_000],
            [455_000, 335_000],
            [335_000, 280_000],
            [0, 280_000],
          ],
          valueFormatter: (value) =>
            value === null ? null : dollarFormatter.format(value[1] - value[0]),
          colorGetter: (data) => {
            const value = data?.value;

            if (value == null || value[0] === 0) {
              return blue;
            }

            return value[1] - value[0] >= 0 ? green : red;
          },
        },
      ]}
      height={300}
    />
  );
}

```