# Area chart (goodtabs UI)

A single-series area chart in plain SVG with hairline grid and one marked point.

## Install

```bash
npx shadcn@latest add https://ui.goodtabs.co/r/area-chart.json
```

Or, with the @goodtabs namespace configured in components.json: `npx shadcn@latest add @goodtabs/area-chart`

## Usage

```tsx
import { AreaChart } from "@/components/ui/area-chart"

<AreaChart title="Weekly installs" data={[{ label: "Jun", value: 12 }, { label: "Jul", value: 18 }]} />
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| data | `{ label: string; value: number }[]` |  | One point per label, left to right. |
| title | `string` |  | What the chart shows, for the text table and the caption. |
| highlight | `number` | `last` | Index of the point to mark in the brand colour. -1 for none. |
| format | `(value: number) => string` | `String` | Formats axis labels and the text table. |
| caption | `boolean` | `false` | Show the title above the chart. |

## When to use

- One metric over time, where the shape matters more than exact values
- Dashboard cards and report sections next to a stat card
- Anywhere a chart library would be heavy for one line

## When not to use

- Several series that need a legend, or negative values
- Dense data with hundreds of points, or hover readouts
- Comparing parts of a whole: use the donut chart

## Notes for agents

- Server component, no dependencies. It scales to its container width and keeps a 16:9-ish ratio
- Colours are foreground tones and hairlines; the one brand dot is a mark, not a series colour
- A visually hidden table repeats every value for screen readers, so title should say what and in which unit
- The axis top rounds up to 1, 2 or 5 times a power of ten; values are not clipped or smoothed

## The maths

- Axis step is the smallest of 1, 2, 5 or 10 times 10^floor(log10(max / 4)) that is at least max / 4, so four steps always cover the data.
- A point's y is top + innerHeight - (value / niceTop) × innerHeight; x is left + i / (n - 1) × innerWidth.
- The area is the line path closed along the baseline, filled at 8 percent foreground so the stroke stays the loudest mark.

Docs: https://ui.goodtabs.co/components/area-chart