Skip to content
Scrollchart
Statistics Simple #donut#composition#percentage

Donut Chart

Animated arc-fill donut with center label - the workhorse composition chart.

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

Donut Chart

0%LARGEST SEGMENTSegment A42% shareSegment B28% shareSegment C18% shareSegment D12% share

A donut chart divides a whole into arc segments, where each arc length is proportional to that segment's share. The open center creates space for a headline figure: a total, a dominant percentage, or a key label. With 3-5 segments the reader can compare shares at a glance; beyond 6 segments arcs become too thin to distinguish reliably.

The donut is well suited to part-to-whole storytelling when one or two segments dominate and the headline figure carries meaning on its own. Examples: market share where the top player holds 55%, survey responses with four answer options, or a budget breakdown where a single line item exceeds half of total spend.

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.

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
Bloggers, Content marketers, Educators.
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.
URL
scrollchart.com/diagram/donut-share

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-share" data-scrollchart-v="1"></div>
<script src="https://scrollchart.com/embed.js" async></script>

By embedding, you acknowledge the diagram and explainer text are served from scrollchart.com and may be updated from time to time to reflect new research or to link to relevant sources within the explainer.

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.
Related diagrams

Other statistics explainers

See all statistics →
Statistics Simple

Bell Curve with “You Are Here”

The canonical normal distribution with a personal percentile marker that scrolls into place as the reader arrives.
Statistics Medium

Sankey Flow

A two-stage flow visualizing how a population splits across categories - the data-viz workhorse.
Statistics Simple

Bar Comparison

Side-by-side animated bars with optional confidence intervals.