Core React microcharts

Core is the everyday shelf: trends, magnitudes, change, attainment, and the small comparisons that sit in a sentence, a table cell, or a KPI. Start here when you know the shape of the answer and just need the mark.

Good for. Sparklines, bars, bullets, deltas, heat strips, calendars — the common inline jobs. Not for. One-question decision instruments (Decision) or unusual encodings (Expressive / Frontier).

Find by question

Sparkline

A trend over ordered values, small enough to sit in a sentence.

core

SparkBar

Compact bars for magnitude, or a win–loss streak of outcomes.

core

+18.4%

Delta

A signed change, double-encoded by glyph and color.

core

Bullet

A measure against a target and qualitative bands.

core

ActivityGrid

Calendar or matrix intensity: the contribution-graph shape.

core

TrendArrow

Which way is this moving? At glyph size, before any number.

core

StatusDot

What state is this thing in: shape and color paired, never color alone.

core

HeatCell

One calibrated color step: the building block for host-owned grids.

core

Progress

How far along, exactly: bar plus the percent that is the datum.

core

RugStrip

Where the raw observations actually sit: distribution without binning.

core

MiniBar

Which category is biggest, and by roughly how much.

core

PictogramRow

Counts a human can verify by counting: ●●●○○.

core

Seismogram

When did things happen, and how hard: event density over time.

core

HeatStrip

How intensity evolved, glanceably: the 1×N sibling of ActivityGrid.

core

DotPlot

A few named values on one scale: minimum ink per comparison.

core

Dumbbell

Where each row started and ended: hollow to filled, no legend.

core

PairedBars

Actual vs expected, category by category: one shared scale.

core

Slope

Who rose and who fell between two moments: crossings read instantly.

core

MicroScatter

Are these two variables related? The relationship no other type tells.

core

SegmentedBar

What is this made of, and in what proportions.

core

HistogramStrip

What does the distribution look like? Mode, spread, skew in a cell.

core

MicroBox

The p50 and spread of a metric: a five-number summary in a row.

core

ProgressRing

How complete is this? At icon size, where a bar doesn't fit.

core

MicroDonut

Roughly what is this made of? An honest, capped concession at icon size.

core

Funnel

Where does the pipeline leak? Stage-to-stage conversion in a cell.

core

LikertStrip

Does the response lean agree or disagree, and how hard.

core

Waterfall

How the deltas compose into the total: P&L in a cell.

core

BumpStrip

Where do we rank, and which way is it moving.

core

DualSparkline

How is this series doing against its benchmark.

core

StackedArea

How the composition is shifting over time.

core

Ohlc

Price action per period: open, high, low, close in a cell.

core

Horizon

A wide-range series folded into a slim, dense band.

core

CalendarStrip

The last few weeks, day by day: real calendar position.

core

EventTimeline

What happened when, and for how long: spans and instants on one row.

core

the examples

The same catalog, carrying seven real products — a trading terminal, a print magazine, an eval console.

7 apps · 106 types · 0 dependencies

Browse the examples