Svelte Adapter

pnpm add @tanstack/charts svelte

<script lang="ts">
  import { defineChart } from '@tanstack/charts'
  import { tooltip } from '@tanstack/charts/tooltip'
  import { Chart } from '@tanstack/charts/svelte'

  const definition = $derived(
    defineChart(createRevenueChart(rows), { tooltip }),
  )
</script>

<Chart
  {definition}
  ariaLabel="Revenue by month"
  aspectRatio={16 / 9}
/>

The component uses Svelte 5 callback props and hydration-stable IDs. class and the string style prop target the outer host.

Lifecycle

The component creates one shared adapter controller, forwards reactive props from an effect, mounts it in onMount, and destroys it through the mount cleanup. Keep stable definitions at module scope. Derive the complete definition when it captures reactive values.

SSR and hydration

Svelte server rendering emits the complete .ts-chart-host, .ts-chart-surface, and accessible SVG. initialWidth controls responsive server geometry. $props.id() supplies the hydration-stable generated resource prefix. Keep server and browser definitions, formatters, and dimensions deterministic.

Presentation and rendering

class and the string style prop apply to the outer host. className applies to the rendered chart surface. Interaction hooks such as onFocusChange are callback props, not dispatched Svelte events. The package starts with SVG and can compose marks that use canvasChartRenderer. Use renderSvg to replace SVG serialization without replacing the shared host.

Exports: Chart, ChartCommonProps, ChartPresentationProps, ChartProps, ChartTooltipBodySnippetContext, ChartDefinition, and ChartPoint.

Tooltip body composition

Pass a Svelte 5 tooltipBody snippet to render framework-owned content. Call defaultBody() to retain native rows and swatches. The shared host owns focus, placement, portaling, inert transient state, pinning, and dismissal; Svelte owns the snippet lifecycle inside the body target.

See the Chart reference, SSR and hydration, and Chart Definition API.