# Stacked vs grouped bars

> Two ways to show parts over time.

**Short answer.** Use stacked bars when the total per period matters and the parts make it up. Use grouped bars when you compare the parts with each other, period by period.

Updated Nov 2, 2026 · SaaS sample data

## 003 · Stacked bars

The total per month, built from its plans: 206 in May, 285 in October.

New paid accounts, stacked by plan. New paid accounts by plan, May to October 2026: 206 in May, 285 in October; Starter from 120 to 158, Team from 64 to 92, Business from 22 to 35.

| Month | Starter | Team | Business | Total |
| --- | --- | --- | --- | --- |
| May | 120 | 64 | 22 | 206 |
| Jun | 132 | 70 | 24 | 226 |
| Jul | 128 | 75 | 27 | 230 |
| Aug | 141 | 79 | 26 | 246 |
| Sep | 150 | 86 | 31 | 267 |
| Oct | 158 | 92 | 35 | 285 |

## 002 · Grouped bars

The same plans side by side, so each one compares directly.

New paid accounts, grouped by plan. New paid accounts by plan, May to October 2026: 206 in May, 285 in October; Starter from 120 to 158, Team from 64 to 92, Business from 22 to 35.

**Same 3 plans.** The stacks show the total growing from 206 to 285. The groups show that every plan grew, and that Business, small in the stack, grew the fastest: from 22 to 35.

## If you ask

| Question | Use a |
| --- | --- |
| How many in total each month? | Stacked bars |
| Which plan grows fastest? | Grouped bars |
| What is each month made of? | Stacked bars |
| How do the plans compare in each month? | Grouped bars |

## Stacked bars and Grouped bars compared

|  | Stacked bars | Grouped bars |
| --- | --- | --- |
| Answers | The total and its mix | How the parts compare with each other |
| Shows | Parts on top of each other | Parts next to each other |
| Best when | The total matters | Each part matters on its own |
| Avoid when | Parts must be compared exactly | There are more than four parts |
| Data shape | Periods × 2–4 parts | Periods × 2–4 parts |

## Common mistakes

### Stacked bars

- **The key part on top.** Only the bottom part starts from zero. Put the one people compare there.
- **Too many parts.** Past four, stacks turn into stripes.

### Grouped bars

- **Too many groups.** Many periods × many parts turn into a comb. Use lines.
- **Totals left to the reader.** If the total matters, stack the bars instead.

## Other ways to show it

- [014 · Streamgraph](https://usechartory.com/charts/streamgraph): Change over time · Logistics data
- [047 · Marimekko](https://usechartory.com/charts/marimekko): Part of a whole · E-commerce data
- [001 · Bars](https://usechartory.com/charts/bars): Compare items · Fintech data

## Stacked bars, grouped bars and the other 130 types.

In Figma and React, in four sizes, light and dark. Pay once, every update. [See plans](https://usechartory.com/pricing). [Stacked bars type page](https://usechartory.com/charts/stacked-bars) · [Grouped bars type page](https://usechartory.com/charts/grouped-bars)

## Questions

### Can stacked bars show percentages?

Yes, scaled to 100% per period, when the mix matters more than the size.

### How many parts fit?

Two to four in either; past that, group the small ones.

### Do both come in every size?

Yes. Stacked bars and Grouped bars come in XS, S, M and L, each laid out again for its size, in light and dark.

### Do they install the same way?

Yes, one command each: npx shadcn add @chartory/stacked-bars and npx shadcn add @chartory/grouped-bars.

## More comparisons

- [Treemap vs sunburst](https://usechartory.com/compare/treemap-vs-sunburst)
- [Donut vs semi donut](https://usechartory.com/compare/donut-vs-semi-donut)
- [Histogram vs box plot](https://usechartory.com/compare/histogram-vs-box-plot)
- [Slope vs dumbbell](https://usechartory.com/compare/slope-vs-dumbbell)

Still not sure? Start from what the chart has to show. [Open the Chart Chooser](https://usechartory.com/chooser)