Home

Area chart

A value over time: one 2px line per series, the first washed underneath, the period before as a quiet dashed line, a crosshair that finds the nearest date.

ui.area-chartcomponents/ui/area-chart.tsx

Use case

For the AI

Use it for anything measured over days, weeks or months: sales over the period against the period before, visits, hours worked, cash on hand. The crosshair snaps to the nearest date and the readout lists every series there; the arrows walk it from the keyboard. When the period changes the lines glide to their new shape. In a card it sits under a ChartLegend, with a switch to ChartTable (chart-card.trend).

Use it when

  • A value per day, week or month
  • This period against the period before
  • Two or three series of the same unit over the same dates

Use something else when

  • Amounts per category, or parts of each period: Bar chart
  • The shape only, beside a figure: Sparkline
  • Two measures of different units: never a second axis, make two charts: Area chart

Examples

  • This period
  • Period before

Code

Import

import { AreaChart } from "@/components/ui/area-chart"
import { COMPARE, ChartLegend, SERIES } from "@/components/ui/chart"

Usage

<ChartLegend
  items={[
    { label: "Cette période", color: SERIES[0], shape: "line" },
    { label: "Période d’avant", color: COMPARE, shape: "line", dashed: true },
  ]}
/>
<AreaChart
  data={days}
  index="label"
  series={[
    { key: "now", name: "Cette période" },
    { key: "before", name: "Période d’avant", compare: true },
  ]}
  format={money}
  formatAxis={moneyShort}
  aria-label="Ventes dans le temps"
/>

Rules

  • One axis. Two measures with different units are two charts, never a second y-axis.
  • Mark a comparison series compare: it draws quiet and dashed and never takes a series colour.
  • A series may leave rows out (no key, or an empty string): its line stops and starts again, so a past and a plan are two series meeting at today; `mark={{ at, label }}` draws today as a quiet upright line.
  • Pass format for the readout and formatAxis for the short ticks (128 k$); the axis starts at zero.
  • Two series or more need a ChartLegend above the chart; one series is named by the card's title.
  • Colours come from the series order (SERIES in components/ui/chart.tsx: blue, orange, aqua, yellow, magenta), never chosen by hand; a sixth series folds into Other. Colour follows what a series is, so the same series keeps its colour when a filter removes another.
  • Words and numbers stay in the text inks; a short key beside them carries the colour. Never colour a label with its series.
  • Every value shown on hover is also reachable without it: a label, the legend with values, or the card's table view (ChartTable).