shadcn.io is not affiliated with official shadcn/ui
Headcount Stacked Chart About Block for React
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 Base 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.
Related
- Pro
Team Breakdown Bars About
Team and officesA team counted three ways in 100% bars (by function, location and tenure), where choosing a segment in the legend names its share and count under the bar.
- Pro
Growth Heat Table About
NumbersFive years of growth in one framed table: revenue, customers, team and NPS by year, each cell shaded by its size against its row, with a closing row of year-on-year revenue growth.
- Pro
Team Avatar Strip About
Team and leadersA compact about strip for an HR tool: overlapping initials, the headcount, a department bar that names a segment on hover, focus and tap, and a hiring line.
- Pro
Office Headcount Bars About
Team and officesOffice rows for a global payroll company, each with a country code, a time-zone offset and a headcount bar drawn to the scale of the largest office.
- Pro
Representation By Level About
Team and officesA representation section for a hiring company, with paired bars for the company and its leadership, the gap written out, and the hiring changes still in force.
- Pro
Stacked Bar Chart Stats
Bar and columnTwelve weeks of support tickets stacked by priority in three foreground weights, with toggles that double as the legend: switch a priority off and the stack, the scale and every total re-read.