# Source: https://mui.com/x/api/charts/line-chart.md

# LineChart API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Charts - Areas demos](/x/react-charts/areas-demo/)
- [Charts - Label](/x/react-charts/label/)
- [Charts - Line demos](/x/react-charts/line-demo/)
- [Charts - Lines](/x/react-charts/lines/)

## Import

```jsx
import { LineChart } from '@mui/x-charts/LineChart';
// or
import { LineChart } from '@mui/x-charts';
// or
import { LineChart } from '@mui/x-charts-pro';
// or
import { LineChart } from '@mui/x-charts-premium';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| series | `Array<object>` | - | Yes |  |
| axisHighlight | `{ x?: 'band' \| 'line' \| 'none', y?: 'band' \| 'line' \| 'none' }` | `{ x: 'line' }` | No |  |
| brushConfig | `{ enabled?: bool, preventHighlight?: bool, preventTooltip?: bool }` | - | No |  |
| colors | `Array<string> \| func` | `rainbowSurgePalette` | No |  |
| dataset | `Array<object>` | - | No |  |
| disableAxisListener | `bool` | `false` | No |  |
| disableLineItemHighlight | `bool` | - | No |  |
| experimentalFeatures | `{ preferStrictDomainInLineCharts?: bool }` | - | No |  |
| grid | `{ horizontal?: bool, vertical?: bool }` | - | No |  |
| height | `number` | - | No |  |
| hiddenItems | `Array<{ dataIndex?: number, seriesId?: number \| string, type: 'line' }>` | - | No |  |
| hideLegend | `bool` | - | No |  |
| highlightedAxis | `Array<{ axisId: number \| string, dataIndex: number }>` | - | No |  |
| highlightedItem | `{ dataIndex?: number, seriesId: number \| string }` | - | No |  |
| id | `string` | - | No |  |
| initialHiddenItems | `Array<{ dataIndex?: number, seriesId?: number \| string, type: 'line' }>` | - | No |  |
| loading | `bool` | `false` | No |  |
| localeText | `object` | - | No |  |
| margin | `number \| { bottom?: number, left?: number, right?: number, top?: number }` | - | No |  |
| onAreaClick | `func` | - | No |  |
| onAxisClick | `function(event: MouseEvent, data: null \| ChartsAxisData) => void` | - | No |  |
| onHiddenItemsChange | `function(hiddenItems: Array<VisibilityIdentifier>) => void` | - | No |  |
| onHighlightChange | `function(highlightedItem: HighlightItemData \| null) => void` | - | No |  |
| onHighlightedAxisChange | `function(axisItems: Array<AxisItemIdentifier>) => void` | - | No |  |
| onLineClick | `func` | - | No |  |
| onMarkClick | `func` | - | No |  |
| onTooltipItemChange | `function(tooltipItem: SeriesItemIdentifier<TSeries> \| null) => void` | - | No |  |
| showToolbar | `bool` | `false` | No |  |
| skipAnimation | `bool` | `false` | No |  |
| slotProps | `object` | `{}` | No |  |
| slots | `object` | `{}` | No |  |
| tooltipItem | `{ dataIndex?: number, seriesId: number \| string, type: 'line' }` | - | No |  |
| width | `number` | - | No |  |
| xAxis | `Array<{ axis?: 'x', barGapRatio?: number, categoryGapRatio?: number, classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date \| number \| string> } \| { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, groups?: Array<{ getValue: func, tickLabelStyle?: object, tickSize?: number }>, height?: number, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, offset?: number, ordinalTimeTicks?: Array<'biweekly' \| 'days' \| 'hours' \| 'months' \| 'quarterly' \| 'weeks' \| 'years' \| { format: func, getTickNumber: func, isTick: func }>, position?: 'bottom' \| 'none' \| 'top', reverse?: bool, scaleType?: 'band', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func } \| { axis?: 'x', classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date \| number \| string> } \| { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, groups?: Array<{ getValue: func, tickLabelStyle?: object, tickSize?: number }>, height?: number, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, offset?: number, ordinalTimeTicks?: Array<'biweekly' \| 'days' \| 'hours' \| 'months' \| 'quarterly' \| 'weeks' \| 'years' \| { format: func, getTickNumber: func, isTick: func }>, position?: 'bottom' \| 'none' \| 'top', reverse?: bool, scaleType?: 'point', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func } \| { axis?: 'x', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, height?: number, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number, min?: number, offset?: number, position?: 'bottom' \| 'none' \| 'top', reverse?: bool, scaleType?: 'log', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func } \| { axis?: 'x', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, constant?: number, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, height?: number, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number, min?: number, offset?: number, position?: 'bottom' \| 'none' \| 'top', reverse?: bool, scaleType?: 'symlog', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func } \| { axis?: 'x', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, height?: number, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number, min?: number, offset?: number, position?: 'bottom' \| 'none' \| 'top', reverse?: bool, scaleType?: 'pow', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func } \| { axis?: 'x', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, height?: number, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number, min?: number, offset?: number, position?: 'bottom' \| 'none' \| 'top', reverse?: bool, scaleType?: 'sqrt', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func } \| { axis?: 'x', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, height?: number, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number \| { valueOf: func }, min?: number \| { valueOf: func }, offset?: number, position?: 'bottom' \| 'none' \| 'top', reverse?: bool, scaleType?: 'time', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func } \| { axis?: 'x', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, height?: number, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number \| { valueOf: func }, min?: number \| { valueOf: func }, offset?: number, position?: 'bottom' \| 'none' \| 'top', reverse?: bool, scaleType?: 'utc', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func } \| { axis?: 'x', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, height?: number, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number, min?: number, offset?: number, position?: 'bottom' \| 'none' \| 'top', reverse?: bool, scaleType?: 'linear', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func }>` | - | No |  |
| yAxis | `Array<{ axis?: 'y', barGapRatio?: number, categoryGapRatio?: number, classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date \| number \| string> } \| { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, groups?: Array<{ getValue: func, tickLabelStyle?: object, tickSize?: number }>, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, offset?: number, ordinalTimeTicks?: Array<'biweekly' \| 'days' \| 'hours' \| 'months' \| 'quarterly' \| 'weeks' \| 'years' \| { format: func, getTickNumber: func, isTick: func }>, position?: 'left' \| 'none' \| 'right', reverse?: bool, scaleType?: 'band', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func, width?: number } \| { axis?: 'y', classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date \| number \| string> } \| { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, groups?: Array<{ getValue: func, tickLabelStyle?: object, tickSize?: number }>, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, offset?: number, ordinalTimeTicks?: Array<'biweekly' \| 'days' \| 'hours' \| 'months' \| 'quarterly' \| 'weeks' \| 'years' \| { format: func, getTickNumber: func, isTick: func }>, position?: 'left' \| 'none' \| 'right', reverse?: bool, scaleType?: 'point', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func, width?: number } \| { axis?: 'y', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number, min?: number, offset?: number, position?: 'left' \| 'none' \| 'right', reverse?: bool, scaleType?: 'log', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func, width?: number } \| { axis?: 'y', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, constant?: number, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number, min?: number, offset?: number, position?: 'left' \| 'none' \| 'right', reverse?: bool, scaleType?: 'symlog', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func, width?: number } \| { axis?: 'y', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number, min?: number, offset?: number, position?: 'left' \| 'none' \| 'right', reverse?: bool, scaleType?: 'pow', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func, width?: number } \| { axis?: 'y', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number, min?: number, offset?: number, position?: 'left' \| 'none' \| 'right', reverse?: bool, scaleType?: 'sqrt', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func, width?: number } \| { axis?: 'y', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number \| { valueOf: func }, min?: number \| { valueOf: func }, offset?: number, position?: 'left' \| 'none' \| 'right', reverse?: bool, scaleType?: 'time', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func, width?: number } \| { axis?: 'y', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number \| { valueOf: func }, min?: number \| { valueOf: func }, offset?: number, position?: 'left' \| 'none' \| 'right', reverse?: bool, scaleType?: 'utc', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func, width?: number } \| { axis?: 'y', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number, min?: number, offset?: number, position?: 'left' \| 'none' \| 'right', reverse?: bool, scaleType?: 'linear', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func, width?: number }>` | - | No |  |

> **Note**: The `ref` is forwarded to the root element (SVGSVGElement).

> Any other props supplied will be provided to the root element (native element).

## Slots

| Name | Default | Class | Description |
|------|---------|-------|-------------|
| area | `AnimatedArea` | - | The component that renders the area. |
| axisLabel | `ChartsText` | - | Custom component for axis label. |
| axisLine | `'line'` | - | Custom component for the axis main line. |
| axisTick | `'line'` | - | Custom component for the axis tick. |
| axisTickLabel | `ChartsText` | - | Custom component for tick label. |
| baseButton | `undefined` | - |  |
| baseIconButton | `undefined` | - |  |
| legend | `ChartsLegend` | - | Custom rendering of the legend. |
| line | `LineElementPath` | - | The component that renders the line. |
| lineHighlight | `undefined` | - |  |
| loadingOverlay | `ChartsLoadingOverlay` | - | Overlay component rendered when the chart is in a loading state. |
| mark | `undefined` | - |  |
| noDataOverlay | `ChartsNoDataOverlay` | - | Overlay component rendered when the chart has no data to display. |
| toolbar | `ChartsToolbar` | - | Custom component for the toolbar. |
| tooltip | `ChartsTooltipRoot` | - | Custom component for the tooltip popper. |

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-charts/src/LineChart/LineChart.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-charts/src/LineChart/LineChart.tsx)