NEWBar
100% Stacked Column Chart
Normalized stacked column chart where every column totals 100%. Great for proportional market share over time.
Loading chart…
#bar#stacked#column#100-percent#normalized#proportions
Customization Guides & Code Snippets
◆Normalizing Raw Values to 100%
Calculate each segment percentage against the row sum so that each column stacks to exactly 100%.
const total = item.mobile + item.desktop + item.tablet;
const mobilePct = Math.round((item.mobile / total) * 100);When to use a 100% Stacked Column Chart
A 100% Stacked Column Chart is ideal for developers and designers who need to display data clearly and effectively. Use this chart type when:
- ✓Comparing values across multiple categories (e.g. monthly revenue per region)
- ✓Showing ranked data where order matters (e.g. top 10 products by sales)
- ✓Displaying survey results or poll responses
- ✓Visualizing before/after comparisons
Tips for Recharts 100% Stacked Column Chart
TIP 1Always start the Y-axis at zero to avoid misleading comparisons
TIP 2Use rounded corners (radius prop) for a modern, polished look
TIP 3Add a Tooltip component so users can see exact values on hover
TIP 4Use Cell components to color individual bars differently
TIP 5For long category names, switch to a horizontal bar chart layout
Key Recharts Props