Sparkline

A compact, inline mini chart with no axes or labels. Used within table cells, stat blocks, or alongside text to show trends at a glance.

Preview

Line sparkline

Revenue

Area sparkline

Traffic

Bar sparkline

Activity

In a stat block

Monthly Users

4,218

+18.3%

Variants

Variant	Description
Line	Stroke-only polyline
Area	Filled area under the line
Bar	Vertical micro-bars

Props

Prop	Type	Default	Description
data	number[]	--	Data points
variant	'line' | 'area' | 'bar'	'line'	Visual style
width	number	80	Chart width in px
height	number	24	Chart height in px
color	string	Series 1 colour	Stroke/fill colour

Code example

React

import { Sparkline } from '@thepace/lexicon/components';

<Sparkline data={[4, 8, 12, 10, 16, 20, 18]} variant="area" />
<Sparkline data={[4, 8, 12, 10, 16, 20, 18]} variant="bar" />

CSS class reference

Class	Purpose
.lex-sparkline	Inline container
.lex-sparkline__svg	SVG canvas
.lex-sparkline__line	Line stroke
.lex-sparkline__area	Filled area polygon
.lex-sparkline__bars	Bar container
.lex-sparkline__bar	Individual micro-bar

Accessibility

• Use role="img" and aria-label describing the trend (e.g. "Revenue trending up over 7 days").
• Sparklines are decorative supplements — always pair with a readable value nearby.
• Ensure the stroke/fill colour has sufficient contrast against the background.

Guidelines

Do

• Use inside table cells to add visual context to numbers.
• Pair with stat blocks to show trend direction.
• Keep sparklines small — they are glanceable, not interactive.

Don't

• Don't use sparklines as standalone charts — they lack axes and labels.
• Don't add tooltips or interactivity to sparklines — use a full chart instead.