Skip to content
🚀 MUI X v6 is out! Discover what's new and get started now!
Edit this page

LineChart API

API reference docs for the React LineChart component. Learn about the props, CSS, and other APIs of this exported module.

Demos

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

    Import

    import { LineChart } from '@mui/x-charts';
    You can learn about the difference by reading this guide on minimizing bundle size.

    Component name

    The name MuiLineChart can be used when providing default props or style overrides in the theme.

    Props

    NameTypeDefaultDescription
    bottomAxis{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, position?: 'bottom'
    | 'top', stroke?: string, tickFontSize?: number, tickSize?: number }
    | string    		xAxisIds[0] The id of the first provided axis
    Indicate which axis to display the the bottom of the charts. Can be a string (the id of the axis) or an object ChartsXAxisProps
    colorsArray<string>
    | func
    Color palette used to colorize multiple series.
    leftAxis{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, position?: 'left'
    | 'right', stroke?: string, tickFontSize?: number, tickSize?: number }
    | string    		yAxisIds[0] The id of the first provided axis
    Indicate which axis to display the the left of the charts. Can be a string (the id of the axis) or an object ChartsYAxisProps
    rightAxis{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, position?: 'left'
    | 'right', stroke?: string, tickFontSize?: number, tickSize?: number }
    | string    		null
    Indicate which axis to display the the right of the charts. Can be a string (the id of the axis) or an object ChartsYAxisProps
    topAxis{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, position?: 'bottom'
    | 'top', stroke?: string, tickFontSize?: number, tickSize?: number }
    | string    		null
    Indicate which axis to display the the top of the charts. Can be a string (the id of the axis) or an object ChartsXAxisProps

    The component cannot hold a ref.