Unit bars

The simple version

A block per unit, as many blocks as the value needs. The same structure with almost no styling: a good place to start your own.

How it’s built

Here the value decides how many slats there are. The day’s slat holds an overlap Plot with slats={Math.round(d.cups)}, so five cups means five slats, and each one is a Bar from its own index to the next: from={u.index} to={u.index + 1}. That is why the units line up in a row without any spacing to work out. A Label at d.cups puts the count at the end.

The gallery version adds:

• Books instead of cups, five to a spine, with slats={Math.ceil(d.books / 5)}.
• A shelf that looks lived in. Each spine’s height and shade come from a fixed function of its index rather than from Math.random(), so they stay the same every time the chart is drawn.
• A book that pulls half out on hover. The book is an element inside its Bar, so it can move and cast a shadow while the Bar stays where rhp put it.