Charts & Stats
v1.0.0Added in 1.0.0
Several goals at once as concentric activity rings or 270° radial bars, each filling toward its own target and lapping past 100%.
The first time the chart scrolls into view the rings sweep in one after another on a soft spring; a ring past its target keeps going for a second lap, its end cap casting a small shadow on the lap below. Hover a ring (or a legend row) and the others dim while the hole shows that ring's percent and name; when the hole is too small, a readout floats beside the ring's end instead. Click or tap a ring or a legend row to select it: it stays lit (even while you preview another ring) and the center keeps its readout; tap it again, or tap the hole, to clear. On a phone the ring nearest your finger wins (thin rings are easy to hit) and the legend sits below the chart under 480px of width. With the keyboard, Tab to the chart: the arrow keys walk the rings (Up / Left outward, Down / Right inward), Home / End jump to the outermost and innermost ring, Enter or Space selects, Escape clears; a live region reads each ring. The legend rows are buttons in the tab order after the chart. When the values change, the rings glide to their new length.
npx wingo-ui@latest add radial-barPro item: the CLI needs a Pro account. See plans
Acme CRM · Sep 24, 2026, 4:40 PM · Tap a ring or a legend row to select it. Tasks closed uses the chart's max.
selected: none · default max: 100 · format: number · locale: auto · tooltip: auto · labels: on · sweep-in: on