Home / Comparison Charts / 100% Stacked Bar Chart
100% Stacked Bar Chart in HTML, CSS and JavaScript
A 100% stacked bar chart shows how a whole is split into shares. This free template draws one with plain SVG and vanilla JavaScript, no chart library. The example shows customer survey results for five grocery stores.
What is a 100% stacked bar chart?
A 100% stacked bar chart shows how a whole is split into shares. Every bar has the same length because every bar is 100%. The colored pieces inside show what percent each answer or part takes.
This chart is the standard way to show survey answers on a scale, like very unhappy to very happy. Because all bars are the same length, you can compare the mix between groups even when the groups had different numbers of people.
At a glance
- Best for
- Survey answers and shares across groups
- Data you need
- Percentages per group that add up to 100
- Skip it when
- When the real totals matter. Use a normal stacked bar.
- Made with
- HTML, CSS and vanilla JavaScript. No library.
When to use a 100% stacked bar chart
- Customer or staff survey results
- Market share by region
- Device mix of your visitors by country
- Time spent on tasks by team
When to pick another chart
- Stacked Bar Chart: the size of each total matters too
- Diverging Bar Chart: you have one positive or negative number per item
What you get in this template
- Horizontal bars so store names read easily
- Colors run from red to green so the mood is clear at a glance
- Percent labels inside every piece that has room
- Sort by name or by happiest store
- Tooltips show the percent and the number of people
- Keyboard support and a full data table
How the code works
Here is a short version of the idea behind this 100% stacked bar chart. The full file adds the axis, labels, tooltips, sorting and resizing on top of it.
const answers = ['#b83a2f', '#e8935a', '#c9ccc4', '#7fbf8e', '#2e7d4f'];
const stores = [['Elm Road', [6, 10, 22, 38, 24]], ['Hillcrest', [3, 7, 15, 41, 34]]];
const width = 500; // 100% of the bar
stores.forEach(([name, shares], row) => {
let x = 120;
shares.forEach((pct, i) => {
const w = pct / 100 * width;
drawRect(x, 20 + row * 50, w, 34, answers[i]);
x += w;
});
});The example uses four tiny helpers that create SVG shapes. Put them above the code and it runs as is.
const svg = document.querySelector('svg');
function make(tag, attrs) {
const n = document.createElementNS('http://www.w3.org/2000/svg', tag);
for (const k in attrs) n.setAttribute(k, attrs[k]);
svg.appendChild(n);
return n;
}
function drawRect(x, y, width, height, fill) { return make('rect', { x, y, width, height, fill }); }
function drawCircle(cx, cy, r, fill) { return make('circle', { cx, cy, r, fill }); }
function drawLine(x1, y1, x2, y2, stroke, width, dash) {
return make('line', { x1, y1, x2, y2, stroke, 'stroke-width': width || 1, 'stroke-dasharray': dash || 'none' });
}
function drawText(x, y, str, anchor) {
const t = make('text', { x, y, 'text-anchor': anchor || 'start' });
t.textContent = str;
return t;
}How to add it to your website
- Download the file. Click Download HTML file above. You get one file called 100-percent-stacked-bar.html with everything inside.
- Change the data. Open the file in any code editor and find the DATA list near the bottom. Replace the names and numbers with your own.
- Change the colors and text. Colors are at the top of the style tag. The title, subtitle and main point are plain HTML near the top of the body.
- Put it online. Upload the file to any host, such as GitHub Pages, Netlify or your own server, or paste it into your site. There is no build step.
Questions people ask
What is a 100% stacked bar chart used for?
It shows shares of a whole. It is the most common chart for survey answers on a scale, because every group gets the same length and you compare the mix, not the size.
How do I show Likert scale survey results?
Use a 100% stacked bar with one bar per group and colors running from negative to positive answers. Put neutral in the middle, like this template does.
Do the values need to add up to 100?
Yes. Convert your counts to percentages first. If your numbers are counts, divide each by the row total and multiply by 100.
Why are the bars horizontal?
Group names like store names are easier to read on the left side. Horizontal bars also match the way people read a scale, from left to right.
More comparison charts
001. Bar Chart
Example: weekly bread sales at a bakery
002. Grouped Bar Chart
Example: cinema ticket sales for three locations per quarter
003. Stacked Bar Chart
Example: website visits by source for an outdoor shop
005. Horizontal Bar Chart
Example: the most borrowed library books of the year
006. Lollipop Chart
Example: average delivery time by city with a 24 hour target
007. Dot Plot
Example: small, medium and large latte prices in eight cities
008. Dumbbell Chart
Example: commute times before and after a new tram line
009. Bullet Chart
Example: solar panel installs against target for six regions