Donut Chart

Features

• External data seam: js/data.js holds the dataset and js/api.js exposes an async fetchDonutData() that clones it, so the mock swaps for a real endpoint without touching render code.
• SVG stroke-arc ring over a faint full-circle track, with constant-width surface-coloured separator lines so segment gaps stay uniform from the inner to the outer edge.
• Subtle staggered segment fade-in: each arc settles with a light opacity-and-scale animation on a 70ms per-segment delay, not a big draw-in sweep.
• Hover or click a segment or legend row to highlight it, fade the others, and pin the selection; click again to unpin.
• Center readout cross-fades between the aggregate total and the highlighted segment's count and share.
• Share KPI headline with an animated count-up and a colour-coded trend delta with a directional arrow.
• Dotted-leader legend rows with colour dots and tabular-numeral values, mirrored in a visually-hidden data table.
• Download tool exports the segment data (segment, count, share) as a CSV file.

Accessibility

Decorative chart

The SVG ring carries aria-hidden="true"; the same data is mirrored in a visually-hidden data table.

Data table caption

The hidden table uses a caption naming the chart, with Segment, Count, and Share headers.

Card labelling

The card is aria-labelledby the visible chart title.

Labeled control

The download button carries an aria-label of "Download data as CSV".

Focus visibility

A global :focus-visible outline drawn with the --ring token.

Reduced motion

prefers-reduced-motion collapses all animations and transitions.

Customise it with AI

Open Donut Chart in Atheros AI Builder, pick a design system and ask the AI assistant to change the layout, copy or behaviour — the chart is regenerated against your tokens. Take the HTML, CSS, JS and React source with you, or pull it into your repo from Claude Code, Cursor or Codex over MCP.