Skip to contentSkip to content

SparkLineChart API

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

Demos

Import

import { SparkLineChart } from '@mui/x-charts/SparkLineChart';
// or
import { SparkLineChart } from '@mui/x-charts';
// or
import { SparkLineChart } from '@mui/x-charts-pro';

Learn about the difference by reading this guide on minimizing bundle size.

Props

Props of the native component are also available.

NameTypeDefaultDescription
data*Array<number>-

Data to plot.

areaboolfalse

Set to true to fill spark line area. Has no effect if plotType='bar'.

clipAreaOffset{ bottom?: number, left?: number, right?: number, top?: number }{ top: 1, right: 1, bottom: 1, left: 1 }

The clipped area offset in pixels.
This prevents partial clipping of lines when they are drawn on the edge of the drawing area.

colorfunc
| string		rainbowSurgePalette[0]

Color used to colorize the sparkline.

datasetArray<object>-

An array of objects that can be used to populate series and axes data using their dataKey property.

disableAxisListenerboolfalse

If true, the charts will not listen to the mouse move event. It might break interactive features, but will improve performance.

disableClippingboolfalse

When true, the chart's drawing area will not be clipped and elements within can visually overflow the chart.

disableVoronoibool-

If true, the voronoi interaction are ignored.

heightnumber-

The height of the chart in px. If not defined, it takes the height of the parent element.

highlightedAxisArray<{ axisId: number
| string, dataIndex: number }>		-

The controlled axis highlight. Identified by the axis id, and data index.

highlightedItem{ dataIndex?: number, seriesId: number
| string }		-

The highlighted item. Used when the highlight is controlled.

idstring-

This prop is used to help implement the accessibility logic. If you don't provide this prop. It falls back to a randomly generated id.

localeTextobject-

Localized text for chart components.

marginnumber
| { bottom?: number, left?: number, right?: number, top?: number }		5

The margin between the SVG and the drawing area. It's used for leaving some space for extra information such as the x- and y-axis or legend.
Accepts a number to be used on all sides or an object with the optional properties: top, bottom, left, and right.

onAxisClickfunc-

The function called for onClick events. The second argument contains information about all line/bar elements at the current mouse position.

Signature:function(event: MouseEvent, data: null | ChartsAxisData) => void
  • event The mouse event recorded on the <svg/> element.
  • data The data about the clicked axis and items associated with it.
onHighlightChangefunc-

The callback fired when the highlighted item changes.

Signature:function(highlightedItem: HighlightItemData | null) => void
  • highlightedItem The newly highlighted item.
onHighlightedAxisChangefunc-

The function called when the pointer position corresponds to a new axis data item. This update can either be caused by a pointer movement, or an axis update. In case of multiple axes, the function is called if at least one axis is updated. The argument contains the identifier for all axes with a data property.

Signature:function(axisItems: Array) => void
  • axisItems The array of axes item identifiers.
onItemClickfunc-

Callback fired when clicking close to an item. This is only available for scatter plot for now.

Signature:function(event: MouseEvent, scatterItemIdentifier: ScatterItemIdentifier) => void
  • event Mouse event caught at the svg level
  • scatterItemIdentifier Identify which item got clicked
plotType'bar'
| 'line'		'line'

Type of plot used.

showHighlightboolfalse

Set to true to highlight the value. With line, it shows a point. With bar, it shows a highlight band.

showTooltipboolfalse

Set to true to enable the tooltip in the sparkline.

skipAnimationbool-

If true, animations are skipped. If unset or false, the animations respects the user's prefers-reduced-motion setting.

slotPropsobject{}

The props used for each component slot.

slotsobject{}

Overridable component slots.

See Slots API below for more details.

valueFormatterfunc(value: number | null) => (value === null ? '' : value.toString())

Formatter used by the tooltip.

Signature:function(value: number) => string
  • value The value to format.

Returns: the formatted value.

voronoiMaxRadiusnumber-

Defines the maximal distance between a scatter point and the pointer that triggers the interaction. If undefined, the radius is assumed to be infinite.

widthnumber-

The width of the chart in px. If not defined, it takes the width of the parent element.

