ToolNestr

Donut Chart Generator

Enter your data labels and values to generate a donut chart — a pie chart with a hole in the center showing total or a summary statistic.

Reviewed by the ToolNestr Editorial Team — July 2026

Enter your data above and click Generate to see your donut chart.

Donut chart use cases vs pie chart

While both charts show parts of a whole, donut charts offer several advantages. The table below breaks down when to use each one.

Dashboard readabilityDonut 85% vs Pie 60%
Center text utilityDonut 90% vs Pie 10%
Arc length comparisonDonut 78% vs Pie 50%
Visual appeal in presentationsDonut 88% vs Pie 65%
📊

Marketer

Show budget allocation across channels — social media, paid search, content, and email — with the total spend in the center.

🎨

Designer

Create visually balanced composition breakdowns for UI components, colour palette usage, or design system coverage reports.

📈

Data Analyst

Present revenue share by product line, traffic source distribution, or customer segment proportion in client dashboards.

✍️

Content Creator

Visualise audience demographics, content type performance, or platform distribution with a clean on-brand chart style.

FeaturePie ChartDonut Chart
Center holeNoYes — can display totals or labels
Angle reading accuracyLowerHigher (arc length is easier)
Data densityWorks with 2–6 categoriesWorks with 2–8 categories
Modern dashboard fitModerateExcellent (clean, minimal look)
Center metadataNot possibleTotal, %, label, or KPI value
3D effect supportCommon but distorts dataRare — flat design preferred

How donut charts work

A donut chart is a pie chart variation with a circular hole cut out of the center. Each data category is represented by an arc segment whose length is proportional to its share of the total. The arc angle is calculated as (value / total) × 360°, just like a pie chart. The center hole (typically 30–50% of the outer radius) can display summary information such as the total value or chart title.

Worked example

Data: [A=40%, B=30%, C=20%, D=10%]
Arcs: 4 arc segments
Center hole: 30% of outer radius
Total: 100% (full ring)

How to use the Donut Chart Generator

1

Enter your data

Type or paste your data with one label and value per line, separated by a comma. For example: Sales,4500.

2

Set center text

Add a short summary for the center hole — a total, a category label, or a KPI number that complements the chart.

3

Generate and export

Click generate to render the chart, then download as a PNG for use in presentations, reports, or social media posts.

Tips for great donut charts

Limit categories to 5–6

Too many segments make the chart cluttered. Combine small categories into an "Other" group to keep the ring clean and readable.

Use meaningful center text

The center hole is prime real estate. Use it for the sum total, a percentage, or the chart title — avoid filler text that adds no value.

Order segments by size

Sort categories from largest to smallest (clockwise) so the biggest segment starts at 12 o'clock. This makes comparison much easier for viewers.

What is a donut chart?

A donut chart is a circular statistical graphic that is divided into slices to show proportional data. The centre is cut out to form a ring, giving it the appearance of a donut. Each arc segment represents a category's contribution to the whole, with the length of the arc proportional to the category's value.

Donut charts are widely used in business dashboards, infographics, and reports because they are visually lighter than pie charts and allow extra information to be placed in the centre — a best practice for data-dense dashboard design.

Pie chart vs donut chart

Both chart types show the composition of a whole, but research suggests that donut charts are easier to read. The human eye compares arc lengths (the length of the curved edge of each segment) more accurately than it compares the angles of pie slices.

Donut charts also avoid the visual weight of a solid centre, making them feel less dominant in a dashboard full of other chart types. The trade-off is that the centre hole can feel like wasted space if left empty — which is why this tool lets you fill it with meaningful text.

Center text uses

The hollow centre of a donut chart is one of its strongest features. Common uses for the centre text include:

  • Total sum — e.g., "$11,200" or "1,247 respondents"
  • Category label — the name of the main category being broken down
  • Percentage — an overall completion rate or approval rating
  • KPI value — a single key metric that the segments support
  • Chart title — a short title when the chart is used standalone

Frequently asked questions

What is a donut chart?

A donut chart is a variation of a pie chart with a circular hole cut out of the center, creating a ring-shaped visual. The center hole can display a total, category name, or other summary statistic.

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

A donut chart has a hollow center, which allows you to show additional information like totals or labels in the middle. Donut charts are also considered easier to read because the human eye compares arc lengths rather than angles.

When should I use a donut chart?

Use a donut chart when you want to show proportions of a whole (parts of a total) and you have a small number of categories (2–6). The center text can display the total or highlight the main category.

Can I customize the colors of the segments?

Yes. The donut chart generator assigns a default color palette, but you can note the color order or modify the inline script to use your preferred hex or named colors.

How are percentages calculated?

Each value is divided by the sum of all values, then multiplied by 100. The arc angle for each segment is its percentage × 3.6 degrees (since 100% = 360°).

What is the center text used for?

The center hole can display a total, a label such as "Total", a percentage summary, or any short text you enter — making it ideal for dashboards and at-a-glance reporting.

What file format is the download?

The chart is downloaded as a PNG image via the HTML5 Canvas toDataURL method. PNG is lossless and works well with presentations, documents, and web graphics.

Is my data sent to a server?

No. Everything runs entirely in your browser — no data is uploaded, stored, or transmitted. The canvas rendering and PNG export are 100% client-side.

What happens if I enter non-numeric data?

The generator skips any line that does not contain a valid numeric value. Lines must be in the format: label,value with a comma separating them.

How many categories can I add?

You can add as many categories as you like, but for readability it is best to keep between 2 and 8 segments. Too many thin arcs become hard to distinguish.

All tool categories

Chart Generators (11 tools)
🌐 Networking & IP Tools (36 tools)
🧮 Everyday (26 tools)
💪 Health & Fitness (30 tools)
💰 Finance (34 tools)
🔢 Math (23 tools)
📄 PDF Tools (10 tools)
🎨 Creators (12 tools)
💻 Developers (24 tools)
⚡ Engineering & Science (24 tools)
⚛️ Physics (48 tools)
🧪 Chemistry (50 tools)
🧬 Biology (50 tools)
🏠 Construction & Home Improvement (105 tools)
👗 Clothing & Garment Tools (68 tools)
🍳 Cooking & Baking (9 tools)
🚗 Automotive (26 tools)
🖼️ Image Tools (13 tools)
🔐 Security & Hash (15 tools)
📝 Text Tools (15 tools)
🔍 SEO Tools (11 tools)
🔄 Converters (69 tools)
🕐 Time & Date (15 tools)
🕌 Islamic Tools (16 tools)