shadcn.io is not affiliated with official shadcn/ui
Stacked Bar Chart Stats Block for React Aria
Twelve 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.
Installation
Overview
A stacked bar chart for React with React Aria. A split: the copy cell holds the header, "Week 7 was the busiest, with 147 tickets", three toggle buttons (Urgent, Normal, Low) that are also the legend, each with the weight it is drawn in, and three figures that roll when you change anything: tickets shown, tickets per week and the busiest week. The framed chart, at the start from lg, stacks twelve weeks of tickets with the urgent ones at the base in the full text colour, then normal at 55% and low at 25%, with a thin gap between the segments. Switching a priority off re-scales the stack: the top of the chart, the gridlines and the totals re-read for what is left, and the segments animate to their new heights. At least one priority always stays on. A visually hidden table has every number. Everything is computed from one typed list of weekly counts.
FAQ
How do I change the priorities and weeks?
Edit PRIORITIES at the top of the file: each has an id, a name, a fill (a foreground weight) and its weekly counts, bottom of the stack first. All the priorities must have the same number of weeks; change grid-cols-12 to match. The scale, ticks, totals, headline and the chart's accessible name are derived.
How does switching a priority off re-scale the chart?
The top of the chart is the busiest visible week rounded up to a multiple of 20, with gridlines at quarters of it. Hiding urgent and normal tickets, for instance, leaves a chart that tops out at 60 so the low ones fill the height. Segment heights are percentages of that scale, so a CSS transition animates the change, and it is off under reduced motion.
Why can't I switch every priority off?
An empty chart says nothing, so the last pressed toggle ignores a press. It stays pressed and keyboard focus stays on it. A short sentence under the figures, announced politely, says what is shown.
Is the chart accessible?
Yes. The bars are drawn for the eye and hidden from assistive technology; the chart has an accessible name that gives each priority's total and the busiest week, and a visually hidden table lists every week with its counts for each priority. The toggles are named buttons with a pressed state and visible focus, and the digits are in bdi elements. The chart box is dir="ltr" because time runs from the start to the end in every language.