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.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
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.