Area Chart

A line chart with a light wash under each line, for totals and stacked parts over time.

Stable

Web

iOS

Android

@advui/charts

Source

One series

Preview

Code

People displacedMillions, estimated

Installation

Package

CLI (copy source)

pnpm

pnpm add @advui/charts

npm

npm install @advui/charts

Usage

import { AreaChart } from '@advui/charts'

<AreaChart
  title="People displaced"
  data={[{ month: 'Mar', displaced: 1.21 }, { month: 'Apr', displaced: 1.34 }]}
  index="month"
  series={[{ key: 'displaced', label: 'Displaced (millions)' }]}
/>

Examples

Stacked

Preview

Code

Assistance by modalityMillions of USD; the top edge is the total.

Cash

In kind

Services

API reference

AreaChart

Takes every Line Chart prop, plus:

Prop	Type	Default	Description
`title` required	`string`	—	Names the chart: its heading and accessible name.
`description`	`string`	—	Muted line under the title (units, period).
`data` required	`T[]`	—	One object per category or x position. Its type `T` (an interface works) is inferred, and `index` and `series` must name its fields.
`index` required	`keyof T & string`	—	Field holding each row’s label.
`indexLabel`	`string`	`index`	Heading of the label column in the table view.
`series` required	`{ key: keyof T & string; label: string }[]`	—	Numeric fields to plot. Colors follow this order (`chart1`…`chart8`), never the values. An array declared apart from the chart needs `as const` to keep its keys literal.
`stacked`	`boolean`	`false`	Stacks the series, so the top edge is their total. The tooltip and table keep each series’ own value.
`valueFormatter`	`(value: number) => string`	—	Formats tooltip and table values. Axis ticks are compact (1.2K).
`height`	`number`	`240`	Pixels, including the axes.
`width`	`number`	—	Fixed width. By default it fills its container.
`labels`	`Partial<ChartLabels>`	—	"Show table", "Hide table" and the keyboard hint, for translation.

Accessibility

The chart is a figure named by its title. The plot is one focusable image whose name gives the title, description and a hint; the arrow keys (Home / End too) step through the values, which a polite live region reads out.
Every chart has a table view ("Show table") with the same values, so nothing depends on seeing colors or hovering.
Identity never relies on color alone: two or more series get a legend, and the tooltip names each value.
Colors come from the chart1…chart8 theme keys, a palette checked for color-blind separation in light and dark mode.

Keyboard interactions
Key	Action
`Tab`	Focuses the plot, then the table button.
`Arrow keys / Home / End`	Move between values and read them.
`Escape`	Hides the tooltip.

Responsive behavior

Fills its container; x labels thin out when they would overlap.

Platform notes

Web

SVG in the page. Hover shows the tooltip; the arrow keys work once the plot has focus.

iOS

Drawn with react-native-svg. Tap the plot to show the tooltip for that point. VoiceOver and TalkBack read the title and description, without the arrow-key hint; Show table lists every value.