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-premium'
// or
import { LineSeries } from '@mui/x-charts-pro'
// or
import { LineSeries } from '@mui/x-charts'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:number | 'min' | 'max'
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: ColorCallbackValue<TValue>) => 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.
Type:CurveType
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:HighlightScope<SeriesType>
The label to display on the tooltip or the legend. It can be a string or a function.
Type:string | ((location: 'tooltip' | 'legend') => string)
Defines the mark type for the series.
There is a default mark type for each series type.
Type:ChartsLabelMarkType
The shape of the mark elements.
Using 'circle' renders a <circle /> element, while all other options render a <path /> instead. The path causes a small decrease in performance.
By default, each series has a different shape, cycling through 'circle', 'square', 'diamond', 'cross', 'star', 'triangle', 'wye'.
If there are more than 7 series, the shapes will repeat.
Type:MarkShape
Define which items of the series should display a mark.
It can be a boolean that applies to all items.
It can be 'start' or 'end' to only display a mark on the first or last item. Such marks reuse
the line highlight element, so they are replaced by the highlighted item when the pointer
highlights a value.
Or a callback that gets some item properties and returns true if the item should be displayed.
Type:boolean | 'start' | 'end' | ((params: ShowMarkParams) => 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:StackOffsetType
Default:'none'
The order in which series' of the same group are stacked together.
Type:StackOrderType
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:SeriesValueFormatter<ChartsSeriesConfig[SeriesType]['valueType']>
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 | null