NEWArea
Range Area Chart
Min-max confidence interval band with a median trend line. Ideal for latency metrics and weather ranges.
Loading chart…
#area#range#confidence-interval#min-max#band#latency
Customization Guides & Code Snippets
◆Lifting the Shaded Band with Transparent Baseline
Stack the lower bound area with fill='transparent' under the spread area with a gradient fill to create a floating confidence band.
<Area dataKey="min" stackId="1" stroke="none" fill="transparent" />
<Area dataKey="spread" stackId="1" stroke="none" fill="url(#rangeBandGradient)" />
<Line dataKey="actual" stroke="#00e5a0" strokeWidth={2.5} dot={{ r: 4 }} />When to use a Range Area Chart
A Range Area Chart 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 Range Area Chart
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