Custom PRD build: Practical Tips for Clean Pie and Donut Charts
Reviewed by the OnlineFree.app team · Updated
Key points
- Custom PRD build turns pasted labels and values into a pie or donut chart, downloadable as SVG or PNG.
- Labels and values pair by position, so mismatched line counts silently shift every slice after the gap.
- The tool accepts up to 40 slices, but four to six is where a pie chart stays readable.
- Percentages come from the sum you paste, so values need not total 100 — but a typo skews them all.
- SVG is a standalone vector file for slides and print; PNG exports at 2x the preview's pixel size.
How Custom PRD build turns pasted numbers into a chart
Paste your labels in one box and your numbers in another, and Custom PRD build draws a titled pie or donut chart you can download as SVG or PNG. Everything renders in your browser as you type, so there is no upload step and no account to create.
The default example — Chrome, Safari, Edge, Firefox with 65, 18, 10 and 7 under the title "Browser Share" — is a useful sanity check. Replace it with your own data and the preview redraws on every keystroke. Controls sit on the left, the live chart on the right, and the download buttons directly beneath the preview, so the paste–glance–download loop fits on a single screen.
That loop is the whole point. Most people we built this for already have a handful of numbers sitting in a spreadsheet; they need a presentable image for a slide or a post, not a new tool to learn.
Match every label with exactly one value
The most common failure we see is a count mismatch: five labels pasted against four numbers. Values pair with labels by position, not by name, so a missing line silently shifts every slice after it. The tool trims blank lines and warns when the two counts disagree, but it cannot guess which row you dropped.
Until that warning clears, treat the chart as provisional. A quick habit that works: count your label lines first, then paste the numbers, then check the legend — it lists every slice with its value, which makes a missing or doubled category obvious at a glance.
The field caps out at 40 slices. That limit exists to keep the legend readable, not because 40 slices make a good chart.
How many slices before a pie chart stops working?
Four to six slices is where a pie chart does its job. Custom PRD build will accept up to 40, but that is a technical ceiling, not a design target. Past roughly eight wedges, readers stop estimating angles and start reading the legend instead — at which point a bar chart would serve them better.
Pie charts are well documented as weak at comparing slices of similar size, because human eyes judge angle poorly compared with length. The Wikipedia entry on pie charts covers this trade-off and when a different form is the honest choice.
When your data has a long tail, group everything below about 3–4% into a single "Other" slice before pasting. Sorting values from largest to smallest also helps, and it costs you nothing: the tool draws slices in the order you supply them.
Pie or donut, and what the 55% hole changes
The donut option uses an inner radius of 55%, which leaves a ring occupying roughly 70% of the disc's area and puts a hole in the middle of the chart. Slice arcs stay proportional to their values either way, so the choice is mostly about where the chart will live: a donut gives you a natural centre to place a total, a headline number, or a short label.
Percentages are on by default and are computed from the sum of whatever you paste, so your values do not need to add up to 100. That is convenient, and also the easiest way to publish a wrong chart — a mistyped 650 instead of 65 barely changes the picture but quietly moves every percentage.
Switch percentages off and you get labels only, while the legend keeps showing raw values in both modes. For small charts on a busy slide, labels-only is often the cleaner read.
SVG or PNG: which export to use
SVG is a serialized standalone vector file, which means it stays sharp at any size and can be reopened in Figma, Illustrator, or Inkscape if a label needs nudging. PNG is a 2x canvas raster at the preview's pixel size, so a 600px-wide preview downloads as roughly 1200px — plenty for a document or a social post, thin for large-format print.
The W3C SVG specification is the reason SVG travels so well: it is plain text, so it also survives being pasted into a codebase. Custom PRD build includes a copy-SVG-code button for exactly that case.
If a downstream tool asks for a specific pixel width, resize the PNG after download rather than assuming the export matched your target. Downscaling a 2x raster is safe; upscaling is not.
Four data mistakes to fix before you paste
Negative values are rejected outright, because a pie cannot show a negative slice. If you need to represent a decline, chart the absolute values and say so in the title, or pick a different visualisation.
If every value is zero, the tool shows an empty-state preview instead of dividing by zero — a deliberate choice so the screen stays honest rather than drawing something meaningless. Strip currency symbols, thousands separators, and percent signs too: the values field wants plain numbers, and stray characters are exactly what a spreadsheet copy-paste drags along.
Finally, keep the title under 80 characters and short enough to read at slide size. When you are done, sanity-check the total against your source — the percentages are only as good as the numbers you typed. For other quick jobs, OnlineFree.app hosts the rest of our browser-based tools.
Frequently asked questions
Is Custom PRD build free, and do I need an account?
Custom PRD build is free and requires no sign-up. Open the page, paste your labels and values, and download the chart. Because it is a browser tool with no account layer, there is no dashboard or saved history — export the SVG or PNG if you want to keep the result, since the page does not store your chart afterward.
Does Custom PRD build upload my data to a server?
The chart is rendered in your browser, so the labels and values you paste are not sent anywhere for processing. That said, treat any sensitive figure with normal caution: use a private window on a shared machine, and check your organisation's policy before pasting internal numbers into any web page.
Why is my chart blank or missing slices in Custom PRD build?
The two usual causes are a label/value count mismatch and all-zero values. Mismatched counts shift slices onto the wrong labels, and an all-zero series produces the empty-state preview rather than a chart. Negative numbers are also rejected, so convert declines to absolute values and explain them in the title.
Do my values need to add up to 100 for percentages to work?
No. Percentages are derived from the sum of whatever you paste, so 65, 18, 10 and 7 read the same as 650, 180, 100 and 70. The trade-off is that a typo is invisible in the picture but visible in every percentage, so check your total against the source before you download.
Can I use the downloaded chart in a report or presentation?
Yes — use the SVG for slides and print, and the PNG for documents, chat, or social posts. SVG stays sharp at any size and can be edited later in vector software, while the PNG is a 2x raster at the preview's pixel size. Verify the underlying numbers independently before publishing.