React chart example
Stacked column
Show category totals and their composition together, with stacked segments revealing each component’s contribution.
Options apply to compatible charts.
Synthetic sample data · Sales for 3 regions across 4 quarters.
What is a stacked column chart?
A stacked column chart, also called a vertical stacked bar chart, divides each column into segments that add up to a total. The full height shows the total for a category or period; the thickness of each coloured segment shows one component’s contribution.
When to use it
Use it to compare both total size and composition: revenue by region each quarter, subscriptions by plan, or expenditure by category. Choose a few non-overlapping components that add to a meaningful total in the same unit. Use grouped bars for precise component comparisons, or 100% stacking when the question is share rather than absolute size.
Design tips
Keep segment order and colours consistent. Changing the order between columns makes a region difficult to follow.
Use a few meaningful components and combine minor categories only when an “Other” group remains useful. Do not add a Total series alongside its own components: that counts the same values twice. Keep rates and averages separate from amounts that can be added.
Choose 100% stacking when share is the question and absolute totals are secondary. This example uses ordinary stacking, so different column heights retain total differences.
Graphy Chart SDK
Add Graphy’s stacked column charts to your React app.
Ship quickly with one maintained SDK, without building and maintaining the entire charting experience yourself.