RangeAreaChart

A min/max envelope: a translucent band between each label's low and high, an optional solid mid line through it, and the standard scrub-to-inspect flag showing High, Mid, and Low. The y domain hugs the data rather than anchoring at zero, since an envelope is a range idiom, not a magnitude bar. Forecast bands, error envelopes, and daily temperature ranges all read this way.
iOS
Android
Web
tsx
<RangeAreaChart
label="p50 to p99"
labels={["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]}
data={[
{ low: 42, high: 118, mid: 61 },
{ low: 38, high: 102, mid: 55 },
{ low: 44, high: 131, mid: 66 },
{ low: 40, high: 95, mid: 52 },
{ low: 47, high: 144, mid: 71 },
{ low: 36, high: 88, mid: 49 },
{ low: 34, high: 81, mid: 46 },
]}
/>

Props

Prop
Description
labels
required
string[]
Category labels along the x axis, one per data column.
data
required
RangePoint[]
One range per label, aligned by index.
label
string
Names the envelope (e.g. "Forecast"); leads the accessible name and the flag.
title
string
Optional heading shown above the plot.
success
boolean
Tone (pick one; default primary). Precedence: success > destructive.
destructive
boolean
Tone (pick one; default primary). Precedence: success > destructive.
curved
boolean
Curve (omit for straight segments).
compact
boolean
Density (omit for the default plot size).
hideGrid
boolean
Furniture visibility.
hideAxes
boolean
Furniture visibility.
formatValue
(v: number) => string
Formats tick labels and accessible values (data formatting, not styling).
selected
number | null
Scrub-to-inspect: the selected category index (controlled). Pass null for none.
defaultSelected
number
Scrub-to-inspect: the initially selected category (uncontrolled).
onSelect
(index: number | null) => void
Fired when a press/scrub selects a category (or clears it with null).
testID
string
E2E hook forwarded to the root element.
style
LayoutStyle
Composition within a parent only, never a restyle hook and never a width: the parent layout container provides the bounds.

Do & Don’t

RangeAreaChart

Don’t
Low
High
Two separate lines for low and high leave the envelope unreadable as a region and double the legend.
Do
Forecast
Encode uncertainty as the band and the estimate as the mid line, in one mark.
← RadialBarChart
ScatterPlot →