Exporting

TanStack Charts' built-in export helpers have three paths:

• render a ChartScene directly to an SVG string;
• serialize an SVG that is already mounted in a browser;
• rasterize a mounted SVG or Canvas chart.

Choose based on whether export needs computed browser styles.

Render a scene to SVG#

renderChartSvg is deterministic and DOM-free:

import { createChartScene, renderChartSvg } from '@tanstack/charts'

const scene = createChartScene(definition, {
  width: 960,
  height: 540,
})

const svg = renderChartSvg(scene, {
  ariaLabel: 'Quarterly revenue',
  ariaDescription: 'Revenue rose in three of four quarters.',
  idPrefix: 'quarterly-revenue',
})

For a responsive definition, create a runtime with its datum, x-value, and y-value generics, then call render(...) with the definition and explicit size. See Runtime and Scene and SSR and Hydration.

Use explicit export dimensions. Responsive browser dimensions are a display policy, not a reproducible file size.

Serialize a mounted chart#

The export subpath copies a mounted chart and inlines presentation properties that depend on CSS:

import { downloadChartSvg, serializeChartSvg } from '@tanstack/charts/export'

const serialized = serializeChartSvg(chartContainer, {
  width: 1200,
  height: 675,
})

downloadChartSvg(chartContainer, 'quarterly-revenue.svg', {
  width: 1200,
  height: 675,
})

The target may be the chart SVG or an ancestor containing svg.ts-chart. Focus decoration is omitted by default; set includeFocus: true when it is part of the intended artifact.

Export PNG, JPEG, or WebP#

Raster export is browser-only and is isolated behind the same export subpath:

import { downloadChartImage, renderChartImage } from '@tanstack/charts/export'

const blob = await renderChartImage(chartContainer, {
  width: 1200,
  height: 675,
  scale: 2,
  background: '#ffffff',
  type: 'image/png',
})

await downloadChartImage(chartContainer, 'quarterly-revenue.png', {
  scale: 2,
  background: '#ffffff',
})

scale controls raster density, not chart layout. A 1200 × 675 chart at scale 2 produces a 2400 × 1350 canvas while retaining the 1200 × 675 visual coordinate system.

Export a Canvas chart#

Pass the Canvas root or an ancestor containing it to the same renderChartImage or downloadChartImage functions. The exporter draws the base scene layer at the requested dimensions and scale. Set includeFocus: true to composite the focus overlay; it is excluded by default.

Canvas focus is painted on a separate overlay so pointer movement does not repaint the base scene. Applications that need only the raw base bitmap may also call toBlob() or toDataURL() on CanvasChartSurface.canvas. Unlike SVG serialization, Canvas export does not retain vector geometry, accessible markup, or independently styleable nodes.

Theme and resource policy#

Export the theme intended for the artifact. A chart following application dark mode should usually receive an explicit light theme and background for a document or print workflow.

Gradients and clips require stable resource IDs. Supply idPrefix when rendering multiple chart exports into the same document. If a custom SVG renderer is in use, it must preserve the scene's gradients, accessibility metadata, and scoped IDs.

Security and portability#

Chart text is escaped by the SVG renderer. Custom renderers and custom tooltip HTML remain application-owned.

Before exporting a chart that references external images, fonts, or CSS, decide whether the consumer can reach those resources. Self-contained SVG needs embedded or inlined assets.

Export checklist#

• File dimensions are explicit.
• The export theme and background are intentional.
• The accessible name and description describe the exported state.
• Resource IDs are scoped.
• Fonts and external resources are portable.
• Focus decoration is included only when meaningful.
• Raster scale is chosen for the target medium.
• A Canvas export intentionally includes or excludes the focus overlay.

See Rendering and Export for every function and option.