Area With Range Chart
An area chart showing actuals with a muted 80% confidence band and a dashed projection tail for future months.
An area chart showing actuals with a muted 80% confidence band and a dashed projection tail for future months.
The Application Collection unlocks the source for every Application block. All Access unlocks every Collection.
Already purchased? Log in
Area With Range Chart plots monthly revenue actuals from January through September in a solid area (var(--chart-1)) and overlays a muted confidence band drawn from two separate upper and lower Area series (var(--chart-2), fillOpacity 0.1). October through December appear as a dashed strokeDasharray forecast tail in the same chart-1 colour. The panel title is Revenue with forecast band; the footnote reads: The shaded band is the 80% prediction interval. The dashed tail (Oct through Dec) is a projection, not actuals. Built on ui/chart with recharts.
All 12 months live in one chartData array; actual is null for forecast months and forecast is null for historical ones. This lets recharts connectNulls produce a clean handoff at the Sep pivot point without a second dataset.
Reach for this block on a finance or product dashboard to show a metric trend alongside its uncertainty range and a short-term projection. Wire chartData to your time series query and update the forecast series from your model output; keep the footnote describing the interval.
A natural flow around it on an Application Pro page:
Before
After
One strong use is a revenue trend with 80% forecast band. Other range charts:
Tip: name the interval in the footnote; 80% and 95% intervals look identical visually but mean very different things to a reader making a decision.