GitHub

Components / Display & Media / Donut Chart

Donut Chart beta

Parts of a whole, as a ring — with the one segment that matters wearing the core.

Preview 
<figure class="k-donut" role="img" aria-label="Signups by channel: 52 percent direct, 31 percent referral, 17 percent from this week’s campaign" style="max-width:430px">
  <figcaption>Signups by channel</figcaption>
  <div class="k-donut-wrap">
    <div class="k-donut-ring">
      <svg width="158" height="158" viewBox="0 0 160 160" aria-hidden="true"><circle cx="80" cy="80" r="62" fill="none" stroke-width="19" style="stroke:var(--k-accent)" stroke-dasharray="199.6 190.0" stroke-dashoffset="-0.0"/><circle cx="80" cy="80" r="62" fill="none" stroke-width="19" style="stroke:var(--k-zinc-300)" stroke-dasharray="117.8 271.8" stroke-dashoffset="-202.6"/><circle cx="80" cy="80" r="62" fill="none" stroke-width="19" style="stroke:var(--k-core)" stroke-dasharray="63.2 326.3" stroke-dashoffset="-323.3"/></svg>
      <div class="k-donut-c"><b>2,418</b><span>total signups</span></div>
    </div>
    <ul class="k-donut-leg"><li><span class="dot" style="background:var(--k-accent)"></span>Direct<b>52%</b></li><li><span class="dot" style="background:var(--k-zinc-300)"></span>Referral<b>31%</b></li><li><span class="dot" style="background:var(--k-core)"></span>This week<b>17%</b></li></ul>
  </div>
</figure>
.k-donut{font-family:var(--k-font);text-align:left;margin:0}
.k-donut figcaption{font-size:13px;font-weight:600;color:var(--k-ink);margin-bottom:12px}
.k-donut-wrap{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.k-donut-ring{position:relative;width:158px;height:158px;flex:none}
.k-donut-ring svg{transform:rotate(-90deg)}
.k-donut-c{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.k-donut-c b{font-size:21px;font-weight:650;letter-spacing:-.02em;color:var(--k-ink)}
.k-donut-c span{font-size:11px;color:var(--k-ink-3)}
.k-donut-leg{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:12.5px;color:var(--k-ink-2)}
.k-donut-leg li{display:flex;align-items:center;gap:8px}
.k-donut-leg .dot{width:9px;height:9px;border-radius:3px;flex:none}
.k-donut-leg b{margin-left:auto;font-weight:600;color:var(--k-ink);font-family:var(--k-mono);font-size:12px;padding-left:16px}

Usage

For shares of a total with three to five parts. The segment the reader should act on takes the core; the rest stay in the accent family and zinc.

Accessibility

A chart is a picture of numbers: give the figure role="img" and an aria-label that states the conclusion ("Signups rose from 22 to 71 over the year"), and keep the data available as a table nearby.

Related parts

Aspect Ratio beta

A box that holds its shape — 16/9 for video, 4/3 for photos, 1/1 for avatars — whatever fills it.

ratiomediaresponsive

Avatar beta

Initials first, photo when there is one. Three sizes, a status dot, and a stacking group.

userprofileinitials

Bar Chart beta

Columns for comparing a handful of values — the chart people read correctly at a glance.

chartcolumnscomparison

Card beta

The universal container: a hairline box with a header, a body and a footer that agree with each other.

containerpanel
Previous
Data Table