Sparkline Grid Card
A card with a 2x2 grid of compact metrics each paired with an inline SVG sparkline, no chart library.
A card with a 2x2 grid of compact metrics each paired with an inline SVG sparkline, no chart library.
The Application Collection unlocks the source for every Application block. All Access unlocks every Collection.
Already purchased? Log in
Sparkline Grid Card fits four metrics into one card as a 2x2 grid: API calls at 2.4M (+12%), Error rate at 0.31% (-0.08pt), P95 latency at 142 ms (-18 ms), and Cache hit at 87.4% (+3.2pt). Each cell pairs the value and delta with a 64x24 inline SVG polyline drawn from 8 normalised points, stroke-foreground/40. The card header reads API health overview, Last 8 weeks, rolling average. No chart lib anywhere.
The metrics array provides label, value, delta, an up bool, and the 8-point series. The Sparkline component normalises to the cell's min/max so each trend reads clearly regardless of unit scale.
Reach for this block in an operations or engineering dashboard where multiple small metrics belong in one card rather than four separate stat cards. Wire each metrics entry to a rolling aggregation endpoint; update the points array with the last 8 windows.
A natural flow around it on an Application Pro page:
Before
After
One strong use is an API health overview tile. Other grids:
Tip: each sparkline is normalised to its own range, not a shared scale; label deltas so the direction is readable without the trend shape.