A lightweight inline SVG area trace with normalized values, gradient fill, endpoint, and empty state.
DataMissing valuesNot enough data
<AreaChart data={[12, 18, 16, 24]} label="Requests" />Installation
pnpm add @chanrg/4uiImport the stylesheet once, at the root of your app:
import '@chanrg/4ui/styles.css';Usage
import { AreaChart } from '@chanrg/4ui';<AreaChart data={[12, 18, 16, 24]} label="Requests" />API reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
data | Array<number | point | null> | [] | Values or value objects. |
color | string | chart token | Trace color. |
CSS variables
| Variable | Description |
|---|---|
--4ui-surface | Primary component surface. |
--4ui-text | Primary foreground color. |
--4ui-border | Default control and panel border. |
Accessibility
- Exposes minimum and maximum in the image label.