# ASCII Area Chart

> Stacked or overlapping areas: ASCII lines over glyph fills.

Category: Charts. Docs: https://asciicn.sumak.dev/docs/ascii-area-chart

## Installation

```bash
npx shadcn@latest add @asciicn/ascii-area-chart
```

Needs the `@asciicn` registry in components.json: `"registries": { "@asciicn": "https://asciicn.sumak.dev/r/{name}.json" }`.

## Usage

```tsx
import { AsciiAreaChart } from "@/components/ascii/ascii-area-chart"

<AsciiAreaChart
  label="Traffic by source"
  series={[
    { label: "search", data: [120, 180, 260, 340, 310, 280] },
    { label: "direct", data: [80, 110, 150, 190, 170, 160], className: "text-sky-500" },
  ]}
  labels={["Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]}
  stacked
/>
```

## Examples

### Overlapping areas

Leave out `stacked` to compare series on the same baseline. Hover a name in the readout to fade the others.

```tsx
<AsciiAreaChart
  label="Memory"
  series={[
    { label: "heap", data: heap },
    { label: "rss", data: rss, className: "text-amber-500" },
  ]}
  labels={minutes}
  min={0}
  format={(v) => `${v}MB`}
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `series` | `{ label, data, className? }[]` |  | One area per entry, drawn in order. `className` colours it. |
| `label` | `string` |  | Names the chart for screen readers and captions its data table. |
| `labels` | `string[]` |  | One per data point, along the x axis and in the readout. |
| `stacked` | `boolean` | `false` | Pile each series on the ones before it, so the top line is the total. Each fill runs down to the series below. |
| `width / height` | `number` | `60 / 12` | Plot size in characters and rows. |
| `glyphs` | `string` | `"shade"` | How fills look: `shade`, `hash`, `dollar`, `diamond` or `circle`, or any five glyphs. Fills use the second and third. |
| `min / max` | `number` | `data range` | Fix the y scale. Stacked charts start at 0. |
| `format` | `(v) => string` | `String` | Formats axis ticks, the readout and the data table. |
| `animate` | `boolean` | `true` | Draw the lines in from the left, then fade the fills in. |

## Notes

- **Built on.** `AsciiLineChart` with `area`, so it shares its ASCII lines, axes, cursor, keyboard support and hidden data table.
- **Fill.** The top third of each band uses the denser glyph (`▒` with `shade`) and the rest the lighter one (`░`). Fills start on the row under each `_`, and stacked bands run down to the line below, so each series keeps its own colour with no gaps. With `shade`, the cells a `/`, `\` or `|` passes through are filled too, cut along the stroke with `clip-path`. Each fill glyph is centred in its own column, so symbols from a fallback font still tile the area.
- **Motion.** A left-to-right clip reveals the lines over a second, then the fills fade in. Off under `prefers-reduced-motion`.
- **Dependencies.** `motion`, plus the line chart, which the CLI installs with it.