shadcn.io is not affiliated with official shadcn/ui
Stacked Percentage Bar Stats Block for React
One 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.
Installation
Overview
A stacked percentage bar for React with Base UI. A start-aligned header names the biggest share of the week. Under it one band that runs from rail to rail and ends the block holds a single thick bar split into four segments, full strength, 70%, 40% and 20% with a 2 pixel gap between them, with the share written inside every segment wider than 12%, and below it four legend cells that share hairlines (a row of four from lg, two by two on a phone). Each cell has the kind of work, its share and its hours. Pointing at or focusing a cell draws a bracket above its segment; pressing it keeps the bracket until you press again. The shares are rounded by the largest-remainder method so they add to exactly 100, and the bar, the labels, the legend and the headline come from one list of hours. For time and budget allocation, traffic sources and any whole split into a few parts.
FAQ
How do I change the parts?
Edit WORK at the top of the file: a name and the hours for each part, biggest first. The shares, the segment widths, the labels and the headline are computed from it. With a different number of parts, add or remove an entry in TONES (the weights) and change the legend's lg:grid-cols-4.
Why do the shares add to exactly 100?
Each share is rounded down and the leftover points go to the largest remainders, so four rounded shares never add to 99 or 101. The segments are sized by those same whole numbers, so the bar and the legend agree.
How does the bracket work?
Each legend cell is a button. Pointing at it or focusing it with the keyboard shows a bracket above its segment; pressing it keeps the bracket (the cell reports that with a pressed state), which also makes it work on touch, where there is no pointing. Leaving a cell returns to whichever one was pressed, if any.
Is it accessible?
The bar is a list that reads each part and its share ("Client delivery: 58%"), with the drawn labels hidden from assistive technology. The legend cells are real buttons with visible focus and a pressed state. Labels inside segments use the background colour on the two dark ones and the text colour on the two light ones, so they keep their contrast in every theme. Numbers sit in bdi elements and the bar is left to right in right-to-left pages.
Why is there no line under the legend?
The band ends the block. The next section draws its own top rule along the band's foot, so a bottom border here would double it, and the column has no bottom padding for the same reason. The band's top rule, with a + on each rail, comes from the Guides component.
What moves, and how does it fit on a phone?
The header and the band fade up once on load; the bracket fades in and out with a short CSS transition, off under reduced motion. On a phone the legend becomes a two-by-two grid with hairlines between the cells and the bar keeps its labels, so nothing scrolls sideways at 320 pixels.
Related
- 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.
- 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.
- Pro
Donut Center Readout Stats
Parts of a wholeAn ad-spend donut whose middle follows your choice: it shows the total until you press a channel, then that channel's spend and share while its arc lifts out of the ring.
- Pro
Treemap Stats
Parts of a wholeA treemap of eight folders for a cloud-storage tool, each box as big as its share of the disk, at weights from 100% to 9%, with every folder's size and share in a list under the map.
- Pro
Split Subvalues Hero Metric Stats
Hero metricA parcel carrier's weekly total in display type at the start of a split, with its three service levels as rows at the end, each with its count and a share bar, so the shares add up to exactly 100%.
- Pro
Pipeline Stage Strip Stats
FunnelsA sales pipeline as five chevrons as wide as the deals in each stage, in deepening weights, with the deals and their value in a cell under each and the stage worth the most picked out.