Home›Bar›Stacked Chart
NEWBar

Stacked Chart

Classic stacked composition chart for comparing total magnitudes while showing cumulative category contributions.

Loading chart…
#bar#stacked#composition#part-to-whole#infrastructure#workload
Customization Guides & Code Snippets

◆Grouping Categorical Resource Metrics with stackId

Group separate workload metrics (e.g. Compute, Storage, Memory) into a single unified column per cluster by assigning identical stackId attributes.

<Bar dataKey="compute" name="Compute (vCPU)" stackId="res" fill="#00e5a0" barSize={36} />
<Bar dataKey="storage" name="Storage (NVMe)" stackId="res" fill="#4a9eff" barSize={36} />
<Bar dataKey="memory" name="Memory (RAM)" stackId="res" fill="#a78bfa" radius={[6, 6, 0, 0]} barSize={36} />

◆Formatting Cumulative Load Tooltip Values

Customize tooltips to display workload percentage load and breakdown per cluster category on hover.

formatter={(value: any, name: any) => [`${value}% Load`, name]}
When to use a Stacked Chart

A Stacked 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 Stacked 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
PROPTYPEDESCRIPTION
dataarrayArray of objects with your data values
dataKeystringThe key in your data objects to use for bar height
fillstringBar color — accepts hex, rgb, or CSS variable
radius[number,number,number,number]Corner radius [topLeft, topRight, bottomRight, bottomLeft]
stackIdstringGroup bars with the same stackId into a stacked bar
Frequently Asked Questions

What is a stacked chart?

A stacked chart is a data visualization where category segments are stacked end-to-end to represent cumulative totals alongside part-to-whole segment contributions. Stacked charts can be oriented vertically (stacked column) or horizontally (stacked bar).

How do you make a stacked chart in Excel (stacked chart in excel)?

In Excel, highlight your data matrix, navigate to the Insert ribbon, click Column/Bar Charts, and choose 'Stacked Bar' or '100% Stacked Bar'. In React and Next.js apps, Recharts provides dynamic, interactive stacked components with SVG animations and theme toggles.

What is the difference between a stacked chart and a grouped chart?

A grouped (clustered) chart places bars side-by-side to facilitate direct comparison of individual values across categories. A stacked chart places bars end-to-end to highlight aggregate totals and relative percentage share.

Related Charts