Bullet chart

target vs actual

Target against actual, in one line. The chart a gauge wishes it were.

Bullet chart — target vs actual: rendered example
Rendered by Gnomon from the source below. No edits.

The source

91 lines of D3 JavaScript, and uses only the bundled D3 build. Copy it, or open the template inside Gnomon and render it as it is.

// Bullet charts — Stephen Few's replacement for the dashboard gauge.
// Each row is: qualitative bands (poor/ok/good), a measure bar, and a target
// tick. Far more information per pixel than a dial, and directly comparable
// down the column.

const rows = [
  { label: 'Availability',   sub: '% uptime',   ranges: [99.0, 99.7, 100], measure: 99.82, target: 99.9 },
  { label: 'p95 latency',    sub: 'ms (lower=better)', ranges: [600, 350, 150], measure: 280, target: 200 },
  { label: 'Change failure', sub: '% of deploys', ranges: [30, 15, 0], measure: 11, target: 8 },
  { label: 'Lead time',      sub: 'hours',      ranges: [72, 36, 4], measure: 26, target: 12 },
  { label: 'Test coverage',  sub: '%',          ranges: [50, 70, 95], measure: 78, target: 85 },
];

const margin = { top: 30, right: 30, bottom: 20, left: 150 };
const rowHeight = 52;
const barHeight = 20;
const boxHeight = margin.top + rows.length * rowHeight + margin.bottom;

const bandFill = theme.mode === 'dark'
  ? ['#3a3a3a', '#4c4c4c', '#5e5e5e']
  : ['#e6e6e6', '#efefef', '#f7f7f7'];

const svg = d3.select(container).append('svg')
    .attr('viewBox', [0, 0, width, boxHeight])
    .attr('width', width)
    .attr('height', boxHeight)
    .attr('font-family', 'system-ui, sans-serif')
    .attr('font-size', 11);

const g = svg.selectAll('g.row')
  .data(rows)
  .join('g')
    .attr('class', 'row')
    .attr('transform', (_, i) => `translate(0,${margin.top + i * rowHeight})`);

g.each(function (d) {
  const row = d3.select(this);
  // Ranges may descend (lower is better), so build the scale from the
  // extent rather than assuming ranges[2] is the maximum.
  const lo = Math.min(...d.ranges, d.measure, d.target);
  const hi = Math.max(...d.ranges, d.measure, d.target);
  const x = d3.scaleLinear().domain([lo, hi]).range([margin.left, width - margin.right]);

  const sorted = [...d.ranges].sort(d3.ascending);
  row.selectAll('rect.band')
    .data([sorted[2], sorted[1], sorted[0]])
    .join('rect')
      .attr('class', 'band')
      .attr('x', margin.left)
      .attr('width', v => Math.max(0, x(v) - margin.left))
      .attr('height', barHeight)
      .attr('rx', 2)
      .attr('fill', (_, i) => bandFill[i]);

  row.append('rect')
      .attr('x', margin.left)
      .attr('y', barHeight / 2 - 4)
      .attr('width', Math.max(0, x(d.measure) - margin.left))
      .attr('height', 8)
      .attr('rx', 1)
      .attr('fill', theme.accent);

  row.append('line')
      .attr('x1', x(d.target)).attr('x2', x(d.target))
      .attr('y1', -2).attr('y2', barHeight + 2)
      .attr('stroke', theme.mode === 'dark' ? '#ffffff' : '#1a1a1a')
      .attr('stroke-width', 2.5);

  row.append('text')
      .attr('x', margin.left - 12)
      .attr('y', 8)
      .attr('text-anchor', 'end')
      .attr('fill', theme.foreground)
      .attr('font-weight', 600)
      .text(d.label);

  row.append('text')
      .attr('x', margin.left - 12)
      .attr('y', 21)
      .attr('text-anchor', 'end')
      .attr('fill', theme.muted)
      .attr('font-size', 10)
      .text(d.sub);

  row.append('text')
      .attr('x', margin.left)
      .attr('y', barHeight + 15)
      .attr('fill', theme.muted)
      .attr('font-size', 10)
      .text(`actual ${d.measure} · target ${d.target}`);
});

Render this offline

This template ships in Gnomon and renders on your machine, with no account and nothing sent to a server. The browser editor is free and needs no install.

Get GnomonOpen the browser editor

Others in D3 visualisations