---

## LineChart
**Stability:** beta — the API shape is settled and documented; behaviour-level fixes may still land as breaking changes in a minor.
Line chart for trends over an ordered category axis. One path
per series on the design-token palette; zero-dependency SVG, responsive,
dark-mode aware, with optional points, gridlines, legend, and a screen-
reader data-table fallback.

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

### Examples
```svelte
<LineChart
  data={[
    { label: 'Mon', values: [12] },
    { label: 'Tue', values: [18] },
    { label: 'Wed', values: [9] }
  ]}
/>
```

### 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 for the chart image, which also captions the data table. A plain `aria-label` does the same, and this prop wins over it; with neither, a summary in the active locale is generated. `aria-labelledby` outranks both for the image's name, and this prop then only captions the table. |
| 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. |
| formatValue | `(value: number) => string` | no |  | Format values for axis labels, tooltips, and the data table. |
| height | `number` | no | 240 | SVG height in px. |
| includeZero | `boolean` | no | false | Start the value axis at zero instead of framing the data range. |
| 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). |
| showPoints | `boolean` | no | true | Render a dot at each data point; style them via `slotClasses.point`. |
| slotClasses | `LineChartSlotClasses` | no |  | Per-slot class overrides. `mark` is the line path — one per series — and `point` the dots on it, one per series *and* datum. In the same Tailwind bucket `class` wins over the `slotClasses` entry for the element it lands on. Presets and provider defaults sit below both. |
| 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
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 {
/**
   * Series name: legend entry and data-table column header; BarChart and
   * LineChart also put it in each mark's `<title>`.
   */
  label: string;
  /** Explicit color; defaults to the cycled categorical palette. */
  color?: string;
}
```

```ts
type LineChartSlotClasses = Partial<Record<LineChartSlot, string>>
```

```ts
type LineChartSlot = (typeof LINE_CHART_SLOTS)[number]
```