VizSoup

Pie and donut chart maker

One column of labels, one column of values. Shares are worked out for you and printed next to every slice, so the chart can be read without judging angles.

Sample: an invented monthly household budget.

Style
Monthly budgetDonut chart of 8 parts totalling 3,360.Housing: 1,450 (43.2%)Groceries: 520 (15.5%)Savings: 400 (11.9%)Transport: 310 (9.2%)Utilities: 210 (6.3%)Insurance: 180 (5.4%)Eating out: 160 (4.8%)Other: 130 (3.9%)Total3,360Housing1,450 · 43.2%Groceries520 · 15.5%Savings400 · 11.9%Transport310 · 9.2%Utilities210 · 6.3%Insurance180 · 5.4%Eating out160 · 4.8%Other130 · 3.9%

Shares of the total

Label Value Share Angle
Housing 1,450 43.2% 155.4°
Groceries 520 15.5% 55.7°
Savings 400 11.9% 42.9°
Transport 310 9.2% 33.2°
Utilities 210 6.3% 22.5°
Insurance 180 5.4% 19.3°
Eating out 160 4.8% 17.1°
Other 130 3.9% 13.9°

How to use it

Paste two columns: a label and a number. Whether the first row holds column names is detected (a first row containing text is treated as a header); set "First row" yourself if the guess is wrong. You can also paste a wider table and choose which column holds the labels and which holds the values. Rows with the same label are added together, so a raw list of expenses, one row per purchase, turns into one slice per category.

The table under the chart is the result that matters. It lists each slice's value, its share of the total and the angle it occupies, and the SVG download carries the same labels and percentages in its legend.

The arithmetic

Everything comes from one division:

Slices start at 12 o'clock and run clockwise, largest first unless you untick the sort. Percentages are rounded to one decimal place for display, so they can add up to 99.9% or 100.1%; the slices themselves are drawn from unrounded values.

Worked example

The sample budget has eight lines totalling 3,360. Housing is 1,450, so its share is 1,450 / 3,360 = 0.4315, or 43.2%, and its slice spans 155.4°. Groceries at 520 are 15.5%, and savings at 400 are 11.9%. The three smallest lines (insurance 5.4%, eating out 4.8%, other 3.9%) are close enough that the eye cannot rank them reliably from the chart alone. The printed percentages settle it.

When a pie chart is the wrong choice

People judge angles and areas less accurately than lengths along a common baseline. That finding goes back to Cleveland and McGill's graphical perception experiments in the 1980s and has been repeated since. A pie works when the message is "one part is about half" or "these three parts make up most of it". It does not work when the reader needs to rank similar slices, compare two pies, or see change over time. Use this rough guide:

Your questionBetter form
What share is each part of one total?Pie or donut (2–6 parts)
Which part is biggest, when they are close?Sorted bar chart
How did the shares change between years?Grouped bars or lines
Parts that do not add up to a wholeBar chart, never a pie
More than eight categoriesBar chart, or group first

One trap is data that does not form a whole: survey questions where people could tick several answers, or percentages that each come from a different base. Their total is meaningless, so the slices are too. The bar chart tool handles those cases, and the pivot table will total a long list by category before you chart it.

Colours and accessibility

Slices use the site's eight-colour categorical palette in a fixed order, and a thin gap in the background colour separates neighbouring slices so the edges stay visible when two colours are close. The order was checked so adjacent colours remain distinguishable under the common forms of colour-vision deficiency. Each legend row carries the label and percentage in text, and every slice shows its exact value on hover. The chart follows your system's light or dark mode, and the download keeps whichever you were looking at.

Common questions

How do I work out the percentages for a pie chart?

Divide each value by the total and multiply by 100. For the sample budget, housing is 1,450 out of 3,360, which is 43.2%. To draw the slice by hand, multiply the share by 360: 0.4315 × 360 = 155.4 degrees.

What is the difference between a pie chart and a donut chart?

Only the hole. A donut removes the centre, which leaves room for the total and makes people compare arc lengths rather than angles. Neither is more accurate in any meaningful way; pick the one that suits the page. Both are drawn from the same shares here.

Why are some of my categories grouped as "Other"?

The chart uses eight colours at most. With more than eight categories, the seven largest keep their own slice and everything else is added together as "Other", so no two slices share a colour. The table under the chart still lists the values that were drawn; the full breakdown is in your data.

Can a pie chart show negative numbers?

No. A pie shows parts of a positive whole, and a negative part has no meaning as a slice. Zero and negative values are left out and the tool says how many were dropped. If your data has losses as well as gains, a bar chart is the right form.

Why did two of my rows become one slice?

Rows with the same label are added together. That lets you paste a raw list of transactions, one row per purchase, and get one slice per category without summarising it first. The pivot table tool gives the same totals as a table.

Other tools