Charts - Lines

Line charts can express qualities about data, such as hierarchy, highlights, and comparisons.

Stacking

Each line series can get a stack property which expects a string value. Series with the same stack will be stacked on top of each other.

Stacking strategy

You can use the stackOffset and stackOrder properties to define how the series will be stacked.

By default, they are stacked in the order you defined them, with positive values stacked above 0 and negative values stacked below 0.

For more information, see stacking docs.

Partial data

Skip missing points

Line series can have fewer data points than the axis. You can handle lines with partial data or data starting at different points by providing null values.

By default, the tooltip does not show series if they have no value. To override this behavior, use the valueFormatter to return a string if the value is null or undefined.

When series data length is smaller than the axis one, overflowing values are undefined and not null.

The following code plots a line for x between 2 and 4.

For x<2, values are set to null and then not shown.
For x>4, values are set to undefined and then not shown.

<LineChart
  series={[{ data: [null, null, 10, 11, 12] }]}
  xAxis={[{ data: [0, 1, 2, 3, 4, 5, 6] }]}
/>

Line series accepts a connectNulls property which will continue the interpolation across points with a null value. This property can link two sets of points, with null data between them. However, it cannot extrapolate the curve before the first non-null data point or after the last one.

connectNulls

Click event

Line charts provides multiple click handlers:

onAreaClick for click on a specific area.
onLineClick for click on a specific line.
onMarkClick for click on a specific mark.
onAxisClick for a click anywhere in the chart

They all provide the following signature.

const clickHandler = (
  event, // The mouse event.
  params, // An object that identifies the clicked elements.
) => {};

Click on the chart

// Data from item click
// The data will appear here

// Data from axis click
// The data will appear here

Composition

If you're using composition, you can get those click event as follow. Notice that the onAxisClick will handle both bar and line series if you mix them.

import ChartsOnAxisClickHandler from '@mui/x-charts/ChartsOnAxisClickHandler';
// ...

<ChartContainer>
  {/* ... */}
  <ChartsOnAxisClickHandler onAxisClick={onAxisClick} />
  <LinePlot onItemClick={onLineClick} />
  <AreaPlot onItemClick={onAreaClick} />
</ChartContainer>;

Styling

Grid

You can add a grid in the background of the chart with the grid prop.

See Axis—Grid documentation for more information.

<LineChart
  dataset={dataset}
  xAxis={[{ dataKey: 'x' }]}
  series={[{ dataKey: 'y' }]}
  height={300}
  margin={{ left: 30, right: 30, top: 30, bottom: 30 }}
  grid={{ vertical: true, horizontal: true }}
/>

<LineChart
  dataset={dataset}
  xAxis={[{ dataKey: 'x' }]}
  series={[{ dataKey: 'y' }]}
  height={300}
  margin={{ left: 30, right: 30, top: 30, bottom: 30 }}
  grid={{ vertical: true, horizontal: true }}
/>

Press Enter to start editing

Color scale

As with other charts, you can modify the series color either directly, or with the color palette.

You can also modify the color by using axes colorMap which maps values to colors. The line charts use by priority:

The y-axis color
The x-axis color
The series color

Learn more about the colorMap properties in the Styling docs.

x-axis colorMap

y-axis colorMap

<ScatterChart
  /* ... */
  xAxis={[{}]}
  yAxis={[{
    colorMap: {
      type: 'piecewise',
      thresholds: [0, 10],
      colors: ['red', 'green', 'blue'],
    }
  }]}
/>

Interpolation

The interpolation between data points can be customized by the curve property. This property expects one of the following string values, corresponding to the interpolation method: 'catmullRom', 'linear', 'monotoneX', 'monotoneY', 'natural', 'step', 'stepBefore', 'stepAfter'.

This series property adds the option to control the interpolation of a series. Different series could even have different interpolations.

interpolation method

<LineChart
  series={[
    { curve: "linear", data: [0, 5, 2, 6, 3, 9.3] },
    { curve: "linear", data: [6, 3, 7, 9.5, 4, 2] },
  ]}
  {/* ... */}
/>

Baseline

The area chart draws a baseline on the Y axis 0. This is useful as a base value, but customized visualizations may require a different baseline.

To get the area filling the space above or below the line, set baseline to "min" or "max". It is also possible to provide a number value to fix the baseline at the desired position.

<LineChart
  xAxis={[{ data: [1, 2, 3, 5, 8, 10] }]}
  series={[
    {
      data: [2, -5.5, 2, -7.5, 1.5, 6],
      area: true,
      baseline: 'min',
    },
  ]}
  width={500}
  height={300}
/>

<LineChart
  xAxis={[{ data: [1, 2, 3, 5, 8, 10] }]}
  series={[
    {
      data: [2, -5.5, 2, -7.5, 1.5, 6],
      area: true,
      baseline: 'min',
    },
  ]}
  width={500}
  height={300}
/>

Press Enter to start editing

Optimization

To show mark elements, use showMark series property. It accepts a boolean or a callback. The next example shows how to use it to display only one mark every two data points.

When a value is highlighted, a mark is rendered for that given value. If the charts already have some marks (due to showMark=true) the highlight one will be on top of others.

This behavior can be removed with the disableHighlight series property or at the root of the line chart with a disableLineItemHighlight prop.

In this example, you have one mark for every value with an even index. The highlighted data has a mark regardless if it has an even or odd index.

<LineChart
  xAxis={[{ data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] }]}
  series={[
    {
      data: [2, 3, 5.5, 8.5, 1.5, 5, 1, 4, 3, 8],
      showMark: ({ index }) => index % 2 === 0,
    },
  ]}
  width={500}
  height={300}
/>

<LineChart
  xAxis={[{ data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] }]}
  series={[
    {
      data: [2, 3, 5.5, 8.5, 1.5, 5, 1, 4, 3, 8],
      showMark: ({ index }) => index % 2 === 0,
    },
  ]}
  width={500}
  height={300}
/>

Press Enter to start editing

CSS

Line plots are made of three elements named LineElement, AreaElement, and MarkElement. Each element can be selected with the CSS class name .MuiLineElement-root, .MuiAreaElement-root, or .MuiMarkElement-root.

If you want to select the element of a given series, you can use classes .MuiLineElement-series-<seriesId> with <seriesId> the id of the series you want to customize.

In the next example, each line style is customized with dashes, and marks are removed. The area of Germany's GDP also gets a custom gradient color. The definition of myGradient is passed as a children of the chart component.

sx={{
  '& .MuiLineElement-root': {
    strokeDasharray: '10 5',
    strokeWidth: 4,
  },
  '& .MuiAreaElement-series-Germany': {
    fill: "url('#myGradient')",
  },
}}

Animation

To skip animation at the creation and update of your chart, you can use the skipAnimation prop. When set to true it skips animation powered by @react-spring/web.

Charts containers already use the useReducedMotion() from @react-spring/web to skip animation according to user preferences.

// For a single component chart
<LineChart skipAnimation />

// For a composed chart
<ChartContainer>
  <LinePlot skipAnimation />
  <AreaPlot skipAnimation />
</ChartContainer>

skipAnimation

API

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

Charts - Lines

Basics

Data format

Using a dataset

Area

Stacking

Stacking strategy

Partial data

Skip missing points

Connect missing points

Click event

Composition

Styling

Grid

Color scale

Interpolation

Baseline

Optimization

CSS

Animation

API