SparkLineChart API

API reference docs for the React SparkLineChart 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:

Charts - Sparkline

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.

Name	Type	Default	Description
data*	Array<number>	-	Data to plot.
area	bool	false	Set to `true` to fill spark line area. Has no effect if plotType='bar'.
color	func \| string	rainbowSurgePalette[0]	Color used to colorize the sparkline.
dataset	Array<object>	-	An array of objects that can be used to populate series and axes data using their `dataKey` property.
disableAxisListener	bool	false	If `true`, the charts will not listen to the mouse move event. It might break interactive features, but will improve performance.
disableVoronoi	bool	-	If true, the voronoi interaction are ignored.
height	number	-	The height of the chart in px. If not defined, it takes the height of the parent element.
highlightedItem	{ dataIndex?: number, seriesId: number \| string }	-	The highlighted item. Used when the highlight is controlled.
id	string	-	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.
margin	{ bottom?: number, left?: number, right?: number, top?: number }	{ top: 5, bottom: 5, left: 5, right: 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 an object with the optional properties: `top`, `bottom`, `left`, and `right`.
onAxisClick	func	-	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 \| AxisData) => void` `event` The mouse event recorded on the `<svg/>` element. `data` The data about the clicked axis and items associated with it.
onHighlightChange	func	-	The callback fired when the highlighted item changes. Signature:`function(highlightedItem: HighlightItemData \| null) => void` `highlightedItem` The newly highlighted item.
onItemClick	func	-	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.
showHighlight	bool	false	Set to `true` to highlight the value. With line, it shows a point. With bar, it shows a highlight band.
showTooltip	bool	false	Set to `true` to enable the tooltip in the sparkline.
skipAnimation	bool	-	If `true`, animations are skipped. If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
slotProps	object	{}	The props used for each component slot.
slots	object	{}	Overridable component slots. See Slots API below for more details.
valueFormatter	func	(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.
voronoiMaxRadius	number	-	Defines the maximal distance between a scatter point and the pointer that triggers the interaction. If `undefined`, the radius is assumed to be infinite.
width	number	-	The width of the chart in px. If not defined, it takes the width of the parent element.
xAxis	{ 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, label?: string, labelStyle?: object, max?: Date \| number, min?: Date \| number, position?: 'bottom' \| 'top', reverse?: bool, scaleType?: 'band' \| 'linear' \| 'log' \| 'point' \| 'pow' \| 'sqrt' \| 'time' \| '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 }	-	The xAxis configuration. Notice it is a single AxisConfig object, not an array of configuration.
yAxis	{ 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, label?: string, labelStyle?: object, max?: Date \| number, min?: Date \| number, position?: 'left' \| 'right', reverse?: bool, scaleType?: 'band' \| 'linear' \| 'log' \| 'point' \| 'pow' \| 'sqrt' \| 'time' \| '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 }	-	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 name	Default component	Description
area	`AnimatedArea`	The component that renders the area.
bar	`BarElementPath`	The component that renders the bar.
line	`LineElementPath`	The component that renders the line.
lineHighlight
mark
tooltip	`ChartsTooltipRoot`	Custom 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.