@tanstack/charts
Version:
A chart grammar for TypeScript and JavaScript. Marks consume your data directly, channels describe visual encodings, and the engine compiles them into a renderer-neutral keyed scene. TanStack's compact scales cover common numeric and categorical mappings.
73 lines (60 loc) • 4.99 kB
Markdown
---
title: Vue Chart
description: Complete prop and type reference for the @tanstack/charts/vue Chart component.
---
```ts
import { Chart } from '@tanstack/charts/vue'
```
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`, `svgAnimation`, `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.