Library/ Data Viz/ Bullet
Ranking · Actual vs. plan · KPI roll-up

Pipeline, vs. plan.

Bullet chart compresses a four-number story into one row: actual, target, plan ranges (poor / ok / good), and a target marker. Best replacement for a row of gauges or a wall of KPI tiles when you need to show several metrics that each have a target.

Q1 2026 GTM bullets · % to plan

5 metrics · YTD
Beating plan
3/5
vs. target line
Best row
128%
New AUM
Worst row
68%
Pipeline coverage
Avg vs. plan
94%
5-row mean

Fork & ship

Inline SVG, no D3. Each row needs label, value, target, max, ranges (poor/ok/good thresholds), and an optional unit.

const ROWS = [
  { label: "New AUM", value: 128, target: 100, max: 150,
    ranges: [60, 90, 110], unit: "%" },
  // ... etc
];
View source Back to gallery

When to use this

Vertical-list of KPIs with targets. Replaces 5 gauges with 5 rows in one frame. Skip when actual values matter more than vs.-plan story — use a bar chart instead.

Reading notes

Light bands behind the bar are the poor / ok / good ranges. Inner dark bar is actual. The orange vertical mark is the target. Bar to the right of target = beating plan.