Chart 2 of 15

Grouped bars with a line overlay

Use it to compare two things per period (money in against money out) and show a third derived number, such as the difference, as a line. Columns are clickable for drill-down.

Live demo

Made-up data. Try the options, then switch to the empty and one-point states.

Focus the chart with Tab, then use ← → Home End to move between columns; Esc closes the tooltip. On a phone, touch a column.

How to use it

JavaScript
const chart = barChart({
  cats: months,
  xlabel: monthName,
  mode: 'grouped',
  series: [
    { name: 'Money in',  colour: 'var(--c3)', values: income },
    { name: 'Spending',  colour: 'var(--c2)', values: spending }
  ],
  lines: [{ name: 'Saved', colour: 'var(--ink)', values: saved }],
  cap: 4200,                       // bars above this get a break and a ▲ label
  onClick: i => openMonth(months[i]),
  label: 'Money in, spending and saved by month'
});

Options

cats
Array of category labels, one per column group.
series
[{ name, values, colour }]. In grouped mode each series gets its own bar.
mode
'grouped' or 'stacked' (the default). See the stacked page.
lines
[{ name, values, colour }] drawn over the bars; may go below zero.
cap
Clip the axis. Bars above it get a zig-zag break and a ▲ label.
onClick
(index) => void. Makes each column a click target.
totals
false hides the value above each column (shown automatically for up to 14 columns).
xlabel, tipfmt, yfmt, height
Formatters and size.