Skip to content

SparkLineChart API

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



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

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



Data to plot.


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

| func

Color palette used to colorize multiple series.


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


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


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

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.

| 'line'

Type of plot used.


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


Set to true to enable the tooltip in the sparkline.


The props used for each component slot.


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.


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

xAxis{ axisId?: number
| string, 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, fill?: string, hideTooltip?: bool, id?: number
| string, label?: string, labelFontSize?: number, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'bottom'
| 'left'
| 'right'
| 'top', reverse?: bool, scaleType?: 'band'
| 'linear'
| 'log'
| 'point'
| 'pow'
| 'sqrt'
| 'time'
| 'utc', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, 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 configuration object, not an array of configuration.

The component cannot hold a ref.


Slot nameClass nameDefault componentDescription
areaAnimatedAreaThe component that renders the area.
lineLineElementPathThe component that renders the line.
barBarElementPathThe component that renders the bar.
popperChartsTooltipRootCustom component for the tooltip popper.
axisContentDefaultChartsAxisTooltipContentCustom component for displaying tooltip content when triggered by axis event.
itemContentDefaultChartsItemTooltipContentCustom component for displaying tooltip content when triggered by item event.