tanstack-charts

TanStack Charts

Typed chart grammar guidance for marks, scales, layouts, interaction, accessibility, rendering, and framework adapters.

Use only the API documented for the recorded release.

Workflow

1. Inspect installed TanStack packages and exact versions.
2. Read the foundation reference and the adapter reference for the detected framework.
3. Topic references are indexes. Choose one guide or section for the task; follow its prerequisite links only when needed.
4. Prefer installed package types and version-matched source guidance over memory.
5. Preserve headless/core behavior when translating examples to a framework adapter.

Task routing

• Getting started — Overview, comparison, installation, and quick start.
• Chart grammar — Chart concepts, chart selection, and TypeScript guidance.
• Core visualization patterns — Common annotations, bars, distributions, heatmaps, intervals, lines, scatterplots, and stacking.
• Advanced visualization patterns — Facets, interaction, maps, networks, polar charts, themes, and motion.
• Cartesian and statistical marks — Cartesian, distribution, density, regression, and statistical mark reference.
• Spatial and polar marks — Spatial, polar, focus-guide, Delaunay, geo, and Voronoi mark reference.
• Composite and hierarchy marks — Composite, network, hierarchy, rule, frame, and waffle mark reference.
• Specifications — Chart definitions, specifications, and reference index.
• Type reference — Chart TypeScript definitions and type reference.
• Interaction and motion reference — Focus, interaction, and motion reference.
• Runtime and scales reference — Runtime, scene, scales, guides, and color reference.
• Rendering and composition reference — Adapters, extensions, hosts, rendering, export, transforms, and view composition.
• Composition and customization — Composition, custom marks, renderers, transforms, colors, and animation.
• Interaction and accessibility — Focus, tooltips, interaction, selection, and accessibility.
• Production and migration — Responsive layout, performance, SSR, testing, export, authoring, and migration.
• React adapter — React-specific setup and behavior.
• Preact adapter — Preact-specific setup and behavior.
• Vue adapter — Vue-specific setup and behavior.
• Solid adapter — Solid-specific setup and behavior.
• Svelte adapter — Svelte-specific setup and behavior.
• Angular adapter — Angular-specific setup and behavior.
• Lit adapter — Lit-specific setup and behavior.
• Alpine adapter — Alpine-specific setup and behavior.
• Octane adapter — Octane-specific setup and behavior.
• React Native adapter — React Native-specific setup and behavior.
• Other official guides — Official guidance not covered by a narrower topic.

Framework routing

• Vanilla — detect @tanstack/charts. Read Getting started. Shared guidance; check adapter-specific differences.
• Alpine — detect @tanstack/charts/alpine. Read Alpine adapter.
• Angular — detect @tanstack/charts/angular. Read Angular adapter.
• Lit — detect @tanstack/charts/lit. Read Lit adapter.
• Octane — detect @tanstack/charts/octane. Read Octane adapter.
• Preact — detect @tanstack/charts/preact. Read Preact adapter.
• React — detect @tanstack/charts/react. Read React adapter.
• React Native — detect @tanstack/react-native-charts. Experimental adapter. Read React Native adapter.
• Solid — detect @tanstack/charts/solid. Read Solid adapter.
• Svelte — detect @tanstack/charts/svelte. Read Svelte adapter.
• Vue — detect @tanstack/charts/vue. Read Vue adapter.

Source status

Official documentation from TanStack/charts, matched to these verified release inputs: @tanstack/[email protected], @tanstack/[email protected].

See source provenance for exact upstream inputs and deduplication records.