Stacked bar chart maker — totals or 100% shares

How to use the stacked bar chart maker

1. Paste your table into Chart data: categories in the first column, one column per part, with a header row naming the parts, for example Quarter,Hardware,Software,Services.
2. Choose Stack as: Values or 100% share.
3. Keep or untick Show value labels (numbers inside the segments) and Show totals above bars.
4. Add a Chart title, X-axis title and Y-axis title, and pick a Colour theme and Background.
5. Set Width and Height, then copy the SVG or download stacked-bar-chart.svg.

What it does and when to use it

A stacked bar shows two things in one shape: how big each category is, and what it is made of. Typical uses are revenue by product line per quarter, a team’s hours by type of work per week, or votes for each option per region.

Only the bottom segment and the total share a common baseline, so readers compare those easily and the middle segments less precisely. If the exact size of every part matters, a grouped bar chart with one bar per series is easier to read. When there is just one category, a donut chart shows the split more simply. For many periods in a row, a stacked area chart shows the same idea as a continuous shape.

How it works

For each category the tool adds the positive values upwards from zero and the negative values downwards. The axis always includes zero and uses rounded steps of 1, 2 or 5 × 10ⁿ. In 100% mode each positive value is divided by the category’s positive total and multiplied by 100, and the axis runs from 0% to 100%.

Segments are separated by a thin line in the background colour, and label text switches between dark and white for contrast. The legend at the top follows the column order. The SVG also contains a <desc> listing every value, for screen readers. Nothing leaves your browser.

Worked examples

Revenue by segment (the sample). Four quarters of Hardware, Software and Services. The totals printed above the bars are 240, 282, 299 and 344 (Q4 is 150 + 124 + 70). The data table ends with Q4 | 150 | 124 | 70.

Answers as shares. A,30,10 and B,5,15 in 100% mode. Group A’s bar is 75% Yes and 25% No; group B’s is 25% Yes and 75% No, even though both groups have different sizes.

Income and costs in 100% mode. Costs are entered as negatives, so the tool drops them from the 100% bars and warns:

Negative values cannot be shown as a share of 100%, so they were left out of the 100% stacks.

Switch back to Values to see costs hanging below zero, with the net result printed on each bar.

Limits and tips

• Keep to about six parts per bar; the theme has eight colours and repeats after that.
• Category names under the bars are shortened with “…” when the bars are narrow.
• Need a PNG? Convert the SVG with the SVG to PNG converter.