Bar Graph

Horizontal bars

Each bar fills to value / max. Pass max explicitly when bars are parts of a known whole (e.g. team headcount); omit it to let the tallest bar reach 100 % for relative comparison. The track uses the same colour at 15 % opacity — the same idiom as Activity Rings so both components read as one visual system.

Sizes — sm · md · lg

The size prop scales bar thickness and the type used for labels and stats simultaneously. Use sm inside dense dashboards, lg as a hero metric.

Vertical bars

Set direction="vertical" for column charts. Percentage and count sit above the bar; the label anchors below. Any Tailwind background class works for color — semantic tokens or the chart palette used by Activity Rings.