# Chart

> Line, area and column charts with a legend, a table view and keyboard readout.

- **Level**: organism · **Status**: stable · **Role**: content
- **Import**: `import { Chart } from "@rrios-forge/ui/organisms/chart";`
- **Source**: `packages/ui/src/organisms/chart`

Line, area and column charts drawn as SVG on Poesía's tokens — no charting library. The form follows the data's job (`dataviz.yaml`); series take the categorical slots in order; a legend appears from two series; every chart has a table view, a keyboard path through its points (arrow keys, Home, End, Escape) with the same readout as the pointer, and designed loading, empty and error states. `title` is the accessible name; the visible heading is yours.

## Use it for

- A chart (trend, comparison, part to whole) → `Chart` with the `form` the data's job names (`dataviz.yaml`); a single number is a `MetricCard`, many classes a `DataTable`

## Axes

| Axis | Part | Values | Default | Meaning |
|---|---|---|---|---|
| `form` | — | `line` `area` `column` | `line` | Which chart form encodes the data — chosen by the data's job, never by the look (ADR-036). |
| `size` | — | `sm` `md` `lg` | `md` | Ergonomic scale, in three families (control, text, container). |

## Stories

- [Line](/?path=/story/components-organisms-chart--line) · frame: `/iframe.html?id=components-organisms-chart--line&viewMode=story`
- [Area](/?path=/story/components-organisms-chart--area) · frame: `/iframe.html?id=components-organisms-chart--area&viewMode=story`
- [Column](/?path=/story/components-organisms-chart--column) · frame: `/iframe.html?id=components-organisms-chart--column&viewMode=story`
- [Emphasis](/?path=/story/components-organisms-chart--emphasis) · frame: `/iframe.html?id=components-organisms-chart--emphasis&viewMode=story`
- [Below zero](/?path=/story/components-organisms-chart--below-zero) · frame: `/iframe.html?id=components-organisms-chart--below-zero&viewMode=story`
- [In a Card](/?path=/story/components-organisms-chart--in-a-card) · frame: `/iframe.html?id=components-organisms-chart--in-a-card&viewMode=story`
- [Loading](/?path=/story/components-organisms-chart--loading) · frame: `/iframe.html?id=components-organisms-chart--loading&viewMode=story`
- [Empty](/?path=/story/components-organisms-chart--empty) · frame: `/iframe.html?id=components-organisms-chart--empty&viewMode=story`
- [Error](/?path=/story/components-organisms-chart--error-state) · frame: `/iframe.html?id=components-organisms-chart--error-state&viewMode=story`
- [Table view (interaction test)](/?path=/story/components-organisms-chart--table-view) — interaction test · frame: `/iframe.html?id=components-organisms-chart--table-view&viewMode=story`
- [Keyboard readout (interaction test)](/?path=/story/components-organisms-chart--keyboard-readout) — interaction test · frame: `/iframe.html?id=components-organisms-chart--keyboard-readout&viewMode=story`

## Decisions that name it

- ADR-036 — Data visualization: colour roles, a grammar, and three components on plain SVG

## Always

- Tokens only (R04); variants are semantic axes, never appearance (R02).
- Typography and actions are Poesía atoms, never raw HTML with utilities.
- Vibrant panes need a ground and never nest (ADR-027).