---

## AreaChart
**Stability:** beta — the API shape is settled and documented; behaviour-level fixes may still land as breaking changes in a minor.
Area chart for trends with volume emphasis — filled regions
under each series, optionally stacked. Zero-dependency SVG on the design-
token palette, responsive, dark-mode aware, with a screen-reader data-table
fallback.

**Import:** `import { AreaChart } from '@urbicon-ui/blocks';`

### Examples
```svelte
<AreaChart
  stacked
  data={[
    { label: 'Jan', values: [4, 6] },
    { label: 'Feb', values: [7, 3] }
  ]}
  series={[{ label: 'New' }, { label: 'Returning' }]}
/>
```

### Api
| Prop | Type | Required | Default | Description |
| --- | --- | :---: | --- | --- |
| data | `CartesianDatum[]` | yes |  | Ordered categories with per-series values. |
| ...HTMLAttributes<HTMLElement> | `HTMLAttributes` | no |  | HTML attributes (excluding: 'children') |
| ariaLabel | `string` | no |  | Accessible label; a summary is generated when omitted. |
| class | `string` | no |  | Extra classes merged onto the wrapper. In the same Tailwind bucket `class` wins over the `slotClasses` entry for the element it lands on. Presets and provider defaults sit below both. |
| fillOpacity | `number` | no | 0.2 (overlay) / 0.85 (stacked) | Opacity of the area fill (0–1). |
| formatValue | `(value: number) => string` | no |  | Format values for axis labels, tooltips, and the data table. |
| height | `number` | no | 240 | SVG height in px. |
| locale | `string` | no |  | BCP-47 locale for the default number formatter. |
| margin | `ChartMargin` | no |  | Plot margins; merged over the defaults. |
| preset | `string` | no |  | Apply a named preset registered on `<BlocksProvider>`. |
| series | `ChartSeries[]` | no |  | Series metadata (labels + colors); defaults to one per value column. |
| showGrid | `boolean` | no | true | Render horizontal gridlines. |
| showLegend | `boolean` | no | true | Show the series legend (only renders with >1 series). |
| slotClasses | `AreaChartSlotClasses` | no |  | Per-slot class overrides. A series is drawn as two paths and `mark` lands on both of them, so a utility that sets a paint there reaches both: `fill-*` fills the top edge's open polyline, `stroke-*` outlines the band. Use `area` for the filled band alone and `areaOutline` for its top edge alone; each is folded against `mark` rather than appended to it, so an entry there wins its Tailwind bucket outright instead of by stylesheet order. In the same Tailwind bucket `class` wins over the `slotClasses` entry for the element it lands on. Presets and provider defaults sit below both. |
| stacked | `boolean` | no | false | Stack series cumulatively instead of overlaying them. |
| unstyled | `boolean` | no |  | Remove all default tv classes. |
| width | `number` | no |  | Fixed width in px; omit for responsive width. |

Inherited from:
- Omit<HTMLAttributes<HTMLElement>, 'children'> (omit-pattern)

### Types
```ts
type AreaChartSlotClasses = Partial<Record<AreaChartSlot, string>>
```

```ts
interface CartesianDatum {
/** Category label rendered on the x-axis. */
  label: string;
  /** Values in series order; missing entries are treated as 0. */
  values: number[];
}
```

```ts
interface ChartMargin {
top?: number;
  right?: number;
  bottom?: number;
  left?: number;
}
```

```ts
interface ChartSeries {
/** Legend + tooltip label. */
  label: string;
  /** Explicit color; defaults to the cycled categorical palette. */
  color?: string;
}
```

```ts
type AreaChartSlot = (typeof AREA_CHART_SLOTS)[number]
```