xAxis{ 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, fill?: string, height?: number, hideTooltip?: bool, id?: number
| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'bottom'
| 'none'
| 'top', reverse?: bool, scaleType?: 'band', slotProps?: object, slots?: object, stroke?: string, 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, 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, fill?: string, height?: number, hideTooltip?: bool, id?: number
| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'bottom'
| 'none'
| 'top', reverse?: bool, scaleType?: 'point', slotProps?: object, slots?: object, stroke?: string, 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, 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, fill?: string, height?: number, hideTooltip?: bool, id?: number
| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'bottom'
| 'none'
| 'top', reverse?: bool, scaleType?: 'log', slotProps?: object, slots?: object, stroke?: string, 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, 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, fill?: string, height?: number, hideTooltip?: bool, id?: number
| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'bottom'
| 'none'
| 'top', reverse?: bool, scaleType?: 'pow', slotProps?: object, slots?: object, stroke?: string, 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, 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, fill?: string, height?: number, hideTooltip?: bool, id?: number
| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'bottom'
| 'none'
| 'top', reverse?: bool, scaleType?: 'sqrt', slotProps?: object, slots?: object, stroke?: string, 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, 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, fill?: string, height?: number, hideTooltip?: bool, id?: number
| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'bottom'
| 'none'
| 'top', reverse?: bool, scaleType?: 'time', slotProps?: object, slots?: object, stroke?: string, 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, 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, fill?: string, height?: number, hideTooltip?: bool, id?: number
| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'bottom'
| 'none'
| 'top', reverse?: bool, scaleType?: 'utc', slotProps?: object, slots?: object, stroke?: string, 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, 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, fill?: string, height?: number, hideTooltip?: bool, id?: number
| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'bottom'
| 'none'
| 'top', reverse?: bool, scaleType?: 'linear', slotProps?: object, slots?: object, stroke?: string, 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, valueFormatter?: func }		-

The xAxis configuration. Notice it is a single AxisConfig object, not an array of configuration.

yAxis{ 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, fill?: string, hideTooltip?: bool, id?: number
| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'left'
| 'none'
| 'right', reverse?: bool, scaleType?: 'band', slotProps?: object, slots?: object, stroke?: string, 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, 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, fill?: string, hideTooltip?: bool, id?: number
| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'left'
| 'none'
| 'right', reverse?: bool, scaleType?: 'point', slotProps?: object, slots?: object, stroke?: string, 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, 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, fill?: string, hideTooltip?: bool, id?: number
| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'left'
| 'none'
| 'right', reverse?: bool, scaleType?: 'log', slotProps?: object, slots?: object, stroke?: string, 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, 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, fill?: string, hideTooltip?: bool, id?: number
| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'left'
| 'none'
| 'right', reverse?: bool, scaleType?: 'pow', slotProps?: object, slots?: object, stroke?: string, 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, 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, fill?: string, hideTooltip?: bool, id?: number
| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'left'
| 'none'
| 'right', reverse?: bool, scaleType?: 'sqrt', slotProps?: object, slots?: object, stroke?: string, 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, 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, fill?: string, hideTooltip?: bool, id?: number
| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'left'
| 'none'
| 'right', reverse?: bool, scaleType?: 'time', slotProps?: object, slots?: object, stroke?: string, 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, 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, fill?: string, hideTooltip?: bool, id?: number
| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'left'
| 'none'
| 'right', reverse?: bool, scaleType?: 'utc', slotProps?: object, slots?: object, stroke?: string, 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, 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, fill?: string, hideTooltip?: bool, id?: number
| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'left'
| 'none'
| 'right', reverse?: bool, scaleType?: 'linear', slotProps?: object, slots?: object, stroke?: string, 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, valueFormatter?: func, width?: number }		-

The yAxis configuration. Notice it is a single AxisConfig object, not an array of configuration.

The ref is forwarded to the root element.

Slots

Slot nameClass nameDefault componentDescription
areaAnimatedAreaThe component that renders the area.
barBarElementPathThe component that renders the bar.
lineLineElementPathThe component that renders the line.
lineHighlight
mark
tooltipChartsTooltipRootCustom component for the tooltip popper.

Source code

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