Sparkline
FreeAn inline mini chart rendered as a small SVG, designed to sit alongside text or within table cells. No axes, labels, or gridlines — just the shape of the data. Communicates trend direction and relative magnitude at a glance. Often used in dashboards, KPI cards, and data tables.
4 variants
Variants
| Variant | Description | When to use |
|---|---|---|
| Line | A simple polyline showing trend direction over a series of values. | Use for showing trend direction in compact spaces — KPI cards, table cells. |
| Bar | Tiny vertical bars representing individual values in a row. | Use for discrete value comparisons in compact contexts — daily activity. |
Usage Guidelines
Keep the sparkline small — 60–120px wide and 16–32px tall.
Add axes, labels, or gridlines — that makes it a full chart.
Use a single colour; highlight the last data point or min/max if needed.
Use sparklines for data that requires precise reading.
Pair with a numeric value or label for context.
Stretch a sparkline to fill a large area — it loses its compact purpose.
Provide a text alternative via aria-label describing the trend.
Omit the aria-label — without it, the sparkline is invisible to screen readers.
Code
<span class="lex-sparkline" role="img" aria-label="Revenue trending up over the last 7 days">
<svg viewBox="0 0 80 24" class="lex-sparkline__svg" preserveAspectRatio="none">
<polyline
class="lex-sparkline__line"
points="0,20 13,16 26,18 40,10 53,12 66,6 80,4"
fill="none"
stroke="var(--lex-chart-line-color)"
stroke-width="1.5"
stroke-linejoin="round"
stroke-linecap="round"
/>
<!-- Endpoint marker -->
<circle cx="80" cy="4" r="2" fill="var(--lex-chart-line-color)" />
</svg>
</span>.lex-sparkline {
--lex-chart-line-color: var(--lex-color-brand-500);
display: inline-flex;
align-items: center;
width: var(--lex-sparkline-width, 80px);
height: var(--lex-sparkline-height, 24px);
}
.lex-sparkline__svg {
width: 100%;
height: 100%;
}
.lex-sparkline__line {
vector-effect: non-scaling-stroke;
}
/* Area variant */
.lex-sparkline--area .lex-sparkline__fill {
fill: var(--lex-chart-line-color);
opacity: 0.15;
}
/* Negative trend colour */
.lex-sparkline--negative {
--lex-chart-line-color: var(--lex-color-danger-500);
}// Using Lexicon CSS classes with React
const revenueData = [20, 16, 18, 10, 12, 6, 4];
export function RevenueSparkline() {
return (
<span style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
<strong>$12,400</strong>
<Sparkline
data={revenueData}
aria-label="Revenue trending up over the last 7 days"
width={80}
height={24}
showEndpoint
/>
</span>
);
}Design Tokens
| Token | Value (dark) | Value (light) | CSS property |
|---|---|---|---|
| --lex-sparkline-color | — | — | color |
| --lex-sparkline-height | — | — | height |
| --lex-sparkline-bar-width | — | — | width |
| --lex-sparkline-bar-gap | — | — | gap |
Accessibility
- Use role="img" with a descriptive aria-label summarising the trend in plain language.
- The inner SVG should have aria-hidden="true" since the container label provides the description.
- Sparklines are decorative summaries — pair with a numeric value for precision.
- Never rely on colour alone to convey positive vs. negative — pair with text or icons.
- Ensure the line colour meets 3:1 contrast ratio against the background.