BetaCharts

AreaChart

The LineChart with the ground under it filled.

Overview

The LineChart with the ground under it filled.

import { AreaChart } from '@xaui/native/area-chart'

<AreaChart data={rows} xKey="month" yKeys={['revenue']} />
<AreaChart data={rows} xKey="month" yKeys={['organic', 'paid']} isStacked />

Everything shared is in chart.md.

First example

import { AreaChart } from '@xaui/native/area-chart'

export function Example() {
  return <AreaChart />
}

Anatomy

AreaChart is a standalone component with no public slots.

Usage

import { AreaChart } from '@xaui/native/area-chart'

Root props

AreaChartProps

The node's inherited React Native props apply too, and so do its style props — padding, margin, width and the rest.

Prop	Type	Required	Description
curve	`Curve \| undefined`	No	—
isStacked	`boolean \| undefined`	No	Whether the series stack on each other rather than overlapping. The two answer different questions: stacked reads as a total split into parts, overlaid reads as several quantities compared. A stacked chart whose parts are not parts of one whole is a chart that adds unrelated numbers together.
strokeWidth	`number \| undefined`	No	The line along the top of each area. `0` leaves the fill bare.

Slots

This component is standalone and exposes no public slot.

Variants, sizes and colour

This component adds no visual axis of its own. The values it does take are in the generated types above and in the live demo.

Accessibility

The source defines no extra rule. Keep the React Native labels, roles, states and focus order your case needs, then check the result with VoiceOver and TalkBack.

Migration from legacy

This component declares no rule of its own. The migration guide covers variants, colours and slots.

Implementation notes

Stacked and overlaid answer different questions

Stacked reads as a total split into parts. Overlaid reads as several quantities compared. A stacked chart whose parts are not parts of one whole is a chart that adds unrelated numbers together — which is why it is a prop a caller sets rather than what happens by default the moment there are two series.

The stack is summed into the data before it is scaled, so the plot's own domain reaches the top of it: a stack whose top leaves the axis is a stack drawn outside its own chart. The rows are copied, never written to, and the totalled column is prefixed so it cannot collide with one of the caller's.

Series are painted back to front, so the shortest is not hidden by the tallest.

The fill is a gradient, and a light one

The ink belongs at the line, where the number is; the further from it, the less there is to say. So the fill runs from under a fifth of the colour at the line to nothing at the axis.

Kept that light on purpose. The line carries the number and the fill only says which side of it is "under" — anything heavier competes with the line, and two overlaid series stop being two, because the lower one reads as a shadow of the upper rather than as its own quantity.

Its own props

Prop	Type	Default	Notes
`curve`	`'monotone' \| 'linear'`	`'monotone'`
`isStacked`	`boolean`	`false`	Total split into parts
`strokeWidth`	`number`	`2`	`0` leaves the fill bare