Skip to content

New: Chartory 1.0. 100 charts free in React, MIT licensed

Read the changelog

Charts / Compare

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

New paid accounts, stacked by planNew 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.3002001000MAYJUNJULAUGSEPOCTSTARTERTEAMBUSINESS
New paid accounts, stacked by plan
MonthStarterTeamBusinessTotal
May1206422206
Jun1327024226
Jul1287527230
Aug1417926246
Sep1508631267
Oct1589235285

003 · Stacked barsThe total per month, built from its plans: 206 in May, 285 in October.

New paid accounts, grouped by planNew 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.200150100500MAYJUNJULAUGSEPOCTSTARTERTEAMBUSINESS
New paid accounts, grouped by plan
MonthStarterTeamBusinessTotal
May1206422206
Jun1327024226
Jul1287527230
Aug1417926246
Sep1508631267
Oct1589235285

002 · Grouped barsThe same plans side by side, so each one compares directly.

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

Stacked barsGrouped bars
AnswersThe total and its mixHow the parts compare with each other
ShowsParts on top of each otherParts next to each other
Best whenThe total mattersEach part matters on its own
Avoid whenParts must be compared exactlyThere are more than four parts
Data shapePeriods × 2–4 partsPeriods × 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

  • Shipments by modeMonthly shipments in K by mode, 2026, stacked around a centre line; October: 47K in total (Road 23K, Sea 10K, Rail 8K, Air 6K).ROAD46%SEA28%RAIL16%OCT · 47KJANAPRJULOCTDEC
    Shipments by mode
    MonthRoad (K)Sea (K)Rail (K)Air (K)
    Jan14962
    Feb13862
    Mar161073
    Apr191283
    May221584
    Jun241774
    Jul231964
    Aug211864
    Sep221585
    Oct231086
    Nov3010910
    Dec279812
    Shipments by modeMonthly shipments in K by mode, 2026, stacked around a centre line; October: 47K in total (Road 23K, Sea 10K, Rail 8K, Air 6K).ROAD46%SEA28%RAIL16%OCT · 47KJANAPRJULOCTDEC
    Shipments by mode
    MonthRoad (K)Sea (K)Rail (K)Air (K)
    Jan14962
    Feb13862
    Mar161073
    Apr191283
    May221584
    Jun241774
    Jul231964
    Aug211864
    Sep221585
    Oct231086
    Nov3010910
    Dec279812

    014 · StreamgraphChange over time · Logistics data

  • Sales by region and category, Q3Q3 net sales by region: NA 38%, EU 30%, APAC 20%, LATAM 12%; Electronics is 46% of APAC, Apparel 41% of EU.34%22%28%NA 38%41%25%18%EU 30%22%46%18%APAC 20%APPARELHOMEELECTRONICSBEAUTY
    Sales by region and category, Q3
    RegionShare of salesApparelHomeElectronicsBeauty
    NA38%34%22%28%16%
    EU30%41%25%18%16%
    APAC20%22%14%46%18%
    LATAM12%38%30%12%20%
    Sales by region and category, Q3Q3 net sales by region: NA 38%, EU 30%, APAC 20%, LATAM 12%; Electronics is 46% of APAC, Apparel 41% of EU.34%22%28%NA 38%41%25%EU 30%22%46%APACAPPARELHOMEELECTRONICSBEAUTY
    Sales by region and category, Q3
    RegionShare of salesApparelHomeElectronicsBeauty
    NA38%34%22%28%16%
    EU30%41%25%18%16%
    APAC20%22%14%46%18%
    LATAM12%38%30%12%20%

    047 · MarimekkoPart of a whole · E-commerce data

  • Monthly card spendCard spend by month, January to September, in $K. September (month to date) is 40K; the highest month is July at 71K.48KJAN52KFEB61KMAR57KAPR66KMAY59KJUN71KJUL68KAUG40KSEPMONTH TO DATECLOSED MONTHS
    Monthly card spend
    MonthSpend
    JAN$48K
    FEB$52K
    MAR$61K
    APR$57K
    MAY$66K
    JUN$59K
    JUL$71K
    AUG$68K
    SEP$40K
    Monthly card spendCard spend by month, January to September, in $K. September (month to date) is 40K; the highest month is July at 71K.48KJAN52K61KMAR57K66KMAY59K71KJUL68K40KSEPMONTH TO DATECLOSED MONTHS
    Monthly card spend
    MonthSpend
    JAN$48K
    FEB$52K
    MAR$61K
    APR$57K
    MAY$66K
    JUN$59K
    JUL$71K
    AUG$68K
    SEP$40K

    001 · BarsCompare items · Fintech data

Get both

Stacked bars, grouped bars and the other 130 types.

In Figma and React, in four sizes, light and dark. Pay once, every update.

003 · Stacked bars type page002 · Grouped bars type page

See plans

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 sunburstDonut vs semi donutHistogram vs box plotSlope vs dumbbell

Still not sure? Start from what the chart has to show.

Open the Chart Chooser