Skip to content

chart.md

Latest commit

 

History

History
72 lines (60 loc) · 4.85 KB

chart.md

File metadata and controls

72 lines (60 loc) · 4.85 KB
Raw
title Vue Chart
description Complete prop and type reference for the @tanstack/vue-charts Chart component. 
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:

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