Donut Stat Card
Stat card with an inline SVG donut showing a 2 to 3 part breakdown beside the headline number and a ruled legend, no chart library.
Stat card with an inline SVG donut showing a 2 to 3 part breakdown beside the headline number and a ruled legend, no chart library.
The Application Collection unlocks the source for every Application block. All Access unlocks every Collection.
Already purchased? Log in
Donut Stat Card shows a single metric with a breakdown rendered as an inline SVG donut beside the headline number. The card tracks API requests this month at 2.4M total, then splits that into REST API at 60%, GraphQL at 29%, and Webhooks at 11%, each arc colored with a chart token. A ruled legend beneath each segment shows its label, share, and raw count. A footer line reads Resets Jun 30, 2026. Limit: 5M requests.
Segments are one const array; the arc math runs at module scope so the SVG paths are pre-computed. Using chart-1 through chart-3 tokens means the donut respects the user's theme without hardcoding any color values.
Reach for this block in dashboards or usage pages where a single metric needs a visible breakdown, an API quota split, a traffic source mix, or a storage type ratio, replacing the segments array with your data.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the API request breakdown by protocol. Other donut stat uses:
Tip: three segments is the readable maximum for a 48-pixel donut; merge tail categories into Other if you have more.