# Tanstack Charts

> Typed chart grammar guidance for marks, scales, layouts, interaction, accessibility, rendering, and framework adapters. Use when a project uses TanStack Charts or when the task needs its setup, implementation, debugging, testing, migration, or integration guidance.

- Skill: `lukasa1993/tanstack-charts` (Agent Skill, multi-file: 435 files)
- Install (CLI): `npx skillmds@latest add lukasa1993/tanstack-charts`
- Raw SKILL.md: https://api.skillmd.com/api/skills/lukasa1993/tanstack-charts/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- License: MIT
- Author: lukasa1993 (https://skillmd.com/u/lukasa1993)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/lukasa1993/tanstack-charts

---

<!-- Generated by scripts/build-groups.mjs. Do not edit directly. -->

# 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

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](references/getting-started.md) — Overview, comparison, installation, and quick start.
- [Chart grammar](references/chart-grammar.md) — Chart concepts, chart selection, and TypeScript guidance.
- [Core visualization patterns](references/examples-core.md) — Common annotations, bars, distributions, heatmaps, intervals, lines, scatterplots, and stacking.
- [Advanced visualization patterns](references/examples-advanced.md) — Facets, interaction, maps, networks, polar charts, themes, and motion.
- [Cartesian and statistical marks](references/marks-cartesian-statistical.md) — Cartesian, distribution, density, regression, and statistical mark reference.
- [Spatial and polar marks](references/marks-spatial.md) — Spatial, polar, focus-guide, Delaunay, geo, and Voronoi mark reference.
- [Composite and hierarchy marks](references/marks-composite.md) — Composite, network, hierarchy, rule, frame, and waffle mark reference.
- [Specifications](references/specifications.md) — Chart definitions, specifications, and reference index.
- [Type reference](references/types.md) — Chart TypeScript definitions and type reference.
- [Interaction and motion reference](references/interaction-motion-reference.md) — Focus, interaction, and motion reference.
- [Runtime and scales reference](references/runtime-scales-reference.md) — Runtime, scene, scales, guides, and color reference.
- [Rendering and composition reference](references/rendering-composition-reference.md) — Adapters, extensions, hosts, rendering, export, transforms, and view composition.
- [Composition and customization](references/composition.md) — Composition, custom marks, renderers, transforms, colors, and animation.
- [Interaction and accessibility](references/interaction-accessibility.md) — Focus, tooltips, interaction, selection, and accessibility.
- [Production and migration](references/production.md) — Responsive layout, performance, SSR, testing, export, authoring, and migration.
- [React adapter](references/framework-react.md) — React-specific setup and behavior.
- [Preact adapter](references/framework-preact.md) — Preact-specific setup and behavior.
- [Vue adapter](references/framework-vue.md) — Vue-specific setup and behavior.
- [Solid adapter](references/framework-solid.md) — Solid-specific setup and behavior.
- [Svelte adapter](references/framework-svelte.md) — Svelte-specific setup and behavior.
- [Angular adapter](references/framework-angular.md) — Angular-specific setup and behavior.
- [Lit adapter](references/framework-lit.md) — Lit-specific setup and behavior.
- [Alpine adapter](references/framework-alpine.md) — Alpine-specific setup and behavior.
- [Octane adapter](references/framework-octane.md) — Octane-specific setup and behavior.
- [React Native adapter](references/framework-react-native.md) — React Native-specific setup and behavior.
- [Other official guides](references/other-guides.md) — Official guidance not covered by a narrower topic.

## Framework routing

- **React** — detect `@tanstack/charts/react`. Read [React adapter](references/framework-react.md).
- **Preact** — detect `@tanstack/charts/preact`. Read [Preact adapter](references/framework-preact.md).
- **Vue** — detect `@tanstack/charts/vue`. Read [Vue adapter](references/framework-vue.md).
- **Solid** — detect `@tanstack/charts/solid`. Read [Solid adapter](references/framework-solid.md).
- **Svelte** — detect `@tanstack/charts/svelte`. Read [Svelte adapter](references/framework-svelte.md).
- **Angular** — detect `@tanstack/charts/angular`. Read [Angular adapter](references/framework-angular.md).
- **Lit** — detect `@tanstack/charts/lit`. Read [Lit adapter](references/framework-lit.md).
- **Alpine** — detect `@tanstack/charts/alpine`. Read [Alpine adapter](references/framework-alpine.md).
- **Octane** — detect `@tanstack/charts/octane`. Read [Octane adapter](references/framework-octane.md).
- **Vanilla** — detect `@tanstack/charts`. Read [Getting started](references/getting-started.md). Shared guidance; check adapter-specific differences.
- **React Native** — detect `@tanstack/react-native-charts`. Experimental adapter. Read [React Native adapter](references/framework-react-native.md).

## 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](references/SOURCES.md) for exact upstream inputs and deduplication records.