Bullet Chart — HTML CSS JS KPI vs Target Graph

A bullet chart — Stephen Few's bullet graph — is the most information-dense way to show a single KPI: in one slim horizontal bar it shows the actual value, the target to beat, and qualitative "poor / OK / good" context, all at a glance. It's the gauge done right, fitting many KPIs into the space one dial would waste. This snippet builds a complete bullet chart in plain HTML, CSS, and vanilla JavaScript, with shaded performance bands, a target marker, an animated measure bar, and support for inverted metrics — no charting library.

Three layers in one track

Each KPI row stacks three things in a single track. The background is split into three shaded qualitative ranges (poor, OK, good) sized from the metric's band thresholds as percentages of its axis maximum. On top, a thin dark "measure" bar shows the actual value. And a vertical red marker shows the target. Reading it is instant: is the dark bar past the red line, and which colour band does it land in? That's the whole point of a bullet graph — comparison and context without a single number to parse.

Each KPI on its own scale

Real dashboards mix metrics with wildly different ranges — dollars, counts, percentages, scores. Every KPI here carries its own max, target, and band thresholds, and everything (ranges, measure, target) is computed as a percentage of that KPI's own max. So revenue in the hundreds and NPS out of 60 each get a correctly-proportioned bar, and they line up visually as a tidy column despite measuring completely different things.

Inverted metrics, handled correctly

Some KPIs are better when lower — churn, cost, response time. The snippet supports an invert flag that reverses two things: the shaded bands flip so green sits at the low end, and the "on target" test becomes "value ≤ target" instead of "value ≥ target." This matters because a bullet chart that shows churn with green on the high end would be actively misleading. Handling the inverted case is what makes the component honest across every kind of metric.

Animated measure, status label

The measure bar animates from zero to its value on the next animation frame — the same requestAnimationFrame trick that lets a CSS width transition run from a freshly-created element. Each row also shows a tiny status line ("✓ on target" or "below target") computed from the value-versus-target comparison, so the verdict is spelled out alongside the visual.

Data-driven and drop-in

Every row renders from a KPIS array of { name, value, target, max, bands, invert }. Add a KPI, change a target, or wire in live numbers and the bands, measure, target marker, and status all follow. Because it's compact, dependency-free, and stacks neatly, a bullet chart is the ideal way to put a whole scorecard of KPIs on one screen — far more scannable than a wall of gauges.