Home / Comparison Charts / Stacked Bar Chart
Stacked Bar Chart in HTML, CSS and JavaScript
A stacked bar chart shows a total and the parts that make it up in one bar. This free template draws one with plain SVG and vanilla JavaScript, no chart library. The example shows website visits by source for an outdoor shop.
What is a stacked bar chart?
A stacked bar chart shows a total and the parts that make it up in one bar. Each bar is split into colored pieces, one for each part, stacked from the bottom up. The full height of the bar is the total.
It answers two questions at once: how big is the total, and what is it made of? It works best with a few parts, where the bottom part is the one people care about most, because the bottom piece is the easiest to compare.
At a glance
- Best for
- Totals that are made of 2 to 5 parts
- Data you need
- A table of groups with one number per part
- Skip it when
- Comparing the middle parts closely. Use grouped bars.
- Made with
- HTML, CSS and vanilla JavaScript. No library.
When to use a stacked bar chart
- Website visits by traffic source
- Revenue by product line each month
- Budget spent by department
- Energy use by type across the year
When to pick another chart
- 100% Stacked Bar Chart: you care about shares, not totals
- Grouped Bar Chart: you need to compare every part exactly
What you get in this template
- Parts stacked with a running total
- The total is written on top of every bar
- Hide any part from the key and the stack rebuilds
- Tooltips show the value and its share of the month
- Thin white gaps between parts so colors never blur
- Keyboard support and a data table with totals
How the code works
Here is a short version of the idea behind this stacked bar chart. The full file adds the axis, labels, tooltips, sorting and resizing on top of it.
const months = ['Jan', 'Feb', 'Mar'];
const parts = [
{ name: 'Search', color: '#2f6f5e', values: [8200, 8600, 9400] },
{ name: 'Social', color: '#6fb59a', values: [3100, 4200, 3900] }
];
const scale = 260 / 16000; // pixels per visit
months.forEach((m, i) => {
let stacked = 0;
parts.forEach(p => {
const h = p.values[i] * scale;
drawRect(40 + i * 120, 280 - stacked - h, 80, h, p.color);
stacked += h;
});
});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 stacked-bar-chart.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
When should I use a stacked bar chart?
Use it when the total matters and you also want to show what it is made of, like visits split by source. If only the parts matter, a grouped bar chart is easier to read.
Which part should go at the bottom of the stack?
Put the most important or the largest part at the bottom. It sits on a flat baseline, so it is the only part people can compare accurately across bars.
How many parts can a stacked bar chart have?
Keep it to five or fewer. More colors make the middle pieces too thin to read.
What is the difference between a stacked bar chart and a 100% stacked bar chart?
A normal stacked bar shows real numbers, so bar heights differ. A 100% stacked bar makes every bar the same height and shows percentages, so you compare shares instead of totals.
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
004. 100% Stacked Bar Chart
Example: customer survey results for five grocery stores
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