AreaChart

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

Playground

Every control sets a real prop of AreaChartProps. The JSX below updates as you go.
Total
Paid
Props
stacked
boolean
hideGrid
boolean
compact
boolean
JSX · AreaChartProps
<AreaChart />

Variants

1 examples from src/charts/area-chart/area-chart.md, each rendered live from its own JSX.
Direct
Search
Social
Stacked
<AreaChart
stacked
labels={["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug"]}
series={[
{ label: "Direct", values: [37, 46, 49, 61, 53, 49, 54, 56] },
{ label: "Search", values: [77, 90, 83, 82, 82, 85, 85, 92] },
{ label: "Social", values: [18, 28, 34, 41, 48, 55, 50, 57] }
]}
/>

Anatomy

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

Props

1 props on AreaChartProps, grouped as they are declared in source. Required props are marked *.
Prop
Type
Default
Description
Props
1 prop
stacked
boolean
false
Stack the series (running sums) instead of overlapping translucent fills.
CartesianSeriesProps · the shared labels · series · title · max · min · success · destructive · curved · compact · plain · hideLegend · hideGrid · hideAxes · formatValue · selected · defaultSelected · onSelect · testID · style props.

Accessibility and keyboard

Keyboard
Tab
Focuses the plot
ArrowLeft
ArrowRight
Steps through points when inspectable
Escape
Clears the inspected point
Semantics
No role of its own in source; it reads as the content it renders.

Platform skins

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

Usage

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

Tokens

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

Related components