Charts - Line demos

Demos that use line charts for basic plots, live data, reference lines, and custom styling.

SimpleLineChart

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

const margin = { right: 24 };
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 SimpleLineChart() {
  return (
    <Box sx={{ width: '100%', height: 300 }}>
      <LineChart
        series={[
          { data: pData, label: 'pv' },
          { data: uData, label: 'uv' },
        ]}
        xAxis={[{ scaleType: 'point', data: xLabels, height: 28 }]}
        yAxis={[{ width: 50 }]}
        margin={margin}
      />
    </Box>
  );
}

TinyLineChart

DashedLineChart

BiaxialLineChart

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

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 BiaxialLineChart() {
  return (
    <Box sx={{ width: '100%', height: 300 }}>
      <LineChart
        series={[
          { data: pData, label: 'pv', yAxisId: 'leftAxisId' },
          { data: uData, label: 'uv', yAxisId: 'rightAxisId' },
        ]}
        xAxis={[{ scaleType: 'point', data: xLabels, height: 28 }]}
        yAxis={[
          { id: 'leftAxisId', width: 50 },
          { id: 'rightAxisId', position: 'right' },
        ]}
      />
    </Box>
  );
}

LineChartWithReferenceLines

LineChartConnectNulls

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

const margin = { right: 24 };
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'];
export default function LineChartConnectNulls() {
  return (
    <Stack sx={{ width: '100%', height: 400 }}>
      <LineChart
        xAxis={[{ data: xData, scaleType: 'point', height: 28 }]}
        series={[{ data, showMark: true }]}
        margin={margin}
      />
      <LineChart
        xAxis={[{ data: xData, scaleType: 'point', height: 28 }]}
        series={[{ data, connectNulls: true, showMark: true }]}
        margin={margin}
      />
    </Stack>
  );
}

CustomLabelLineChart

import Box from '@mui/material/Box';
import type { MarkElementProps } from '@mui/x-charts/LineChart';
import { LineChart } from '@mui/x-charts/LineChart';

const margin = { right: 24 };
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',
];

function CustomMark(props: MarkElementProps) {
  const { x, y, color } = props;

  return (
    <g>
      <circle cx={x} cy={y} r={4} fill={color || 'currentColor'} />
      <text
        x={x}
        y={Number(y) - 12}
        style={{
          textAnchor: 'middle',
          dominantBaseline: 'auto',
          fill: color || 'currentColor',
          fontWeight: 'bold',
          fontSize: 12,
        }}
      >
        {pData[props.dataIndex].toString()}
      </text>
    </g>
  );
}

export default function CustomLabelChart() {
  return (
    <Box sx={{ width: '100%', height: 300 }}>
      <LineChart
        series={[{ data: pData, label: 'pv', showMark: true }]}
        xAxis={[{ scaleType: 'point', data: xLabels }]}
        yAxis={[{ width: 50 }]}
        margin={margin}
        slots={{
          mark: CustomMark,
        }}
      />
    </Box>
  );
}

Line chart with live data

Line with forecast

To show that parts of the data have different meanings, you can style each part differently.

In the demo below, a dotted line indicates estimated or predicted values. Set the slots.line prop to a custom component that renders the default line twice.

The first path is clipped to show known values (from the left of the chart up to the limit).
The second path is clipped to show predictions (from the limit to the right of the chart) with dash styling.

An uncertainty area illustrates the forecast uncertainty.

CustomLineMarks

Using a shape other than "circle" renders a <path /> instead of a <circle /> for mark elements. That change can reduce rendering performance (for example, around 50 ms to render 1,000 marks).

Larger interaction area

A line highlights when the pointer hovers over it, but the interaction area is narrow. Until a built-in solution exists, you can define a larger hit area with slots.

Use two paths: a thin visible one for the line and a wider invisible one for pointer events.

When lines cross, the highlighted series is the last one defined in the slots, not necessarily the one closest to the pointer.

Show highlight area

API

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