shadcn.io is not affiliated with official shadcn/ui
Horizontal Bar Chart Card Stats Block for React
Nine ranked survey answers where each row is its own bar: a quiet fill from the start behind the label, the share and the count at the end, and the leading row a little stronger.
Installation
Overview
A horizontal bar chart for React with Base UI. A start-aligned header names the leading answer, "Slow code reviews hold back 31% of teams", with the survey's size at the end of the row. Under it, nine answers form a ranked list in a band that runs from rail to rail and ends the block. Each row is its own bar: a quiet fill runs from the start of the row to the answer's share of the leader's, drawn behind the rank and the label, with the share and the number of teams at the end; the leading row's fill is a little stronger and its label heavier. Shares are rounded by the largest-remainder method, so they always add to 100. Everything is computed from one typed list of answers and counts, and every row says its rank, label, share and count in text, so the fill is pure decoration.
FAQ
How do I change the answers?
Edit ANSWERS (a label and the number of teams that gave it, in descending order) and QUESTION. Totals, shares, fill widths, the headline and the leader are derived. Shares are whole numbers that add to 100: each is rounded down and the answers with the largest remainders get the missing points.
What does a bar's length mean?
It is the answer's count relative to the leading answer, so the leader fills its row and the others are proportions of it; the header says so. If you would rather draw true shares of the total, divide by TEAMS instead of LEADER in ROWS.
Is the chart accessible?
Yes. It is an ordered list named after the survey question; each item reads its rank, label, share and count as text. The fills are hidden from assistive technology, the figures are in bdi elements, and the text is dark on a light tint in every theme (checked for contrast on the stronger leader fill).
Related
- Pro
Score Bar Leaderboard Stats
LeaderboardsSeven quiz players in a band that runs from rail to rail, each row a name, a context line, the points and a thin bar measured against the leader's score.
- Pro
Progress Bar List Stats
Goals and progressSix launch milestones in one hairline frame, each with its owner and due week, its count against the target, the percentage and a Progress bar, under a headline that counts the milestones done.
- 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
Vertical Stages Funnel Stats
FunnelsA checkout funnel as five left-anchored bars with a connector row between each that says how many were lost, beside the overall conversion as a big number and the stage that leaks the most.
- 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
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.