Vue Chart

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	Default SVG, complete surface, 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 chart 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.

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 for lifecycle and SSR behavior, Focus and interaction for callback semantics, and Rendering and export for custom SVG renderers.