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';Color palette used to colorize multiple series.
Type:Array<string>
| func
Default:blueberryTwilightPalette
An array of objects that can be used to populate series and axes data using their dataKey property.
Type:Array<object>
If true, the charts will not listen to the mouse move event. It might break interactive features, but will improve performance.
Type:bool
Default:false
The height of the chart in px. If not defined, it takes the height of the parent element.
Type:number
Default:undefined
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.
Type:{ bottom?: number, left?: number, right?: number, top?: number }
Default:{
top: 5,
bottom: 5,
left: 5,
right: 5,
}
Set to true to highlight the value. With line, it shows a point. With bar, it shows a highlight band.
Type:bool
Default:false
Formatter used by the tooltip.
Type:func
Default:(v: number | null) => (v === null ? '' : v.toString())
function(value: number) => stringvalueThe 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.
Type:number
Default:undefined
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 }