shadcn.io is not affiliated with official shadcn/ui
Stacked Bar Chart Stats Block for React
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 Base UI. 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.
Related
- Pro
Grouped Bar Chart Stats
Bar and columnTwo bars per month, this year solid and last year lighter, with a Chart and Table switch that swaps the drawing for a real table of the same numbers in the same box.
- Pro
Stacked Percentage Bar Stats
Parts of a wholeOne thick bar of a consultancy's week split into four segments at four weights with labels inside the wide ones, and a band of four legend cells under it; pointing at or focusing a cell brackets its segment.
- Pro
Stacked Area Chart Breakdown Stats
Area and lineA stacked area chart of weekly signups by channel in three foreground weights, with a legend of each channel's share beside it; pointing at a row or a layer keeps that layer and fades the others.
- Pro
Stacked Bins Histogram Stats
DistributionsA file-size histogram of seven bins stacked by kind (documents, images, video) in three foreground weights, with a Count and Share switch that turns absolute heights into 100% columns.
- Pro
Vertical Bar Chart Stats
Bar and columnSeven weekday columns for a gym's check-ins in a card in card, the busiest day drawn in full and the others at 30%, with the count above each column and a one-line takeaway under the axis.
- Pro
Two-Ring Donut Stats
Parts of a wholeA headcount donut with two rings: the departments' groups inside and their teams outside, each team sitting in its own group's arc, with a nested legend whose shares add up at every level.