AreaChart

Categorical-x series fills: overlapping translucent areas by default, or running-sum bands with stacked. Shares the line chart's curve, density, furniture, and scrub-to-inspect axes.
Total
Paid
iOS
Total
Paid
Android
Total
Paid
Web
tsx
<AreaChart
labels={["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug"]}
series={[
{ label: "Total", values: [120, 138, 151, 149, 168, 184, 197, 212] },
{ label: "Paid", values: [42, 51, 58, 63, 71, 84, 92, 104] }
]}
/>

Props

Prop
Description
stacked
boolean
Stack the series (running sums) instead of overlapping translucent fills.
labels
required
string[]
Category labels along the x axis, one per data column.
series
required
ChartSeries[]
The series to plot; colors follow the chart-1..8 tokens in fixed order, or a series' own `success`/`destructive` tone.
title
string
Optional heading shown above the plot.
max
number
Y-axis maximum override. Defaults to a nice bound above the data max.
min
number
Y-axis minimum override. Defaults to 0 (or the data min when negative).
success
boolean
Tone (single-series only; pick one; default is the primary fill).
destructive
boolean
Tone (single-series only; pick one; default is the primary fill).
curved
boolean
Curve (omit for straight segments).
compact
boolean
Density (omit for the default plot size).
hideLegend
boolean
Furniture visibility.
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

Stacking

Don’t
Conversion rate
Bounce rate
Churn rate
Stack rates that do not add up; conversion, bounce and churn rates summed into one band draw a total that means nothing.
Do
Mobile
Desktop
Tablet
Stack series that are parts of one total, like sessions by device; the top edge is the total and each band is its share.
← Toast
BarList →