Bullet Chart Cards
Three stat cards, each with a label, value, delta, and a bullet chart bar showing actual against qualitative bands and a target tick.
Three stat cards, each with a label, value, delta, and a bullet chart bar showing actual against qualitative bands and a target tick.
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
Bullet Chart Cards lays three metrics side by side, each drawing a slim measure bar over two shaded qualitative bands with a vertical tick for the target. New signups 1,842 (+9.4%, on pace), Activation rate 46.2% (+1.8pt, ahead of target), and Median time to onboard 2.4d (behind pace), each pairing a status line with its target on the right. A footer notes the bands mark last quarter's low and median weeks, and the tick is this quarter's target.
Each metric is one object holding measure, target, and two band widths as percentages, so the whole chart is placed with plain CSS and theme tokens. No chart library runs; the bullet form is the densest honest way to show actual against goal and a historical range on a single line.
Reach for this block when a compact row of metrics each needs its goal and normal range visible at a glance, wired to your reporting query with the bands set from a prior period.
A natural flow around it on an Application Pro page:
Before
After
One strong use is a growth metrics row for a weekly review. Other bullet layouts:
Tip: the shaded bands are what make a single number honest; a value with no range hides whether it is normal or alarming.