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.

Component demos

Import

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.

Props

dataRequired

Data to plot.

Type:Array<number>

area

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

Type:bool

colors

Color palette used to colorize multiple series.

Type:Array<string>
| func

plotType

Type of plot used.

Type:'bar'
| 'line'

Default:'line'

showHighlight

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

Type:bool

showTooltip

Set to true to enable the tooltip in the sparkline.

Type:bool

slotProps

The props used for each component slot.

Type:object

Default:{}

slots

Overridable component slots.

Type:object

Default:{}

valueFormatter

Formatter used by the tooltip.

Type:func

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

Returns: the formatted value.

xAxis

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

Type:{ axisId?: string, classes?: object, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, fill?: string, hideTooltip?: bool, id?: string, label?: string, labelFontSize?: number, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'bottom'
| 'left'
| 'right'
| 'top', scaleType?: 'band'
| 'linear'
| 'log'
| 'point'
| 'pow'
| 'sqrt'
| 'time'
| 'utc', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number, valueFormatter?: func }

The component cannot hold a ref.

Slots

area
axisContent
bar
itemContent
line
lineHighlight
mark
popper