Charts - Areas demos

This page groups demos using area charts.

SimpleAreaChart

import { LineChart, lineClasses } from '@mui/x-charts/LineChart';
import Box from '@mui/material/Box';

const margin = { right: 24 };
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 SimpleAreaChart() {
  return (
    <Box sx={{ width: '100%', height: 300 }}>
      <LineChart
        series={[{ data: uData, label: 'uv', area: true }]}
        xAxis={[{ scaleType: 'point', data: xLabels, height: 28 }]}
        sx={{
          [`& .${lineClasses.line}`]: {
            display: 'none',
          },
        }}
        margin={margin}
      />
    </Box>
  );
}

TinyAreaChart

import { ChartsContainer } from '@mui/x-charts/ChartsContainer';
import { AreaPlot } from '@mui/x-charts/LineChart';

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 TinyAreaChart() {
  return (
    <ChartsContainer
      width={500}
      height={300}
      series={[
        {
          data: uData,
          type: 'line',
          label: 'uv',
          area: true,
          stack: 'total',
        },
      ]}
      xAxis={[{ scaleType: 'point', data: xLabels }]}
    >
      <AreaPlot />
    </ChartsContainer>
  );
}

AreaChartConnectNulls

import Stack from '@mui/material/Stack';
import { LineChart } from '@mui/x-charts/LineChart';

const data = [4000, 3000, 2000, null, 1890, 2390, 3490];
const xData = ['Page A', 'Page B', 'Page C', 'Page D', 'Page E', 'Page F', 'Page G'];
const margin = { right: 24 };

export default function AreaChartConnectNulls() {
  return (
    <Stack sx={{ width: '100%', height: 400 }}>
      <LineChart
        xAxis={[{ data: xData, scaleType: 'point', height: 28 }]}
        series={[{ data, area: true }]}
        margin={margin}
      />
      <LineChart
        xAxis={[{ data: xData, scaleType: 'point', height: 28 }]}
        series={[{ data, area: true, connectNulls: true }]}
        margin={margin}
      />
    </Stack>
  );
}

AreaChartFillByValue

To display multiple colors in the area you can specify a gradient to fill the area (the same method can be applied on other SVG components).

You can pass this gradient definition as a children of the <LineChart /> and use sx to override the area fill property. To do so you will need to use the <linearGradient /> and <stop /> SVG elements.

The first part is to get the SVG total height. Which can be done with the useDrawingArea() hook. It's useful to define the <linearGradient /> as a vector that goes from the top to the bottom of our SVG container.

Then to define where the gradient should switch from one color to another, you can use the useYScale() hook to get the y coordinate of value 0.

API

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