shadcn.io is not affiliated with official shadcn/ui
Donut Breakdown Stats Block for Vue
A budgeting app's month of spending as a framed donut with its total rolling up in the middle, beside a legend of five buckets with amount and share, the shares adding up to exactly 100%.
Installation
Overview
A donut breakdown for Vue with Ark UI. A split: at the start a square, framed donut (a hairline frame with a + on each corner) of the month's spending, with the total in its middle, rolling up once; at the end a short header ("Housing took 45% of March", then one sentence that says how the month compares with the one before) and a legend of the five buckets as rows. Each row has a swatch, the bucket's name, its amount and its share. The arcs start at twelve o'clock, run clockwise, largest first, in five solid foreground weights (100, 65, 40, 20 and 10 percent) with a 2 px gap between neighbours, so the chart reads in any theme without a hue. The shares are rounded by the largest-remainder method and always add up to 100. It's drawn with SVG circles and a dash pattern, with the numbers as real text in a description list, and it needs no chart library. On a phone the header comes first, then the donut, then the legend.
FAQ
How do I change the buckets?
Edit BUCKETS at the top of the file: each bucket is a label and the dollars spent. Add or remove buckets (up to five weights are defined; add a sixth to WEIGHTS for more). The total, every share, every arc, the middle and the header's headline are computed from the list, and FEBRUARY is the month before, for the comparison in the header's sentence.
Why do the shares add up to exactly 100%?
sharesOf rounds every share down and then gives the spare percent points to the buckets with the largest remainders. Rounding each to the nearest whole number can total 99 or 101, which looks like a mistake beside a total. The legend uses these whole numbers; the arcs use the exact fractions.
Why are the segments shades of one colour?
Primary stays on a page's one main action, and chart hues change from preset to preset. The five arcs are the foreground at 100, 65, 40, 20 and 10 percent, mixed with the background into solid colours (never see-through), and the legend repeats each shade as a swatch. The meaning is never carried by colour alone: every arc has its name, amount and share in text beside it.
Is it accessible?
The legend is a description list (a term for the bucket, its amount and share as descriptions), so a screen reader reads every number. The drawing is hidden from assistive technology because the list says the same, and the figure's caption says how the arcs run. The total in the middle is real text; with reduced motion the arcs and the digits appear at once.
Does it work right to left?
The donut sits in a box that is kept left to right, because a chart's direction is its own: arcs always run clockwise from twelve o'clock. The legend and header follow the page direction, and amounts and percentages are wrapped in bdi elements so signs and units stay in reading order.