shadcn.io is not affiliated with official shadcn/ui
Headcount Stacked Chart About Block for Radix UI
Headcount over six years as stacked columns by department, where choosing a year (focus, hover or tap) lists its departments with counts and shares.
Installation
Overview
A headcount chart for React with Radix UI, written for Headcountly, fictional workforce-planning software. Six columns, one per year, each split into four departments in foreground weights. Every column is a button: focus it, rest a mouse on it or tap it, and it is highlighted while the readout beside the chart shows that year's total, how many people joined, and each department's count and share, the digits rolling to the new year. The title, the axis, the heights, the totals and the shares come from one list of departments, so the drawing and the text always agree, and a visually hidden table lists every number. The chart is a framed figure on one side of a solid divider and the readout the other; on a phone the readout sits under the chart. For about pages, hiring pages and investor updates. The figures are example data.
FAQ
How do I change the departments and the years?
DEPARTMENTS is a list with a name, a fill and the number of people at the end of each year, oldest first. Totals, the chart's ceiling, every share and the title are computed from it. Keep the same number of readings in every department. The shares are rounded by the largest remainder, so they always add up to 100.
How do I pick a year, and what happens with a keyboard?
Each column is a real button, so Tab moves between years and the year is chosen as it receives focus; a click or tap chooses it too, and a mouse resting on a column does the same (touch never needs hover). A polite status message announces the year and its total.
Why are the departments in greys?
So the block follows your theme and nothing but the real alerts uses colour. The departments are four weights of the foreground colour with a thin gap between them, and the readout repeats each swatch next to its name and number, so no one has to match shades by eye.