CHARTS & MAPS · CHARTS

Sparklines

Word-sized trends for KPI cards, table rows and sentences — line, area, bars, win/loss, bullet and progress sparks with markers, references and trend colour.

THEME

Playground

KPI card — type, size, markers, reference, colour, period, hover

Revenuelast 30 days

$61k▲ 56%

Settings

TYPE

SIZE

MARKERS

REFERENCE

COLOUR

PERIOD

HOVER

NOW SPEAKING

IMAGE“Revenue, last 30 days, up 56%, from $1.6k to $2.5k”

POINT“Focus the sparkline and press → to read each day”

KpiCard.tsx

1<Sparkline

2 data={revenue.last30Days}

3 type="area" size="card"

4 markers="last" reference="none"

5 color="trend" tooltip={true}

6 aria-label="Revenue, last 30 days, up 56%"

7/>

Variants

KPI row, table, inline, win/loss, bullet, progress, compare

Revenue12 weeks

$64k▲ 43%

Active projects12 weeks

23▲ 29%

Overdue invoices12 weeks

5▼ 64%

Utilization12 weeks

78%▲ 8%

In a tableone column, shared or own scale

Client revenue trends, 12 weeks
Client	This week	Change
Juniper Hotel	$5.5k	▲ 17%
Lume Goods	$3.5k	▲ 13%
Orbit Labs	$2.2k	▼ 15%
Atelier Rive	$2.3k	▲ 35%
Halo Clinic	$0.9k	▼ 40%
Nova Studio	$2.5k	▲ 47%

Shared scale: Juniper’s line is higher because it earns more — rows are comparable

Inline in texta word-sized trend

Revenue grew ▲ 12% this month, while late payments fell ▼ 3 invoices and studio hours stayed flat ± 0%.

Win / lossmonths above and below plan

Revenue vs plan8 / 12

Margin vs 30%8 / 12

Hours vs 160 h9 / 12

Bullet sparksvalue, target and range in one line

Revenue$64k

Margin27%

NPS61

Progress to targetquarter to date

Q4 revenue$132k / $180k

Billable hours1420 h / 2100 h

New clients4 / 5

This year vs lasttwo lines, one tiny scale

Revenue+24% YoY

Hours+13% YoY

New leads+18% YoY

States

Loading, too few points, no data, error

Loadinghold the space

Loading……

Too few pointsone value is not a trend

Not enough data$3.2k

No datashow a dash, not a flat line

——

Errorsay it in words

Couldn’t loadRetry

Behavior

When, scale, labels

When to usecontext, not detail

UseNext to a number, to show its direction

UseIn a table column, one per row

AvoidWhen people need exact values or axes

AvoidMore than one trend per sparkline (except YoY)

Scaleshared or own

SharedRows are comparable by height

OwnShows shape only — say so

ZeroBars from zero; lines may zoom

PeriodSame period for every row

Labelsnever alone

NumberAlways show the current value next to it

Delta▲ / ▼ + % — not colour alone

PeriodSay the period: “last 30 days”

Good downFor costs and delays, down is green

In Avava

Dashboard KPIs, clients, projects

RevenueQ4 to date

$132k▲ 41%

MarginQ4 to date

27%▲ 16%

Days to get paid12 weeks

18 d▼ 31%

Billable hours12 weeks

624 h▲ 15%

Clientsrevenue trend per client · shared scale

Client revenue trends, 12 weeks
Client	This week	Change
Juniper Hotel	$5.5k	▲ 17%
Lume Goods	$3.5k	▲ 13%
Orbit Labs	$2.2k	▼ 15%
Atelier Rive	$2.3k	▲ 35%
Halo Clinic	$0.9k	▼ 40%
Nova Studio	$2.5k	▲ 47%

Shared scale: Juniper’s line is higher because it earns more — rows are comparable

Projectshours per week · budget used

Lume rebrandOlivia · due 6 Nov · 72% of budget

Spring campaignAlex · due 21 Oct · 94% of budget

Brand bookMara · overdue · 108% of budget

App onboardingJon · due 1 Dec · 41% of budget

Rules & a11y

Sparkline vs chart, screen readers

Sparkline or chart?pick by the job

Sparkline

Direction next to a numberKPI cards, table rows

Mini chart

Shape plus a few valuesCard with 1 tooltip

Full chart

Exact values, axes, comparisonReports

Screen readersa trend in one sentence

✓role="img" + aria-label“Revenue, last 30 days, up 12%, from $1.8k to $2.4k”

✓Focusable only with a tooltip← → read each point in a live region

✓▲ ▼ and a sign next to colourGreen and coral are never the only cue

✓Decorative inline sparksStill labelled; the sentence repeats the number

DO✓Always put the number next to the sparkline✓Use the same period in a column✓Mark the last point✓Colour by meaning: down is good for costs✓Share one scale when rows are compared

DON’T✕Add axes, grids or legends✕Use a sparkline without a value✕Mix periods in one table✕Rely on colour alone for the trend✕Draw a flat line for missing data