Skip to main content

KPI Cards

12 pages

One number, one question. Pick the card by what the reader is asking of it.

What is it made of?

Bar and legend share one order and a rank number so colour is never the only link between a segment and its row; shares under 3% merge into "Other".

4 examples

Is it consistent?

"Is it consistent?" — an average hides the tail: a median headline next to p90/p95 read against a named SLA threshold, a box plot of the record-level distribution with the threshold drawn as a reference line, and the share past it stated in text.

4 examples

Where will I land?

"Where will I land?" — a linear run-rate projection to the end of the quarter: solid actual, dashed projection, a ±1σ confidence range that widens toward period end, a labelled target line and a today marker separating the two, with the projection method stated in words.

4 examples

What is the headline?

"What is the headline?" — one hero KPI (a big value, a named comparison vs target, a 13-week trend against last year) with three compact satellite KPIs beside it, each a value + signed delta vs target + a tiny trend, composed as one card with a single separation gesture.

4 examples

What changed most?

"What changed most?" — the top 3 risers and top 3 fallers in a ranked depot field (on-time delivery, revenue), each row stating its rank, how many places it moved, and a diverging mini bar from a shared, stated zero axis. Distinct from stat-list-01's single-snapshot share bars: this is about movement between two points in time.

4 examples

Compared to what?

"Compared to what?" — one wide card per KPI stacking three named baselines (target, last year, budget), each with a shared-scale dot strip so the same number's distance to every reference reads at a glance.

4 examples

Will I make it by period end?

"Will I make it by period end?" — quarter-to-date Progress bars with a marker for the expected pace and a computed days-ahead/behind status, plus a Gauge card reading a rate KPI against its target and thresholds.

4 examples

How big is it in human terms?

"How big is it in human terms?" — a rate restated as a small, countable fraction ("1 in 12 orders arrived late") via UnitChart, with the exact rate spelled out beneath the rounded headline and a comparison vs last year. Highlighted units use an accent fill against a neutral rest rather than hue alone.

4 examples

Should I act?

"Should I act?" — a status (icon + text, never colour alone) read against a visible on-track/at-risk/off-track threshold scale with today's value marked, plus how long the current status has held.

4 examples

How reliable is it?

"How reliable is it?" — a ratio/streak headline over a 30-day strip of day cells, missed days marked by shape as well as colour, with the current and longest streaks and a comparison to the prior 30 days.

4 examples

Am I on target?

"Am I on target?" — a grid of KPI cards, each a BulletChart (value against target, last year, and 2–3 qualitative bands) plus a named comparison row and an as-of footnote. A lower-is-better KPI states that its bands read best-to-worst in reverse.

4 examples

Better or worse than normal?

"Better or worse than normal?" — a 13-week Sparkline trend read against a target pace, last year, and a normal operating band, with a text legend spelling out the line styles so the encoding never rides on colour alone.

4 examples