LineSeries API
Extended documentation for the LineSeries interface with detailed information on the module's properties and available APIs.
Demos
Import
import { LineSeries } from '@mui/x-charts';
// or
import { LineSeries } from '@mui/x-charts-pro';
// or
import { LineSeries } from '@mui/x-charts-premium';The value of the line at the base of the series area. - `'min'` the area will fill the space **under** the line. - `'max'` the area will fill the space **above** the line. - `number` the area will fill the space between this value and the line
Type:'max' | 'min' | number
Default:0
Color to use when displaying the series. If `colorGetter` is provided, it will be used to get the color for each data point instead. Otherwise, this color will be used for all data points in the series.
Type:string
A function that returns a color based on the value and/or the data index of a point. The returned color is used when displaying the specific data point, e.g., a marker in a line chart. When the color of the entire series is required, e.g., in legends, the `color` property is used instead.
Type:(data: { value: number, dataIndex: number }) => string
If `true`, line and area connect points separated by `null` values.
Type:boolean
Default:false
The type of curve to use for the line. Read more about curves at [line interpolation](https://mui.com/x/react-charts/lines/#interpolation).
Type:'bumpX' | 'bumpY' | 'catmullRom' | 'linear' | 'monotoneX' | 'monotoneY' | 'natural' | 'step' | 'stepAfter' | 'stepBefore'
Default:'monotoneX'
Do not render the line highlight item if set to `true`.
Type:boolean
Default:false
The scope to apply when the series is highlighted.
Type:{ highlight?: 'item' | 'none' | 'series', fade?: 'global' | 'none' | 'series' }
The label to display on the tooltip or the legend. It can be a string or a function.
Type:(location: 'legend' | 'tooltip') => string | string
Defines the mark type for the series. There is a default mark type for each series type.
Type:'circle' | 'line' | 'line+mark' | 'square' | ComponentClass<ChartsLabelCustomMarkProps, any> | FunctionComponent<ChartsLabelCustomMarkProps>
The shape of the mark elements.
Using 'circle' renders a `
Type:'circle' | 'cross' | 'diamond' | 'square' | 'star' | 'triangle' | 'wye'
Define which items of the series should display a mark. If can be a boolean that applies to all items. Or a callback that gets some item properties and returns true if the item should be displayed.
Type:(params: { index: number, x: number, y: number, position: Date | number, value: number }) => boolean | boolean
The key that identifies the stacking group. Series with the same `stack` property will be stacked together.
Type:string
Defines how stacked series handle negative values.
Type:'diverging' | 'expand' | 'none' | 'silhouette' | 'wiggle'
Default:'none'
The order in which series' of the same group are stacked together.
Type:'appearance' | 'ascending' | 'descending' | 'insideOut' | 'none' | 'reverse'
Default:'none'
If `true`, step curve starts and end at the first and last point. By default the line is extended to fill the space before and after.
Type:boolean
Formatter used to render values in tooltip or other data display.
Type:(value: number, context: { dataIndex: number }) => string
A function to extract and transform the value from the `dataset` item. It receives the full dataset item and should return the series value. Can be used as an alternative to `dataKey`.
Type:(item: DatasetElementType<unknown>) => number