Chart 12 of 15

Ranked horizontal bars

Use it for rankings with long labels (merchants, products, people) where columns would force tiny rotated text. It is plain HTML, so it wraps, selects and reads naturally.

Live demo

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

When rows are clickable they are keyboard-focusable: Tab to a row and press Enter.

How to use it

JavaScript
container.append(
  hbars([
    { label: 'Greenleaf Market', value: 612, sub: '14 payments, average £44',
      colour: catColor('Groceries'), onClick: () => openMerchant('Greenleaf Market') },
    { label: 'Northline Rail',   value: 388, sub: '9 payments', tag: '▲ 12%',
      colour: catColor('Transport') }
  ], { fmt: v => '£' + Math.round(v), empty: 'No merchants yet' })
);

Options

items
[{ label, value, sub?, tag?, colour?, onClick? }]. Sorted by you; bars scale to the largest.
fmt
Value formatter (default money0).
empty
Text for the empty state.