Area Chart

An area chart for trends over a range, with a soft fill under each line.

When to use

Use when: Trends over a continuous range, such as revenue by month, where volume matters.
Avoid when: Exact values matter more than shape; use a table, or a Line Chart for several close series.

Installation

bunx shelf add chart-area

The source lands in src/components/ui/chart-area.tsx, along with any Shelf items it builds on, and .shelf/lock.json records what was installed. It's yours to edit.

Usage

import * as Chart from "@/components/ui/chart-area";

<AreaChart aria-label="Revenue by month" data={data}>
  <Chart.Grid />
  <Chart.XAxis dataKey="month" />
  <Chart.YAxis format={{ style: "currency", currency: "USD" }} />
  <Chart.Tooltip />
  <Area dataKey="revenue" />
</AreaChart>

Built on

Packages: @stylexjs/stylex, recharts
Shelf items: Chart, foundations
Figma: In progress. See Designers and Figma.