Area chartPro
A smooth trend line with a comparison period and an inspectable crosshair.
Trial signups
Total signups
7,479+23.8% vs previous 30 days
This periodPrevious period
When to use
- One metric over time, optionally against the previous period.
When not to use
- Several series: use a line chart with a legend.
- Part-to-whole: use a donut chart.
Installation
Usage
Import it from @/components/ui/area-chart after installing.
example.tsx
import { AreaChart } from "@/components/ui/area-chart";
const data = [
{ label: "Sep 1", value: 1210, previous: 1080 },
{ label: "Sep 2", value: 1340, previous: 1150 },
{ label: "Sep 3", value: 1290, previous: 1190 },
];
export function Visitors() {
return <AreaChart data={data} height={240} />;
}API reference
AreaChart
A smooth monotone line with a gradient fill, a dashed comparison line and a hover crosshair.
| Prop | Type | Default | Description |
|---|---|---|---|
| data | { label: string; value: number; previous?: number }[] | – | Points in order. |
| height | number | 260 | Height in px; width fills the container. |
| showPrevious | boolean | true | Draw the dashed comparison line. |
| yTicks / xTicks | number | 3 / 5 | How many axis labels to show. |
| formatValue | (n: number) => string | – | Tooltip number format. |
Accessibility
- Summarize the trend in nearby text; the chart is visual support.
- The tooltip shows both values with line samples, not just colors.
Motion
- Rises from the baseline on mount, then morphs between datasets.
- Datasets of different lengths are resampled so the line reshapes instead of redrawing.
- The y-axis scale eases with the data.
Responsive behavior
- Measures its own width with ResizeObserver; tooltips clamp inside the chart.
Performance
- Monotone cubic paths are recomputed per frame only during the 700ms morph.
- Comfortable up to a few hundred points; aggregate beyond that.
Notes for AI
- Labels are shown as-is; pre-format dates.
- Set showPrevious={false} when you have no comparison data.
This page as Markdown, for assistants and coding agents:
/components/area-chart/markdownThe full library index for assistants is at /llms.txt.
Lode222 doc pagesllms.txt