Home›Area›Proportional Area Chart (100% Stacked)
NEWArea

Proportional Area Chart (100% Stacked)

100% normalized stacked area chart visualizing shifting share and relative category distribution over time.

Loading chart…
#area#proportional#100-percent#stacked#distribution#share
Customization Guides & Code Snippets

◆100% Normalized Percentage Scaling

Set domain={[0, 100]} on <YAxis> and add tickFormatter={(v) => `${v}%`} so the cumulative height visually communicates 100% market share.

<YAxis
  domain={[0, 100]}
  stroke="#5c6370"
  tickFormatter={(v) => `${v}%`}
/>

◆StackId Layering with Individual Gradients

Assign identical stackId='1' to each <Area> component while supplying distinct gradient IDs to ensure seamless layering without muddy color overlap.

When to use a Proportional Area Chart (100% Stacked)

A Proportional Area Chart (100% Stacked) is ideal for developers and designers who need to display data clearly and effectively. Use this chart type when:

  • ✓Showing volume trends over time (e.g. cumulative revenue)
  • ✓Comparing two or more metrics with stacked areas
  • ✓Highlighting the magnitude of change, not just direction
  • ✓Displaying website traffic patterns over weeks or months
Tips for Recharts Proportional Area Chart (100% Stacked)
TIP 1Use gradient fills (linearGradient) to reduce visual weight at the bottom
TIP 2Stacked areas work well for showing cumulative totals
TIP 3Set fillOpacity between 0.2–0.4 to keep the chart readable
TIP 4Combine with a Line component on top for a cleaner stroke
TIP 5Use syncId to sync multiple area charts that share the same X axis
Key Recharts Props
PROPTYPEDESCRIPTION
dataarrayArray of objects with your data values
dataKeystringThe key in your data objects for area values
strokestringLine color for the top edge
fillstringFill color — use 'url(#gradientId)' for gradients
stackIdstringStack multiple areas with the same stackId
typestringCurve type: 'monotone' recommended for smooth areas
Frequently Asked Questions

What is a proportional area chart (100% stacked area)?

A proportional area chart (also called a 100% stacked area chart) normalizes multiple data series so that their cumulative total always equals 100% at each time point. This highlights the relative percentage distribution and shifting market share between categories over time.

When should you choose a 100% stacked area chart over a standard stacked area chart?

Use a standard stacked area chart when the total absolute volume matters (e.g. total revenue growing from $10k to $100k). Use a 100% proportional area chart when you want to analyze shifting percentage mix (e.g. how organic search grew from 30% to 60% of total traffic regardless of total visitor count).

How do you configure a 100% stacked area chart in Recharts?

Give all <Area> components stackId='1', normalize your dataset values to sum to 100 at each X step, and set domain={[0, 100]} with tickFormatter={(v) => `${v}%`} on the <YAxis>.

Related Charts