# Preact Chart

```tsx
import { Chart } from '@tanstack/preact-charts'
```

The definition infers datum and coordinate types for every callback. Replace
its identity when captured application values change.
It also owns `focus`, `focusRing`, `cursor`, `tooltip`, `animate`, `keyboard`,
`maxFocusDistance`, and `spatialIndex`.

## Props

| Prop                 | Type                                                            | Default               | Meaning                                                |
| -------------------- | --------------------------------------------------------------- | --------------------- | ------------------------------------------------------ |
| `definition`         | `ChartDefinition`                                               | Required              | Framework-neutral chart definition                     |
| `ariaLabel`          | `string`                                                        | Required              | Accessible chart name                                  |
| `ariaDescription`    | `string`                                                        | None                  | Optional accessible description                        |
| `height`             | `number`                                                        | `320` without a ratio | Fixed CSS and scene height                             |
| `aspectRatio`        | `number`                                                        | None                  | Positive width-to-height ratio when height is absent   |
| `width`              | `number`                                                        | Responsive            | Fixed CSS and scene width                              |
| `initialWidth`       | `number`                                                        | `640`                 | Initial and server width before responsive measurement |
| `tabIndex`           | `number`                                                        | `0`                   | Surface tab index; `keyboard: false` forces `-1`       |
| `idPrefix`           | `string`                                                        | Generated             | Prefix for renderer-owned document IDs                 |
| `renderSvg`          | `ChartSvgRenderer<TDatum, TXValue, TYValue>`                    | `renderChartSvg`      | Scene-to-SVG renderer                                  |
| `measureText`        | `ChartTextMeasurer`                                             | Host measurer         | Guide text measurement                                 |
| `onFocusChange`      | `(point: ChartPoint \| null) => void`                           | None                  | Primary focus callback                                 |
| `onFocusGroupChange` | `(points: readonly ChartPoint[]) => void`                       | None                  | Grouped focus callback                                 |
| `onSelect`           | `(point: ChartPoint \| null) => void`                           | None                  | Pointer or keyboard activation callback                |
| `onRender`           | `(context: ChartRenderContext) => void`                         | None                  | Live SVG, container, and scene after rendering         |
| `renderTooltipBody`  | `(context: ChartTooltipBodyRenderContext) => ComponentChildren` | None                  | Composes Preact content inside the native tooltip body |
| `className`          | `string`                                                        | None                  | Extra class on the outer `.ts-chart-host`              |
| `style`              | `JSX.CSSProperties`                                             | None                  | Outer host styles applied after adapter sizing         |

Custom outer styles can override the adapter's computed layout. A fixed
`width` prop still controls scene measurement, so do not give `style.width` a
conflicting value.

`renderTooltipBody` receives `points`, `content`, `defaultBody`, `pinned`, and
`dismiss`. Include `defaultBody` to keep the native title, rows, formatting,
and swatches. Ordering, anchoring, placement, portaling, and pinning remain in
the definition.

## Exported types

`ChartCommonProps` contains the common host and presentation props.
`ChartProps` adds the definition. `ChartPresentationProps` contains
`className` and `style`. `ChartTooltipBodyRenderContext` describes composed
tooltip content. The package also re-exports `ChartDefinition` and `ChartPoint`.

See the [Preact adapter](../adapter.md) for lifecycle and SSR behavior,
[Focus and interaction](../../../reference/focus-and-interaction.md) for
callback semantics, and [Rendering and export](../../../reference/rendering-and-export.md)
for custom SVG renderers.