Create pie and donut charts from data with custom colors, labels, legends, and SVG/PNG export.
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.
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.
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.
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.
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.
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.
The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.
Pick colors visually and convert between HEX, RGB, HSL, and CMYK formats.
Preview how screen colors translate to print with CMYK simulation and proofing.
Preview any Google Font at various sizes, weights, and with custom sample text.
Create linear, radial, and conic CSS gradients with a visual editor and code output.
Generate harmonious color palettes from a base color using color theory rules.
Simulate how colors appear to people with various types of color vision deficiency.