Data Display
Area Chart
Interactive line/area chart for a time series — grid, gradient fill, hover tooltip. Pure SVG.
An interactive line/area chart for a single time series — traffic, cost, tokens or latency over time. Smooth bezier curve, gradient area fill, a dashed grid, and a hover guide with a value tooltip. It fills its container width (via ResizeObserver) and is pure SVG — no chart library. tone colors the line + fill from the design tokens; color overrides it.
For a tiny at-a-glance trend with no axes or tooltip, use Sparkline instead.
Import
tsx
1import { AreaChart } from "@yuhuanowo/yunui";Example
Pass a series of { value, label } (or plain numbers). Hover to reveal the guide and tooltip.
AreaChart
8:0010:0012:0014:0016:0018:00
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| ariaLabel | string | Area chart | Accessible name for the chart. |
| className | string | — | |
| color | string | — | Explicit CSS color, overriding `tone`. |
| data* | (number | AreaChartPoint)[] | — | The series, oldest → newest. Accepts plain numbers or `{ value, label }`. |
| formatValue | ((value: number) => ReactNode) | — | Format a value for the tooltip (e.g. `(v) => "$" + v.toFixed(2)`). |
| height | number | 140 | Chart height in px (the width fills the container). |
| noDataLabel | string | No data | Text shown when there are fewer than two points. |
| showGrid | boolean | true | Draw the dashed horizontal grid. |
| showTooltip | boolean | true | Enable the hover guide line + value tooltip. |
| showXAxis | boolean | false | Render the x-axis labels below the chart (needs point `label`s). |
| strokeWidth | number | 2 | Line thickness. |
| tone | "accent" | "success" | "warning" | "error" | "info" | "neutral" | accent | Semantic stroke/fill color. Ignored when `color` is set. |