ORIGINAL WORKED EXAMPLE

100% stacked bars with unequal totals

A 100% stacked chart compares composition after dividing each category by its own total. This example uses totals of 40, 200 and 100 so readers can see why equal bar heights do not mean equal counts.

Compare shares when totals differ. Categories compared with bars. Exact input and calculated values are available in the data tables.
Original fictional data · Apache ECharts · 1200 × 800

How to read this chart

The small group contains 20, 10 and 10, giving shares of 50%, 25% and 25%. The large group contains 50, 100 and 50, giving 25%, 50% and 25%. The medium group contains 30, 30 and 40, giving 30%, 30% and 40%.

The large group has the most observations in the first series, 50, but a smaller first-series share than the small group, 25% versus 50%. Counts and proportions answer different questions; neither can substitute for the other without considering the denominator.

Try the calculation yourself

Switch to ordinary stacked mode to compare totals, then return to percentage mode for composition. Keep the original CSV alongside the chart so readers can recover the denominators. The calculated table reports transformed percentages while the CSV retains counts.

Open this exact example, change the data or calculation settings, and compare the result. The CSV preserves the input rows; the ECharts JSON contains drawing options.

What this example cannot tell you

The groups and counts are fictional. Every category needs a positive total and nonnegative parts. A zero-total category has no defined percentage composition and is rejected rather than displayed as a misleading empty 100% bar.

Why are all bars the same height?

Each bar is divided by its own category total, making its full height 100%. This intentionally removes differences in total size. Report counts separately when group size matters, especially when comparing a small sample with a much larger one.

Calculation convention

Bars compare magnitudes through length. A numeric axis that includes zero makes those lengths interpretable. Negative values extend in the opposite direction. Category labels are kept in the supplied order, so a chronological or meaningful custom order survives import. Use a Pareto chart if you intentionally want a descending ranking and cumulative share.

Method background: ONS: axes and gridlines.

Created by SupaMakers for ChartsAI · September 8, 2026. Source and reuse terms.

Keep exploring