Skip to content

The catalog / Expressive

Expressive React microcharts

These use an uncommon shape on purpose, because the encoding fits the story better than a line or a bar would. Same size budget and the same grammar as everything else. Just not the one you reach for first.

Good for. Metaphors that earn their keep, where the form matches the domain. Not for. Default KPI trends (Core) or single-question ops instruments (Decision).

Find by question
TallyMarks

How many, counted the way a human counts.

expressive
DicePips

A small count or severity, read instantly as a die face.

expressive
FillWord

Progress on a named task, where the label is the bar.

expressive
FatDigits

Which numbers in a dense column are big, before you read them.

expressive
Thermometer

Where a value sits on a calibrated range, and how close to the goal.

expressive
MoonPhase

How far through a cycle or period: readable across cultures.

expressive
Hourglass

How much time is gone and how much remains, both at once.

expressive
BalanceBeam

Which of two sides outweighs, and roughly by how much.

expressive
SproutRow

How mature or healthy is each item in a small set.

expressive
GardenGrid

The rhythm of activity over time: legible in grayscale and print.

expressive
BubbleRow

Roughly how a few magnitudes compare. For precise comparison, use MiniBar.

expressive
MusicStaff

The shape of a short series, read as a melody.

expressive
TreeRings

How growth accumulated, period over period, from the centre out.

expressive
CitySkyline

How groups compare on size, and how activated each is.

expressive
Honeycomb

How many of the available slots are taken.

expressive
Constellation

When the rare events happened, and how big.

expressive
PolarClock

The shape of a day or week cycle.

expressive
SpiralYear

How the year breathed: seasonality at a glance.

expressive
BreathingDot

How loaded the system is right now, ambiently.

expressive
HeartbeatBlip

Is it alive, and how busy? Instantly.

expressive
CometTrail

Where the value is now, and where it has just been.

expressive
OrbitStatus

How slow and how busy is this dependency right now?

expressive
GradeProfile

How hard the route is, and where: pitches coloured by grade, the steepest called out.

expressive

7 apps in this repo use these charts for real work. There is a trading terminal in there, a print magazine, an eval console.

7 apps · 106 types · 0 dependencies