Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Stats blocks

Pro

Donut With Callouts Stats Block for React

A city's electricity mix as a framed donut with four callouts standing round it at twelve, three, six and nine o'clock, each joined to its arc by a thin leader line; on a phone, a two by two grid.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A donut with callouts for React with Base UI. A centred header ("Hydro and wind made 68% of March's power") sits over one framed figure (a hairline frame with a + on each corner). In the middle of the frame is a donut of the month's electricity by source, from twelve o'clock, clockwise, largest source first, in four solid foreground weights (100, 65, 40 and 20 percent) with a 2 px gap between neighbours and the total, rolling up once, in its hole. Four callouts stand round it at twelve, three, six and nine o'clock; a thin leader line with a dot runs from the middle of each arc, out past the ring, to its callout. Each callout holds the source's swatch and name, its gigawatt-hours and its share of the total, and the shares are rounded by the largest-remainder method so they add up to 100. The lines are computed where the module loads, in one SVG, and the callouts are HTML text. On a phone the leader lines go and the four callouts become a two by two grid under the ring. It's built from Guides and SlidingNumber, with SVG circles for the ring.

FAQ

How do I change the sources?

Edit SOURCES at the top of the file: each is a label and the gwh it generated. Four sources fit the four callout spots; each arc is given the nearest spot nobody has taken (slotsFor), so with other numbers the callouts may swap places and the lines follow. Shares, arcs, lines, the middle and the header's headline are all computed from the list.

How are the leader lines drawn?

At module scope: calloutOf takes the angle of the middle of an arc, puts a dot just outside the ring there, a short radial stroke further out and then a straight line to the point where its callout begins. They are drawn in one SVG laid over the frame (600 by 420 units, the same size as the frame) while the callouts are positioned HTML, so the text stays selectable and crisp. The frame is a fixed 600 px wide from md, so the lines and callouts always line up.

Why do the shares add up to exactly 100%?

sharesOf rounds every share down and gives the percent points that remain to the sources with the largest remainders, so a rounded set can't show 99 or 101. The callouts use those whole numbers; the arcs use the exact fractions.

Is it accessible?

The callouts are a description list (the source as the term, its gigawatt-hours and its share as descriptions) in the same order as the arcs, so a screen reader reads every number. The ring and the leader lines are hidden from assistive technology because the list says the same. The total in the middle is real text, and with reduced motion the arcs and the digits appear at once.

How does it fit on a phone?

Below md the leader lines are hidden and the callouts leave their spots: they become a two by two grid of cells with shared hairlines under the ring, inside the same frame. Nothing scrolls sideways at 320 px.

Does it work right to left?

The figure is kept left to right, because the lines are drawn to fixed spots round the ring and arcs always run clockwise. The header and the page around it follow the page direction; amounts and percentages sit in bdi elements.

  • Pro

    Donut Breakdown Stats

    Parts of a whole

    A budgeting app's month of spending as a framed donut with its total rolling up in the middle, beside a legend of five buckets with amount and share, the shares adding up to exactly 100%.

  • Pro

    Donut Center Readout Stats

    Parts of a whole

    An ad-spend donut whose middle follows your choice: it shows the total until you press a channel, then that channel's spend and share while its arc lifts out of the ring.

  • Pro

    Donut Pill Legend Stats

    Parts of a whole

    A traffic-source donut over a row of pill toggles: switch a source off and its arc leaves the ring, the others grow to fill it, and the shares and the total in the middle are worked out again.

  • Pro

    Half Donut Card Stats

    Parts of a whole

    A team's weekly capacity as a 180-degree arc of four segments with the total in its foot and a four-cell legend band, with no needle: one whole, shared out.

  • Pro

    Two-Ring Donut Stats

    Parts of a whole

    A headcount donut with two rings: the departments' groups inside and their teams outside, each team sitting in its own group's arc, with a nested legend whose shares add up at every level.

  • Pro

    Treemap Stats

    Parts of a whole

    A treemap of eight folders for a cloud-storage tool, each box as big as its share of the disk, at weights from 100% to 9%, with every folder's size and share in a list under the map.

All 122 stats blocks