# Vue Chart

```ts
import { Chart } from '@tanstack/vue-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         |
| `class`              | `string`                                     | None                  | Extra class on the outer `.ts-chart-host`              |
| `style`              | `StyleValue`                                 | None                  | Outer host style                                       |
| `className`          | `string`                                     | None                  | Extra class on the rendered SVG surface                |

In templates, camel-cased props may use kebab case: `aria-label`,
`initial-width`, and `on-focus-change` map to `ariaLabel`, `initialWidth`, and
`onFocusChange`. Listener syntax such as `@focus-change="handleFocus"` supplies
the callback prop. The component does not forward unrelated attributes.

## Tooltip body slot

The optional `#tooltipBody` scoped slot receives `points`, `content`,
`defaultBody`, `pinned`, and `dismiss`:

```vue
<Chart :definition="definition" aria-label="Revenue">
  <template #tooltipBody="{ points, defaultBody, pinned, dismiss }">
    <component :is="defaultBody" />
    <SeriesDetail :points="points" />
    <button v-if="pinned" type="button" @click="dismiss">Close</button>
  </template>
</Chart>
```

`defaultBody` is a zero-argument Vue functional component containing 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 `class`
and `style`. `ChartTooltipBodySlotContext` describes the scoped slot. The
package also re-exports `ChartDefinition` and `ChartPoint`.

See the [Vue 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.