# Chart

What every chart shares: the config and its colors, the tooltip, the legend, the palette and the data table.

```ehtml Example
import type { ChartConfig } from "@elements/ui/chart";
import { BarChart } from "@elements/ui/chart-bar";

const config: ChartConfig = {
  desktop: { label: "Desktop", color: "var(--chart-1)", icon: "monitor" },
  mobile: { label: "Mobile", theme: { light: "var(--chart-2)", dark: "var(--chart-5)" } },
};

<BarChart data={rows} {config} x="month"
          tooltip={{ indicator: "line", labelFormatter: (label) => label.slice(0, 3) }}
          legend={{ position: "top", toggle: true }} />
```

## Parts

| Part | What it is |
|---|---|
| `ChartFrame` | The chart container: declares `--color-<key>` from the config, holds the legend, the focusable plot, the tooltip and the data table, and starts the controller. |
| `ChartTooltipContent` | The tooltip: heading, one row per item (swatch or icon, name, value, unit), optional footer. |
| `ChartLegend` | The legend row: swatch or icon and name per series; toggle buttons with legend toggle. |
| `ChartTable` | The chart's data as a table, visually hidden unless shown. |
| `ChartCartesian, ChartPoints` | SVG parts the cartesian charts share: grid and axes; lines, areas, dots, cursor and hit strips. |
| `.chart-tooltip` | data-state open or closed; positioned beside the pointer inside the chart. |
| `.chart-legend-item` | A legend entry; a button with aria-pressed when toggling. |

## Attributes

| Attribute | Type | Default | Description |
|---|---|---|---|
| `config` | `ChartConfig` | (required) | { [key]: { label?: string; color?: string; theme?: { light: string; dark: string }; icon?: IconName; legendType?: LegendIcon; tooltipType?: "none" } }. legendType sets that series' legend icon and none leaves it out of the legend; tooltipType none leaves it out of the tooltip. Each key becomes `--color-<key>` on the chart; an entry with no color takes the next --chart-N. |
| `tooltip` | `boolean \| { indicator?: "dot" \| "line" \| "dashed"; hideLabel?: boolean; hideIndicator?: boolean; color?: string; labelKey?: string; nameKey?: string; labelFormatter?: (label, row) => string; formatter?: (value, key, row) => string; footer?: (row) => string; footerLabel?: string; unit?: string; defaultIndex?: number; cursor?: boolean; filterNull?: boolean; trigger?: "hover" \| "click"; active?: boolean; position?: { x?, y? }; reverseDirection?: { x?, y? }; itemSorter?: "name" \| "value" \| "key" \| (item) => number \| string; includeHidden?: boolean; animationDuration?: number; animationEasing?: string \| (t) => number; isAnimationActive?: boolean }` | `true` | Every chart's tooltip. unit adds a muted suffix to each value, footer a last line, defaultIndex shows it from the start, cursor false hides the hover band or line. |
| `legend` | `boolean \| { position?: "top" \| "bottom" \| "left" \| "right" \| "center" \| "insideTop" \| "insideBottom" \| "insideLeft" \| "insideRight" \| "insideTopLeft" \| "insideTopRight" \| "insideBottomLeft" \| "insideBottomRight" \| { x, y }; offset?: number; iconSize?: number; verticalAlign?: "top" \| "middle" \| "bottom"; align?: "left" \| "center" \| "right"; layout?: "horizontal" \| "vertical"; iconType?: "square" \| "rect" \| "circle" \| "line" \| "plainline" \| "diamond" \| "triangle" \| "cross" \| "star" \| "wye" \| "none"; formatter?: (name, key) => string; itemSorter?: "name" \| "key" \| (item) => number \| string; hideIcon?: boolean; nameKey?: string; toggle?: boolean }` | `false` | Every chart's legend. |
| `active` | `number` (two-way) | `-1` | The active item, on every chart. |
| `hidden` | `string[]` (two-way) | `[]` | Hidden series or slices, on every chart. |
| `label` | `string` | `per chart` | The plot's accessible name and the table's caption. |
| `showTable` | `boolean` | `false` | Show the data table under the plot. |
| `animate` | `boolean` | `true` | Entry and data motion; off under reduced motion. |

## Keyboard

| Keys | Action |
|---|---|
| `Tab` | Focuses the chart (one tab stop) and shows the tooltip for the item the keys last reached, else the active item, else the first. |
| `ArrowRight / ArrowDown` | Next item. The same under dir=rtl: the plot is not mirrored, so keys follow the screen. |
| `ArrowLeft / ArrowUp` | Previous item. |
| `Home / End` | First and last item. |
| `Escape` | Hides the tooltip. In a dialog, the dialog stays open until the next Escape. |

## Data attributes

| Attribute | Values | On |
|---|---|---|
| `data-chart` | `"bar" \| "line" \| "area" \| "pie" \| "radar" \| "radial"` | figure |
| `data-state` | `"open" \| "closed"` | .chart-tooltip |
| `data-index` | the item index | .chart-hit and pie, radial marks |
| `data-series` | the series key | marks |
| `data-resizing` | present while the chart redraws for a new size | figure |
| `data-entered` | present once the entry motion is over | figure |
| `aria-pressed` | true \| false | .chart-legend-item (toggle) |

## Accessibility

- The plot is one tab stop: role=group, aria-roledescription=chart, named by label, described by the data table.
- The SVG is aria-hidden; a screen reader gets the data from the table, which every chart renders.
- Arrow keys move through the items and each move is announced in a polite live region, for example "February: Desktop 305, Mobile 200".
- Identity is never color alone: a legend for two or more series and labels on the tooltip rows.
- Legend toggles are buttons with aria-pressed.

## See also

- [BarChart](chart-bar): Vertical, horizontal, stacked and grouped bars with tooltip, legend and labels.
- [LineChart](chart-line): Lines over categories with dots, curves, labels and a crosshair tooltip.
- [AreaChart](chart-area): Filled areas, stacked or expanded, solid or gradient, with a crosshair tooltip.
- [PieChart](chart-pie): Pie and donut charts with labels, a center value, an active slice and stacked rings.
- [RadarChart](chart-radar): Values on radial axes, one polygon per series, over a polygon or circle grid.
- [RadialChart](chart-radial): Radial bars and gauges, with tracks, labels along the arc and a center value.