Donut Chart FAQ Block for React

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.

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.

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.

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.

Yes. The Accordion takes hiddenUntilFound, so every closed answer stays in the markup as hidden="until-found". One answer is open at a time.

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.