Donut chart maker — a ring chart with the total in the middle

How to use the donut chart maker

1. Paste your data into Chart data, one slice per line, such as Mobile,6200. A header line like Device,Sessions is detected automatically; change First row if the guess is wrong.
2. Type a Chart title and a Centre label (for example “Visits” or “Responses”).
3. Move the Hole size slider between 20% and 85% of the radius. The default is 55%.
4. Set Group slices smaller than to merge tiny slices into one “Other” segment, and choose whether to Sort slices largest first and Show percentages on slices.
5. Pick a Colour theme, Background, Width and Height, then press Copy SVG or download donut-chart.svg. The Slices table below has its own CSV button.

What it does and when to use it

A donut is a pie with the centre cut out. The empty middle is useful: it holds one headline number, so a single graphic shows both the total and how it splits. It suits a dashboard tile or a slide such as “10,000 sessions, 62% on mobile”.

It works best with two to six parts of one whole. With more than seven slices the tool warns you, because thin arcs are hard to compare. In that case group the small ones, or switch to a horizontal bar chart, which ranks many items clearly. If you do not need the centre figure, the classic pie chart maker uses the same data format.

How it works

Each positive value becomes an arc whose angle is value ÷ total × 360°, starting at 12 o’clock and running clockwise. The ring is drawn between the outer radius and an inner radius equal to the hole percentage. Percentage text is placed halfway through the ring, and only on slices of 4% or more, so small arcs are not crowded. The text colour flips between dark and white to stay readable on each segment colour.

The finished file is a plain SVG with a <title> and a <desc> that lists every slice, which screen readers can announce. Everything is drawn in your browser; the numbers are not sent anywhere.

Worked examples

Sessions by device (the sample). Mobile 6,200, Desktop 3,100 and Tablet 700 give a centre total of 10,000. The Slices table reads:

Label | Value | Share % | Angle (°)
Mobile | 6200 | 62.0 | 223.2
Desktop | 3100 | 31.0 | 111.6
Tablet | 700 | 7.0 | 25.2

Three equal votes. A, B and C at 1 each, Centre label “Votes”. Each arc is exactly 120°, and the shown shares are 33.4, 33.3 and 33.3 so they total 100.0.

Grouping small channels. Six traffic sources with Group slices smaller than 5% and a 70% hole. Referral (250) and Ads (150) fall under 5% of 9,000, so they merge into Other | 400 | 4.4 | 16. The centre shows 9,000 over “Visits”.

Limits and tips

• Grouping only happens when at least two slices fall under the limit; a single small slice keeps its own name.
• Labels and legend widths are estimated rather than measured, so very long names are cut with “…”. Widen the chart if that happens.
• For a single headline value against a target, a gauge chart reads faster than a two-slice donut.