Pie Chart Generator

Create pie and donut charts from data with custom colors, labels, legends, and SVG/PNG export.

Tested tool guide Tested browser tools Checked August 16, 2026

What Pie Chart Generator does, with a checked example

Enter a list of labeled numbers, one slice per line, and the tool renders them as a pie or donut: each slice occupies the same fraction of the circle as its value does of the total. Slice colors, labels, and the legend are all editable, and the finished chart exports as SVG or PNG. The thing users most often misread is what the chart shows: a pie encodes proportions only, never magnitudes. A slice that is 30 percent is always the same 108 degrees, whether the number behind it is 30 or 30,000.

Worked example

A concrete input and expected output from the current implementation.

Input

Rent: 1200
Food: 600
Transport: 300
Savings: 900

Expected output

A four-slice pie chart: Rent at 40 percent (144 degrees), Food at 20 percent (72 degrees), Transport at 10 percent (36 degrees), Savings at 30 percent (108 degrees), each slice in its assigned color with matching legend entries.

Each slice's angle is its value divided by the total, 3000, times 360 degrees: 1200 / 3000 x 360 = 144, and so on, which is why the four angles sum to 360 and the percentages to 100.

How the result is produced

Slice geometry

The tool sums every entered value, then gives each slice the angle that value's share of the sum earns: value divided by total, times 360 degrees. Slices are laid out around the circle in the order the data was entered, so reordering the input changes the chart's look but not its proportions. Donut mode keeps the same geometry and simply cuts a hole out of the middle.

Export formats

SVG export writes the chart as vector markup: slices, labels, and legend remain separate shapes that scale without quality loss and stay editable in drawing programs. PNG export produces a fixed-size raster image, ready to drop into documents or slide decks; re-export at a larger size rather than scaling the image up. Both exports are generated in the browser, with no upload to a server.

Good uses

Monthly budget review: paste the month's spending by category and get an instant read on where the money actually goes, with slices you can recolor to match the rest of the report.
Poll and survey write-ups: turn respondent counts per answer into the share behind each option, with the legend carrying the full answer text while the chart stays clean.
Report visuals from hand-tallied numbers: traffic sources, time use, market share, or any part-to-whole breakdown that needs a presentable chart, exported straight into a slide.

Limits and checks

Small slices: once a category falls below roughly 5 percent of the total, its slice becomes a thin sliver whose angle is hard to judge and whose label barely fits; fold small categories into an 'Other' slice before generating.
Color is the only link between a slice and its category: the legend maps hue to label, and two close hues produce slices the reader cannot tell apart, a failure invisible to anyone with full color vision. Pick clearly separated colors and verify the finished chart in the colors you chose.
The math assumes non-negative parts: a zero entry produces no slice at all, and a negative entry has no honest share of a total, so strip zeros and negatives out before generating, or the proportions will not match the story you are telling.

Common questions

How is the percentage for each slice calculated?

Each value is divided by the sum of all values. If you enter Rent 1200, Food 600, Transport 300, and Savings 900, the total is 3000 and Savings is 900 / 3000, or 30 percent. Because every slice is sized from the same total, adding one more entry shrinks every existing slice, which surprises people who expect the first slices to stay put.

Which export should I use, SVG or PNG?

SVG for anything that might be resized or edited later: it is vector markup, so it stays crisp at any size and remains editable. PNG for a finished raster image you are pasting straight into a document or message, at the pixel size it was exported. If a layout needs a much larger version later, re-export rather than scaling the PNG.

References and verification

The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.