100% segmented bars

How it’s built

One bar made of segments is an overlap Plot inside a slat. overlap puts every slat of that Plot in the same space instead of stacking them, so the segments sit on one line and only their from and to keep them apart. Those numbers come from two helpers: shares(d.hours) turns the hours into shares of 100, and stackUp turns the shares into where each one starts and ends. The segment’s slat is a single Bar with no wrapper at all, which an overlap Plot allows.

The gallery version adds:

• Numbers only where they fit. A segment narrower than 9% hides its number, and on a narrow battery a container query raises that to 16%.
• One app followed everywhere. Pointing at an app, in the key or in any battery, or clicking to keep it, all end up as a single value passed to the Plot as focus, so every battery lights that app and fades the rest.

The simple version

Shares of 100, stacked in each bar. The same structure with almost no styling: a good place to start your own.

The gallery version