A single full-width bar segmented to show composition shares.
A free, animated 100% stacked bar (single) you can read here or embed on any website, from Scrollchart.
100% Stacked Bar (Single)
A single 100% stacked bar is one horizontal rectangle subdivided into labelled segments, each occupying the fraction of total width corresponding to its share. All segments together fill exactly 100% of the bar. Inline labels printed directly inside each segment show both the category name and its percentage, eliminating the need for a separate legend.
This is the simplest possible composition chart and works best as a standalone headline figure: a quick breakdown of where a total sits. Because there is only one bar, comparison across groups is not possible. For that, the 100% stacked column chart extends the idea into multiple side-by-side columns. The horizontal orientation accommodates longer category names that would be hard to rotate under vertical bars.
Editorial pages where a quick visual replaces a wall of text
Content-marketing posts that need a clean, branded illustration
Source & accuracy
This 100% stacked bar (single) 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.
Composition as normalized percentages
A 100% stacked bar (or normalized stacked bar) takes all components of a whole, scales them so they sum to 100%, and displays them as contiguous segments in a single bar. If a product has 40% material cost, 35% labor, and 25% overhead, the bar is divided into three segments of those proportions. Color identifies each segment.
This format removes distraction from absolute totals and focuses entirely on composition. If one bar represents 100 widgets and another 1,000, the 100% normalization makes their component percentages directly comparable despite the magnitude difference.
Reading proportions and relationships
Segments of equal size are easy to compare (roughly 25% and 30% look visually distinct). But the middle segment is hardest to assess because it doesn't anchor to the left or right edge. If accurate reading of the middle segments is critical, use grouped bars instead and show raw percentages.
Embed this diagram
Add this animated 100% stacked bar (single) 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 100% stacked bar (single) 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.
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.
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 "100% Stacked Bar (Single)" for my website?
Scrollchart provides "100% Stacked Bar (Single)" 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 100% stacked bar (single) 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.