TanStack Charts
Typed chart grammar guidance for marks, scales, layouts, interaction, accessibility, rendering, and framework adapters.
TanStack Charts 0.x is pre-alpha. Use only the API documented for the recorded release.
Workflow
- Inspect installed TanStack packages and exact versions.
- Read the foundation reference and the adapter reference for the detected framework.
- Topic references are indexes. Choose one guide or section for the task; follow its prerequisite links only when needed.
- Prefer installed package types and version-matched source guidance over memory.
- 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
- React — detect
@tanstack/charts/react. Read React adapter. - Preact — detect
@tanstack/charts/preact. Read Preact adapter. - Vue — detect
@tanstack/charts/vue. Read Vue adapter. - Solid — detect
@tanstack/charts/solid. Read Solid adapter. - Svelte — detect
@tanstack/charts/svelte. Read Svelte adapter. - Angular — detect
@tanstack/charts/angular. Read Angular adapter. - Lit — detect
@tanstack/charts/lit. Read Lit adapter. - Alpine — detect
@tanstack/charts/alpine. Read Alpine adapter. - Octane — detect
@tanstack/charts/octane. Read Octane adapter. - Vanilla — detect
@tanstack/charts. Read Getting started. Shared guidance; check adapter-specific differences. - React Native — detect
@tanstack/react-native-charts. Experimental adapter. Read React Native adapter.
Source status
Official documentation from TanStack/charts, matched to these verified release inputs: @tanstack/charts@0.18.0, @tanstack/react-native-charts@0.18.0.
See source provenance for exact upstream inputs and deduplication records.