RangeAreaChart

Chart
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.
src/charts/range-area-chart
View in Charts

Playground

Every control sets a real prop of RangeAreaChartProps. The JSX below updates as you go.
Props
curved
boolean
Tone
pick one
hideGrid
boolean
hideAxes
boolean
compact
boolean
JSX · RangeAreaChartProps
<RangeAreaChart curved />

Variants

2 examples from src/charts/range-area-chart/range-area-chart.md, each rendered live from its own JSX.
Band only
<RangeAreaChart
labels={["Jan", "Feb", "Mar", "Apr", "May", "Jun"]}
data={[
{ low: -4, high: 6 },
{ low: -2, high: 9 },
{ low: 2, high: 14 },
{ low: 7, high: 19 },
{ low: 11, high: 24 },
{ low: 15, high: 28 },
]}
/>
Success tone, inspected
<RangeAreaChart
label="Confidence band"
success
defaultSelected={2}
labels={["W1", "W2", "W3", "W4"]}
data={[
{ low: 90, high: 110, mid: 100 },
{ low: 95, high: 125, mid: 108 },
{ low: 100, high: 140, mid: 118 },
{ low: 104, high: 158, mid: 129 },
]}
/>

Anatomy

1
Chart frame
2
Series
3
Axis labels
4
Legend
5
Gridlines
Dimmed parts appear only in some states or variants.

Props

17 props on RangeAreaChartProps, grouped as they are declared in source. Required props are marked *.
Prop
Type
Default
Description
Props
4 props
labels *
string[]
–
Category labels along the x axis, one per data column.
data *
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.
Tone
pick one
2 props
success
boolean
false
destructive
boolean
false
Curve
1 prop
curved
boolean
false
Density
2 props
compact
boolean
false
plain
boolean
false
Strip the card surface for nesting inside an existing card (mirrors Stats).
Furniture visibility
8 props
hideGrid
boolean
false
Furniture visibility.
hideAxes
boolean
false
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.

Accessibility and keyboard

Keyboard
Tab
Focuses the plot
ArrowLeft
ArrowRight
Steps through points when inspectable
Escape
Clears the inspected point
Semantics
Roles
group
image
img
ARIA on web
aria-label

Platform skins

The playground's props on each platform: same tree, native shapes, type and touch sizes.
Web
control 10 · field 10 · card 16 · Instrument Sans
iOS
capsule controls · field 8 · card 12 · SF Pro · 44 pt
Android
Material 3 stadium · field 4 · card 12 · Roboto · 48 dp

Usage

<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 },
]}
/>

Tokens

Read from the playground render. Values follow the scheme and the ion hue.
--c1
--fd
--fm
--ft
--ln
--sf
--sh-sm
--tx2
--tx3

Related components