Grouped bar

category comparison

Category comparison. Unglamorous, and usually the right answer.

Grouped bar — category comparison: rendered example
Rendered by Gnomon from the source below. No edits.

The source

86 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.

// Grouped bar chart — the workhorse. Two band scales: an outer one for
// the group, an inner one keyed to the series, positioned inside the outer
// band's width.

const seriesKeys = ['2024', '2025', '2026'];
const data = [
  { group: 'Customer',   '2024': 3.9, '2025': 4.2, '2026': 4.4 },
  { group: 'Policy',     '2024': 7.1, '2025': 7.8, '2026': 6.9 },
  { group: 'Claims',     '2024': 2.8, '2025': 3.2, '2026': 3.3 },
  { group: 'Enterprise', '2024': 6.2, '2025': 6.6, '2026': 6.9 },
  { group: 'Digital',    '2024': 1.4, '2025': 2.1, '2026': 3.0 },
];

const margin = { top: 48, right: 130, bottom: 44, left: 56 };

const x0 = d3.scaleBand()
    .domain(data.map(d => d.group))
    .range([margin.left, width - margin.right])
    .paddingInner(0.2);
const x1 = d3.scaleBand()
    .domain(seriesKeys)
    .range([0, x0.bandwidth()])
    .padding(0.08);
const y = d3.scaleLinear()
    .domain([0, d3.max(data, d => d3.max(seriesKeys, k => d[k]))]).nice()
    .range([height - margin.bottom, margin.top]);
const color = d3.scaleOrdinal(seriesKeys, theme.palette);

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

svg.append('g')
    .attr('transform', `translate(${margin.left},0)`)
    .call(d3.axisLeft(y).ticks(6).tickFormat(d => `£${d}m`))
    .call(g => g.select('.domain').remove())
    .call(g => g.selectAll('text').attr('fill', theme.muted))
    .call(g => g.selectAll('line')
        .attr('stroke', theme.muted).attr('stroke-opacity', 0.25)
        .attr('x2', width - margin.left - margin.right));

svg.append('g')
    .attr('transform', `translate(0,${height - margin.bottom})`)
    .call(d3.axisBottom(x0))
    .call(g => g.select('.domain').attr('stroke', theme.muted))
    .call(g => g.selectAll('text').attr('fill', theme.foreground))
    .call(g => g.selectAll('line').attr('stroke', theme.muted));

svg.append('g')
  .selectAll('g')
  .data(data)
  .join('g')
    .attr('transform', d => `translate(${x0(d.group)},0)`)
  .selectAll('rect')
  .data(d => seriesKeys.map(key => ({ key, value: d[key] })))
  .join('rect')
    .attr('x', d => x1(d.key))
    .attr('y', d => y(d.value))
    .attr('width', x1.bandwidth())
    .attr('height', d => y(0) - y(d.value))
    .attr('rx', 2)
    .attr('fill', d => color(d.key));

svg.append('text')
    .attr('x', margin.left)
    .attr('y', 24)
    .attr('fill', theme.foreground)
    .attr('font-size', 13)
    .attr('font-weight', 600)
    .text('Run cost by domain');

const legend = svg.append('g')
    .attr('transform', `translate(${width - margin.right + 24},${margin.top})`);
legend.selectAll('g')
  .data(seriesKeys)
  .join('g')
    .attr('transform', (_, i) => `translate(0,${i * 18})`)
    .call(g => g.append('rect')
        .attr('width', 11).attr('height', 11).attr('rx', 2)
        .attr('fill', d => color(d)))
    .call(g => g.append('text')
        .attr('x', 16).attr('y', 9)
        .attr('fill', theme.foreground).text(d => d));

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