shadcn.io is not affiliated with official shadcn/ui
Donut Chart FAQ Block for Ark UI
A FAQ for a wetland-conservation charity with where your money goes drawn beside the questions: a donut of the budget in three weights, a legend that emphasises its slice, and seven questions.
Installation
Overview
A donut chart FAQ for React with Ark UI. A framed card at the start holds "Where your money goes": a donut of the budget, programmes, fundraising and running costs, drawn in three weights of your foreground colour, with its share in the middle and a legend beside it. Hover over a legend row, focus it with the keyboard or press it to pin it, and the others fade while the middle shows that slice's share. The title and seven questions sit in the end column behind a split divider that runs from the page's top rule to the block's end; on a phone the chart comes before the questions. The slices and the shares are worked out from one typed budget, the first answer quotes the same shares, and a quiet line says the figures are examples. It's built from Accordion, Data List and Guides, with a hand-drawn SVG ring and your theme's tokens for every colour. For charities, public bodies and any product that wants to show where the money goes before it asks for it.
FAQ
How do I change the budget?
Edit BUDGET at the top of the file: each entry has an id, a label, the typical yearly spend in thousands of dollars, and the two classes that draw it, a stroke for the ring and a swatch for the legend. The shares are rounded from the amounts, so pick amounts whose shares add up to 100, as the comment beside the data says. The ring, the legend, the middle text and the first answer all read from the same table.
How is the donut drawn?
Each slice is a circle in one SVG with pathLength set to 100, so its dash length is its share in percent and its start is the total of the slices before it. A small gap separates the slices, and the ring is turned a quarter so the first slice starts at the top. Weights, not hues, tell the slices apart: the foreground at full strength, at 55 percent and at 30 percent, so the block follows any theme.
What do screen readers hear for the chart?
The ring is decorative and hidden from assistive technology; the legend is the data. Each row is a button named after its slice, with its share and amount as text beside it, so a screen reader reads "Programmes, 78%, $1.95m" without the picture. The rows are toggle buttons: pressing one pins its slice, and pressing it again lets go.
What about right-to-left layouts?
The ring and its middle text keep their left-to-right order in every direction, like any chart, while the legend, the title and the questions follow the page's direction. Shares and amounts sit in bdi elements, so "78%" and "$1.95m" keep their order.
Are the closed answers in the page's markup?
Yes. The Accordion takes lazyMount={false} and unmountOnExit={false}, so every answer renders from the start, hidden until its question opens. One answer is open at a time.
How does it fit on a phone?
Below the lg breakpoint the title comes first, then the chart card, then the questions, which run from rail to rail. The donut stays beside its legend even at 320 pixels, because the card is only as tall as the ring, and a legend row is as tall as a button, so it works with a thumb. Nothing scrolls sideways.