Bars
Periods, side by side.
Use bars when the column is a count over a period. Each tick reads as a slot, not a continuous line.
Sparklines
A trend, in a header.
The shape shows up before the cells.
MRR$66,400 | Active199 | NRR114% | Churn1.8% |
|---|---|---|---|
| 66 | 199 | 114 | 1.8 |
| 62 | 188 | 112 | 1.9 |
| 58 | 175 | 109 | 2.1 |
Sparkline · last 10 periodsHeader height stays steady on every column
The trio
Three columns, three lines.
A spark is a sentence. A row of sparks is the headline.
MRR
Active
NRR
Above the value
The shape lands, before the digit.
The eye reads angle faster than digits. A sparkline tells the answer in a single glance.
- Sparks normalise inside their own column. A two percent column reads as steep as a hundred percent column.
- Soft area fill plus a dot on the latest value. The end of the line carries the meaning.
- Computed columns get an accent line, so derived signals stay distinct from raw ones.
The forms
Same idea, three shapes.
Line, bars, or pulse. Pick the form that suits the column.
MRR$66.4k
Header card
Live in the header.
The spark sits above the column label and the latest value. The whole header reads as one breath.
2025+58%
Inline
Anywhere a number lives.
The same spark renders in stat cards, tables, and email bodies. Same engine. Same look.
Why
Tiny, loud.
24px
header height
< 1ms
redraw on sort
SVG
crisp at any scale
A sparkline is what a chart wants to be when there is no room for a chart. Twelve points or two hundred. The shape stays.
In short
Questions, answered.
When does the spark draw?+
When the column has two or more numeric values. Empty and text cells are skipped.
Does sort change the shape?+
Yes. The spark mirrors the visible rows, so a sort or search reshapes the line.
Can I turn it off?+
Yes. Toggle sparklines per source if you want a flat header.
Why a sparkline at all?+
A column with a steep line earns the eye in a second. The reader has the answer before the table loads.