SVG Donut Chart

Donut charts in SVG: math, technique and when to use them

A donut chart is a pie chart with the center removed — typically a hole at 50–70% of the radius. The hollow center is more than decoration: it gives you a place to put the total value, a unit label, an icon or a brand mark, which is why donuts dominate KPI cards and executive dashboards. Apple Watch's signature fitness UI stacks three concentric donuts (Move, Exercise, Stand) into a single, instantly readable health summary.

There are two common SVG techniques. The first uses one <path> per slice with explicit arc commands. The second — simpler and idiomatic for two-slice donuts — uses a single <circle> stroked with stroke-dasharray and stroke-dashoffset. The arc length follows the formula 2π · r · (percentage / 100).

<svg viewBox="0 0 42 42" width="120" height="120">
  <circle cx="21" cy="21" r="15.9" fill="none"
          stroke="#e5e7eb" stroke-width="6"/>
  <circle cx="21" cy="21" r="15.9" fill="none"
          stroke="#3b82f6" stroke-width="6"
          stroke-dasharray="60 40" stroke-dashoffset="25"
          transform="rotate(-90 21 21)"/>
</svg>

Donut vs pie vs bar

Edward Tufte and Stephen Few are famously skeptical of pies and donuts: human eyes compare bar lengths far more accurately than circular angles or areas. The rule of thumb is to use donut/pie only for 2–3 categories, when the goal is part-to-whole emphasis, and when a single insight matters more than precise comparison. For four or more slices, a horizontal bar chart almost always communicates better. For hierarchical part-to-whole, a treemap scales further.

Libraries and ecosystem

D3.js is the industry standard, with d3.arc() and d3.pie() as the primary helpers. Chart.js ships a one-liner doughnut chart. ECharts (Baidu) and AntV (Alibaba) are popular alternatives from the Chinese ecosystem with strong defaults. No-code tools like Datawrapper, Flourish and Observable produce embeddable donuts from a CSV in seconds.

Variants: stacked, half donut, gauge

The stacked donut renders multiple concentric rings, each representing an independent series — the Apple Watch pattern. The half donut (semicircle) saves vertical space and works well for mobile KPI cards. The gauge variant uses an arc from −90° to 90° to show a single percentage, common in performance dashboards. Animations are usually a clockwise grow from 12 o'clock, easily produced by interpolating stroke-dashoffset from full circumference to the target value.

FAQ

Donut or pie — what's the practical difference? The center hole. If you need to display the total, a unit or an icon at the center, donut wins. If you have no center content and want maximum area for the slices, pie is fine.

What if I have more than three slices? Reconsider the chart. With four or more categories, a sorted horizontal bar chart is more accurate. If you must keep a donut, group small slices into "Other" and label only the top ones.

Do I need a legend? Yes, unless the slices are directly labeled. Pair colors with text labels — color alone fails for colorblind users. Use a categorical, colorblind-safe palette such as Tableau 10 or d3.schemeCategory10.

How do I make the SVG accessible? Add role="img" and an aria-label summarizing the data (e.g. aria-label="60% complete, 40% remaining"). For interactive donuts, expose each slice as a focusable element with its own label.