# Chart

Accessible SVG line or area chart with tooltip and data table.

Use Chart for a labelled trend with one or more stable series when readers need axes, values, and accessible source data.

## API

The package declarations define these public members.

| Member | Type | Kind | Required | Default | Description |
| --- | --- | --- | --- | --- | --- |
| `curve` | `ChartCurve` | prop | No | `'monotone'` | `monotone` is smooth without overshooting the data. |
| `directLabels` | `boolean` | prop | No | `false` | End-of-line labels — the relief channel for the sub-3:1 palette slots. |
| `empty` | `Snippet` | snippet | No | `undefined` | No additional description. |
| `height` | `number` | prop | No | `280` | Width is responsive; height is fixed. |
| `label` | `string` | prop | No | `undefined` | Accessible name. Also captions the offscreen data table. |
| `loading` | `boolean` | prop | No | `false` | No additional description. |
| `onPointHover` | `(hover: ChartHover \| null) => void` | callback | No | `undefined` | Fires on crosshair move and on leave, for cross-component sync. |
| `series` | `ChartSeries[]` | prop | Yes | - | At least one series, in a stable key order — the order pins the palette. |
| `showGrid` | `boolean` | prop | No | `true` | No additional description. |
| `showLegend` | `boolean` | prop | No | `undefined` | Defaults on for ≥2 series; a single series is named by its own title. |
| `showTooltip` | `boolean` | prop | No | `true` | No additional description. |
| `showXAxis` | `boolean` | prop | No | `true` | No additional description. |
| `showYAxis` | `boolean` | prop | No | `true` | No additional description. |
| `size` | `ControlSize` | prop | No | `'md'` | No additional description. |
| `tickFormatX` | `(x: number) => string` | callback | No | `undefined` | Epoch ms → label. The caller localizes. |
| `tickFormatY` | `(y: number) => string` | callback | No | `compactNumber` | No additional description. |
| `tooltipContent` | `Snippet<[ChartHover]>` | snippet | No | `undefined` | No additional description. |
| `variant` | `ChartVariant` | prop | No | `'area'` | `area` is `line` plus a gradient fill down to the baseline. |
| `xScale` | `ChartXScale` | prop | No | `'time'` | No additional description. |
| `xTicks` | `number` | prop | No | `6` | No additional description. |
| `yMax` | `number` | prop | No | `undefined` | No additional description. |
| `yMin` | `number` | prop | No | `undefined` | No additional description. |
| `yTicks` | `number` | prop | No | `5` | No additional description. |

## Related

- [Sparkline](/docs/components/sparkline): Compact inline line or area trend.