# 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, tooltip, animation, keyboard policy, focus distance, and
spatial indexing.

## 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.