shadcn.io is not affiliated with official shadcn/ui
Horizontal Bar Chart Card Stats Block for Ark UI
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 Ark 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).