Skip to content
Statistics Simple #donut#composition#share

Donut Chart

Pie chart with the center cut out, leaving room for a headline number.

A free, animated donut chart you can read here or embed on any website, from Scrollchart.

Donut Chart

0%OF REVENUESubscriptions48% / 48Services27% / 27Hardware15% / 15Licensing7% / 7Other3% / 3

A donut chart divides a whole into arc segments proportional to each part's share. Cutting the center out creates a focal point for a headline figure: the dominant percentage, a total, or a key callout label. This two-level design lets the reader grasp the big number and the breakdown simultaneously.

The format works well with 3 to 5 segments where at least one segment is large enough to read clearly. Beyond 6 segments the arcs thin and the legend becomes the only reliable legend. Common uses include budget share (one line item dominates), survey response distribution across a handful of answer options, or market-share breakdown where a single player holds more than half.

Good for

  • Articles in the statistics category
  • Editorial pages where a quick visual replaces a wall of text
  • Content-marketing posts that need a clean, branded illustration

Source & accuracy

This donut chart is an editorial illustration built to represent the concept accurately. Where it shows figures, they are typical or representative values chosen to make the relationship clear, not a single underlying dataset. The diagram and its explainer are reviewed and maintained centrally, and updated over time as understanding improves.

What a donut chart is

A donut chart is a variant of the pie chart with the center removed, leaving a ring of segments. Like a pie chart, each segment's arc length (and angle) is proportional to its share of the whole, so the chart represents parts of a single total that sums to 100 percent.

The hollow center is the defining feature. It is often used to display a headline figure, such as the total value or a key percentage, turning the empty space into useful real estate that a standard pie chart wastes.

Strengths and limitations

Some argue the ring shape is easier to read than a full pie because the eye can judge arc length along the ring rather than relying on the harder task of comparing central angles. The format works best with a small number of categories that differ clearly in size.

Like all circular part-to-whole charts, donut charts become hard to read with many slices or slices of similar size, where a bar chart conveys precise comparisons better. They are most effective for showing one or two dominant proportions at a glance.

Embed this diagram

Add this animated donut chart to your own site. Copy one line of HTML, or use the embed builder for theme and sizing options.

Reference

What this is
A free, embeddable, animated donut chart for any website.
Who uses it
Data journalists, Researchers & academics, Content marketers, News organizations.
How to embed
Copy one line of HTML. No signup. No watermark. Works in WordPress, Webflow, Ghost, Substack, plain HTML.
File size
iframe embed, ~80 KB gzipped (loads on demand, does not block your page paint).
License
Free forever. Editorial explainer text included; updated centrally over time.

Embed format options

Copy the universal HTML snippet, the WordPress shortcode, or an iframe fallback - see the WordPress plugin page for details. Any format keeps the same Core Web Vitals profile and the same explainer text.

Embed snippet
<div data-scrollchart="donut-chart" data-scrollchart-v="1"></div>
<script src="https://scrollchart.com/embed.js" async></script>

Frequently asked questions

Where can I get a free animated "Donut Chart" for my website?
Scrollchart provides "Donut Chart" as a free, embeddable animated diagram you can add to any website with one line of HTML. No signup is required and there is no watermark. The diagram and its explainer text are served from scrollchart.com, so the embed stays current without any maintenance on your end.
How do I embed a donut chart in a blog post or article?
Paste the one-line HTML snippet from the Scrollchart diagram page into your post editor. It works in WordPress, Webflow, Ghost, and plain HTML with no plugin required. The animated diagram and its explainer text load from scrollchart.com and render directly in your page DOM.