Installation
Usage
import { AreaChart } from "@/components/area-chart"
export function Traffic() {
return (
<AreaChart
title="Weekly visitors"
series={[{ key: "visitors", label: "Visitors" }]}
data={[
{ label: "W1", visitors: 4200 },
{ label: "W2", visitors: 5100 },
{ label: "W3", visitors: 6900 },
{ label: "W4", visitors: 7400 },
]}
/>
)
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| data | ({ label: string } & Record<string, number | string>)[] | — | One entry per point along the x axis. |
| series | { key: string; label: string; color?: string }[] | — | One or more lines. |
| title | string | — | Names the chart and captions its data table. |
| showTitle | boolean | true | Show the title above the chart. |
| curve | "smooth" | "linear" | "smooth" | Monotone curve (never overshoots) or straight segments. |
| fill | boolean | true | Gradient fill under each line. |
| format | (value: number) => string | — | Formats axis, tooltip and table values. |
| formatOptions / locale | Intl.NumberFormatOptions / string | compact | Number format without a function. |
| height | number | 240 | Plot height in pixels. |
| legend | boolean | auto | Shown when there's more than one series. |
| --chart-1 … --chart-3 | CSS variable | --primary… | Series colours. |
Accessibility
- A labelled figure, with every value in a real (visually hidden) table.
- Tab into the chart, then ←/→ move between points and Home/End jump; each point is announced with every series, e.g. "W3: Visitors 6.9K, Signups 1.2K".
- The tooltip follows keyboard focus as well as the pointer.
- Lines appear at once under prefers-reduced-motion.
Changelog
- v1.0.0Latest
First release.