Skip to content

Charts - Lines

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

Basics

Data format

To plot lines, a series must have a data property containing an array of numbers. This data array corresponds to y values.

By default, those y values will be associated with integers starting from 0 (0, 1, 2, 3, ...). To modify the x values, you should provide a xAxis with data property.

123456789100510
Press Enter to start editing

Area

You can fill the area of the line by setting the series' area property to true.

123456789100510
Press Enter to start editing

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.

199019921994199619982000200220042006200820102012201420162018020,00040,00060,00080,000100,000120,000140,000French GDP per capitaGerman GDP per capitaUK GDP per capita

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.

Styling

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'.

0123456789100246810

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,
  },
  '& .MuiMarkElement-root': {
    display: 'none',
  },
  '& .MuiAreaElement-series-Germany': {
    fill: "url('#myGradient')",
  },
}}
199019921994199619982000200220042006200820102012201420162018020,00040,00060,00080,000100,000120,000140,000