---

## BarChart
**Stability:** beta — the API shape is settled and documented; behaviour-level fixes may still land as breaking changes in a minor.
Categorical bar chart — single, grouped, or stacked. Zero-
dependency SVG rendering on the design-token chart palette, responsive via
ResizeObserver, dark-mode aware, with a screen-reader data-table fallback.

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

### Examples
```svelte
<BarChart
  data={[
    { label: 'Q1', values: [12, 8] },
    { label: 'Q2', values: [19, 11] }
  ]}
  series={[{ label: 'Revenue' }, { label: 'Cost' }]}
  formatValue={(v) => `${v}k`}
/>
```

### Api
| Prop | Type | Required | Default | Description |
| --- | --- | :---: | --- | --- |
| data | `BarChartDatum[]` | yes |  | 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. |
| locale | `string` | no |  | BCP-47 locale for the default number formatter (when no `formatValue`). |
| 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 generic series per value column found in `data`. |
| showGrid | `boolean` | no | true | Render horizontal gridlines. |
| showLegend | `boolean` | no | true | Show the series legend (only renders with >1 series). |
| slotClasses | `BarChartSlotClasses` | no |  | Per-slot class overrides. 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 instead of grouping them side by side. |
| 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 BarChartDatum = CartesianDatum
```

```ts
type BarChartSlotClasses = Partial<Record<BarChartSlot, 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 {
/**
   * 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 BarChartSlot = (typeof BAR_CHART_SLOTS)[number]
```