Charts - Sparkline
Use sparklines to show value trends in a compact chart without axes or coordinates.
Overview
A sparkline is a small chart without axes that plots a sequence of values. It stays compact so you can place it inline (for example, in a table cell, a dashboard widget, or next to text). The curve or bar shape conveys the trend without scales or labels.
The demo below shows how npm displays a package's weekly download trend in a sparkline.
Weekly Downloads
423,709
Basics
SparkLineChart only needs the data prop, which is an array of numbers.
Set plotType to "bar" to switch from a line chart to a bar chart.
import Stack from '@mui/material/Stack';
import Box from '@mui/material/Box';
import { SparkLineChart } from '@mui/x-charts/SparkLineChart';
export default function BasicSparkLine() {
return (
<Stack
direction="row"
sx={{
width: '100%',
gap: 2,
// For the examples page
['@container (width < 600px)']: {
flexWrap: 'wrap',
maxWidth: '70%',
},
}}
>
<Box sx={{ flexGrow: 1 }}>
<SparkLineChart data={[1, 4, 2, 5, 7, 2, 4, 6]} height={100} />
</Box>
<Box sx={{ flexGrow: 1 }}>
<SparkLineChart
plotType="bar"
data={[1, 4, 2, 5, 7, 2, 4, 6]}
height={100}
/>
</Box>
</Stack>
);
}
Line customization
Set the area prop to fill the area under the curve.
Use the curve prop to change how the line is interpolated between points.
See Lines—Interpolation for curve options.
import Stack from '@mui/material/Stack';
import Box from '@mui/material/Box';
import { SparkLineChart } from '@mui/x-charts/SparkLineChart';
export default function AreaSparkLine() {
return (
<Stack direction="row" sx={{ width: '100%' }}>
<Box sx={{ flexGrow: 1 }}>
<SparkLineChart data={[3, -10, -2, 5, 7, -2, 4, 6]} height={100} area />
</Box>
<Box sx={{ flexGrow: 1 }}>
<SparkLineChart
data={[3, -10, -2, 5, 7, -2, 4, 6]}
height={100}
curve="natural"
area
/>
</Box>
</Stack>
);
}
Interaction
Use the showTooltip and showHighlight props to enable the default tooltip and highlight.
For more control, pass custom props to the tooltip and highlight slots.
See Tooltip for details.
Axis management
X-axis data
By default, the sparkline uses an ascending integer sequence starting at 0 (0, 1, 2, …) for the x-axis.
Those values are hidden in the tooltip.
Use the xAxis prop when your data points are not evenly spaced or when you need custom labels.
The sparkline has a single axis, so xAxis takes one axis configuration object, not an array.
<SparkLineChart data={[1, 4, 2, 5, 7, 2, 4, 6]} xAxis={{ scaleType, data }} />
Y-axis range
Set min and max on the yAxis configuration to fix the y-axis range.
The demo below shows two sparklines with different value scales: the first row uses the default y-axis, and the second row uses a fixed range from 0 to 100.
Without fixed y-range
With y-range fixed to [0, 100]
Use the domainLimit option in the yAxis configuration to adjust the y-axis range relative to the data.
See Axis—Relative axis subdomain for details.
The demo below uses the same data (values from -15 to 92) with different domainLimit settings.
y-axis range: -100, 100
Color customization
Pass a color to the color prop to set the sparkline color.
import Stack from '@mui/material/Stack';
import { SparkLineChart } from '@mui/x-charts/SparkLineChart';
const settings = {
height: 100,
yAxis: { min: 0, max: 20 },
} as const;
const values = [0, 2, 3, 4, 6, 8, 7, 9, 15, 6, 8, 7, 12];
export default function ColorCustomization() {
return (
<Stack sx={{ width: '100%', maxWidth: 300 }}>
<SparkLineChart data={values} color="green" {...settings} />
</Stack>
);
}
The color prop also accepts a function that receives the mode ('light' or 'dark'), so you can change the color for the current theme.
The demo below uses a white line in dark mode and a black line in light mode.
import * as React from 'react';
import { createTheme, useTheme, ThemeProvider } from '@mui/material/styles';
import Stack from '@mui/material/Stack';
import Button from '@mui/material/Button';
import Brightness4Icon from '@mui/icons-material/Brightness4';
import Brightness7Icon from '@mui/icons-material/Brightness7';
import { SparkLineChart } from '@mui/x-charts/SparkLineChart';
import Paper from '@mui/material/Paper';
const settings = {
height: 100,
yAxis: { min: 0, max: 20 },
} as const;
const values = [0, 2, 3, 4, 6, 8, 7, 9, 15, 6, 8, 7, 12];
export default function ColorCustomizationMode() {
return (
<DarkModeWrapper>
<SparkLineChart
data={values}
color={(mode) => (mode === 'light' ? 'black' : 'white')}
{...settings}
/>
</DarkModeWrapper>
);
}
function DarkModeWrapper(props: React.PropsWithChildren) {
const theme = useTheme();
const [colorMode, setColorMode] = React.useState(theme.palette.mode);
const newTheme = createTheme({ palette: { mode: colorMode } });
return (
<ThemeProvider theme={newTheme}>
<Stack sx={{ width: '100%', alignItems: 'center' }}>
<Button
onClick={() =>
setColorMode((prev) => (prev === 'light' ? 'dark' : 'light'))
}
color="inherit"
endIcon={colorMode === 'dark' ? <Brightness7Icon /> : <Brightness4Icon />}
>
{colorMode} mode
</Button>
<Paper sx={{ p: 2, width: '100%', maxWidth: 300 }}>{props.children}</Paper>
</Stack>
</ThemeProvider>
);
}
Line width
The default stroke width for sparkline lines is 2px. With clipping enabled, a line drawn at the chart edge can be partially clipped.
Clipping is on by default.
clipAreaOffset defaults to 1 to reduce visible clipping.
Set disableClipping to true to turn clipping off.
The demo below shows how stroke width, disableClipping, and clipAreaOffset affect the result.
API
See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.