Sparkline Metrics Table
Key metrics table pairing each row with its current value, week over week change, and an inline SVG trend sparkline.
Key metrics table pairing each row with its current value, week over week change, and an inline SVG trend sparkline.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Sparkline Metrics Table is the key metrics overview where every row carries an inline trend beside its current value. Six metrics run from Weekly active users to Churned seats, each with a name, a one line detail, the current figure in tabular figures, a week over week change tagged with an up or down arrow, and a small SVG sparkline of the trailing 12 weeks in the Trend column. Each sparkline is a single polyline with a filled dot on the latest point, so the direction of the series reads without opening a full chart.
The metrics are one typed array and a self-contained Sparkline component normalizes each series to its own min and max, meaning every row uses its full vertical range rather than a shared scale. The footnote makes the honest caveat explicit: the arrows show direction of movement, not judgment, since whether up is good depends entirely on the metric.
Reach for this block on a status or reporting page where readers scan many metrics at once and only drill into the ones that moved. The sparklines give shape to each number at a glance, then the current value and change quantify it, keeping a dozen KPIs legible in one compact table.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the product KPI overview. Other sparkline tables:
Tip: normalize each sparkline to its own range so small but meaningful moves stay visible; a shared axis flattens every low-magnitude metric into a straight line.