TL;DR
- TanStack Charts treats charts as compositions of marks + scales + channels, not fixed chart types — the same philosophy as ggplot2 and Observable Plot.
- Bundle size: 36.73–42.64 KiB (gzip, controlled suite, baseline 2026-08-07) — smaller than Chart.js (44.70–58.21 KiB) and ~4x smaller than Recharts (153.08–168.27 KiB).
- Latest published release: 0.9.0. Status: pre-alpha, not production-ready.
- The API was designed so AI agents can compose, inspect, and modify charts without learning an application-specific series model.
- License: MIT. Framework-agnostic core with adapters for React, Vue, Solid, Svelte, and others.
- Last verified: 2026-08-10. Pricing/limits change often — last checked 2026-08-10.
What makes TanStack Charts different from Recharts or Chart.js?
Most JavaScript chart libraries work like a catalog: you pick a <BarChart>, <LineChart>, or <PieChart> component, pass it data, and the library handles the rest. TanStack Charts rejects this model entirely. It follows the grammar of graphics tradition established by Leland Wilkinson and developed through projects like ggplot2 in R, Vega-Lite, and Observable Plot — with Observable Plot being the closest direct API influence (source: TanStack Charts grammar-of-graphics docs).
In a grammar-of-graphics system, you don't ask for a "bar chart." You describe what should be drawn:
- Define marks — the geometric forms that get drawn: bars, lines, dots, areas, rules, text.
- Map channels — which data field goes to x, y, color, radius.
- Apply scales — how semantic values (numbers, categories) map to pixel coordinates.
- Add guides — axes, ticks, grids, legends that explain the mappings.
From that description, a chart emerges. The distinction is subtle but powerful. When you write barY(data, { x: 'month', y: 'revenue' }), you haven't asked for a bar chart — you've placed bars at x positions determined by the month field and y lengths determined by the revenue field. The chart type is an emergent property of your marks and mappings, not a component name.
This matters because chart requirements grow. What starts as a simple bar chart needs an average line, then a second data layer, then a custom annotation. In a catalog library, each addition fights the component API. In a grammar system, you add another mark to the array. Each mark carries its own data, so different layers can use different datum types and different row counts.
How much smaller is the bundle, really?
TanStack Charts is split around capability boundaries: you pay for the marks and scales you import, not a universal chart catalog. The official comparison page (baseline 2026-08-07) measures 12 independently built, minified browser consumers — line, bar, area, and scatter at basic, interactive, and advanced tiers (source: TanStack Charts comparison).
| Library | Bundle size (gzip, controlled) | Released version measured |
|---|---|---|
| TanStack Charts | 36.73–42.64 KiB | workspace cd77683 |
| Chart.js | 44.70–58.21 KiB | 4.5.1 |
| Observable Plot | 83.34–91.94 KiB | 0.6.17 |
| Recharts | 153.08–168.27 KiB (94.96–109.96 with React externalized) | 3.10.1 |
| Apache ECharts | 153.10–173.18 KiB | 6.1.0 |
The reason TanStack Charts stays small is architectural. The compact scale package (@tanstack/charts-scales) handles common numeric and categorical mappings with zero D3 dependency. D3 modules load only when you need them: d3-shape appears only if you import polar marks, d3-geo only for geographic shapes, d3-hierarchy only for sunburst charts, d3-sankey only for Sankey diagrams. The locked compact React line consumer must stay at or below 26.6 KiB gzip, enforced by a retained-module gate in CI.
For a dashboard rendering a few line and bar charts, this means TanStack Charts can deliver a fully interactive charting experience in roughly a quarter of the bytes Recharts requires. For teams who have watched their bundle bloat from charting dependencies, that is a meaningful difference.
How do you build a chart with TanStack Charts?
A complete bar chart in TanStack Charts is about 20 lines. Here is the pattern from the official grammar-of-graphics documentation (source: TanStack Charts grammar-of-graphics docs):
import { barY, defineChart } from '@tanstack/charts'
import { scaleBand } from '@tanstack/charts/scales/band'
import { scaleLinear } from '@tanstack/charts/scales/linear'
import { tooltip } from '@tanstack/charts/tooltip'
import { Chart } from '@tanstack/charts/react'
const revenue = [
{ month: 'Jan', value: 42 },
{ month: 'Feb', value: 58 },
{ month: 'Mar', value: 76 },
{ month: 'Apr', value: 64 },
]
const revenueChart = defineChart({
marks: [
barY(revenue, { x: 'month', y: 'value' }),
],
x: { scale: () => scaleBand().padding(0.2) },
y: { scale: scaleLinear, nice: true, grid: true, axis: { label: 'Revenue' } },
tooltip,
})
export function RevenueChart() {
return <Chart definition={revenueChart} height={320} ariaLabel="Monthly revenue" />
}
The mark (barY) consumes the typed data directly. You map x to the month field and y to the value field. TypeScript checks that those fields exist on the data type — misspell a key and the compiler catches it. The scale factories (scaleBand, scaleLinear) handle the domain-to-range mapping; TanStack Charts owns the responsive pixel range. The defineChart call is the memoization boundary — keep definitions at module scope when the data is stable.
Adding layers
Say you want to add an average reference line to the bar chart. In a catalog library, you'd look for a <ReferenceLine> component. In TanStack Charts, you add a mark:
const chartWithAverage = defineChart({
marks: [
barY(revenue, { x: 'month', y: 'value' }),
ruleY([{ y: revenue.reduce((s, r) => s + r.value, 0) / revenue.length }]),
],
x: { scale: () => scaleBand().padding(0.2) },
y: { scale: scaleLinear, nice: true },
})
No new component to learn. The ruleY mark draws a horizontal rule at the y position you give it. The same mental model — marks as the building blocks — scales from the simplest line chart to compositions with areas, bars, lines, dots, rules, text labels, and custom geometry.
Rendering in React
The definition is framework-agnostic. The same revenueChart object renders through React, Solid, Vue, Svelte, or vanilla DOM by swapping the adapter import. For React:
import { Chart } from '@tanstack/charts/react' // SVG (default)
import { Chart } from '@tanstack/charts/react/canvas' // Canvas (opt-in)
Canvas is an opt-in renderer for when SVG element count becomes a bottleneck. The definition and all interaction callbacks stay the same — you only change the adapter import.
What chart types can it produce?
The library ships approximately 55 marks you can compose (this count is from the community; the official catalog is still growing). Rather than listing chart types as components, the marks produce: bar charts (horizontal and vertical), line charts, area charts, dot plots, rules, ticks, rectangles, cells, bands, arrows, vectors (including wind fields), linking marks, hexagons, text marks, frames, linear regression marks, box plots, violin charts, waffle charts, contour maps, tree maps, sunburst charts, Sankey diagrams, crosshairs, radial charts (pie, donut, radar), and geographic shape marks for world maps.
The point is not the count — it's that these are building blocks, not endpoints. Someone can ask "can it make this chart?" and the answer is usually yes, not because it's a built-in chart type, but because the marks compose to produce it. The library includes a 110-chart conformance catalog (76 pairs from Observable Plot, 23 from Recharts, 11 from Apache ECharts) proving equivalence with established libraries (source: TanStack Charts comparison).
Why was the API designed for AI agents?
This is where TanStack Charts departs from every other charting library on the market. The official documentation includes a dedicated AI Authoring guide that states the design goal explicitly:
"TanStack Charts uses a small grammar so an AI agent can reason from data and intent rather than selecting a monolithic chart component."
The authoring sequence the guide prescribes is:
- State the analytical question in one sentence.
- Identify each field's semantic type (quantitative, temporal, ordinal, identifier).
- Choose the smallest mark composition that answers the question.
- Choose compact scales for common positional and categorical channels.
- Decide which preparation belongs in application code, D3, SQL, or a server.
- Add accessible labeling and default tooltip behavior.
- Verify a static scene before adding animation or interaction.
The grammar-of-graphics model maps cleanly to this process because every chart is a declarative description of what the data means visually, not an imperative set of component configurations. An AI agent does not need to know your app's series model. It reads the data fields, maps them to channels, and picks the right marks.
The defineChart function returns a plain object — a ChartSpec compiled into a renderer-neutral scene. This means an agent can produce, inspect, and modify a chart definition programmatically without rendering it, validate it against the type system, and only then hand it to a framework adapter. The library was, in fact, built almost entirely with AI coding agents under Tanner Linsley's supervision (source: TanStack Charts GitHub README).
For teams building data tools with AI assistants like Claude, Codex, or Cursor — or building AI agent skills that produce UI rather than just text — this is a significant design signal. The easier it is for an AI to reason about your charting layer, the less time you spend hand-editing chart configurations.
How does styling work in TanStack Charts?
There are three levels of styling, each controlling a different layer:
Level 1 — CSS variables: Six custom properties define the categorical color palette. Override them on any container to retheme all charts within it. This is the fastest way to match your design system.
Level 2 — Theme block: Inside the chart definition, the theme block controls "chart furniture" — text, grid lines, background, and structural elements. This is for the chrome around the data, not the data itself.
Level 3 — Mark-level styling: Each mark accepts style options including fill, stroke, opacity, lineCap, dash, cornerRadius, and font. These can be fixed values or data-driven. You can color bars by whether they exceed a target, or build gradients from your data values.
Out of the box, charts use currentColor for the foreground and a transparent background. No styles are imposed — you bring your own visual language.
What interactions does it support?
The interactive features are built into the core, not plugins:
- Brush: Drag a range across the plot to filter or zoom a region.
- Zoom: Zoom into line charts with smooth interpolation.
- Keyed selection: Hover over a mark and press space to select; read the selected value from a callback.
- Crosshair: As you move along the chart, the crosshair prints the date (or whatever the x-axis represents) below.
- Tooltips with strategies:
nearestXshows the tooltip for the nearest point horizontally.groupXshows all values at the same x position. Tooltips can be pinned by clicking, with custom close buttons and content rendered in React. - Animation: Bar values animate between changes. Staggered entrances on replay. Bars animate smoothly when added or removed. Streaming animations shift lines rather than redrawing them.
- Export: Download charts as SVG or PNG directly from the rendered output.
TanStack Charts vs Recharts vs Chart.js: which should you use?
| Criteria | TanStack Charts | Recharts | Chart.js |
|---|---|---|---|
| Bundle (gzip) | 36–43 KiB | 153–168 KiB | 45–58 KiB |
| Architecture | Grammar of graphics | React components | Canvas catalog |
| Framework | Agnostic (React, Vue, Solid, Svelte…) | React only | Agnostic |
| Rendering | SVG (default) + Canvas (opt-in) | SVG only | Canvas only |
| AI-agent friendly | Explicitly designed for it | Requires learning series model | Configuration object |
| Type safety | Full TypeScript, per-field channel checking | TypeScript support | TypeScript types available |
| Maturity | Pre-alpha (0.9.0) | Mature (3.10.1) | Mature (4.5.1) |
| D3 dependency | None by default; granular opt-in | Bundles d3-scale, d3-shape | None |
| License | MIT | MIT | MIT |
Choose Recharts if you need mature, battle-tested React chart components today and bundle size is acceptable for your use case. Recharts has 51 million weekly npm downloads and a large community (source: npm recharts).
Choose Chart.js if you want Canvas-first rendering for performance with many data points, a well-understood configuration API, and broad ecosystem support.
Choose TanStack Charts if you are building a data tool or dashboard where (a) bundle size matters, (b) chart requirements will grow beyond standard types, (c) you want framework independence, or (d) you are building with AI coding agents and want a charting API they can reason about without reading extensive documentation. Just understand it is pre-alpha.
Is TanStack Charts production-ready?
No. The GitHub repository explicitly labels it PRE-ALPHA and states it is not ready for production use (source: TanStack Charts GitHub). The latest published release is 0.9.0, the API is still being refined, and the project tracks open production gates in its PLAN.md.
That said, the project was created on 2026-07-28 and has already reached 442 GitHub stars, 262 commits, and a 110-chart conformance catalog. The development velocity is high. The library is usable for prototyping, internal tools, and evaluation. For production dashboards serving real users in August 2026, Recharts or Chart.js remain the safer choice — but the gap is closing.
This connects to a broader pattern: AI coding tools are not universally making developers faster, and the libraries that win the next cycle will be the ones designed for AI composability from the ground up. TanStack Charts is an early example of this philosophy in the data-visualization space.
What this means for you
If you are a developer building data dashboards or analytics tools: start a prototype with TanStack Charts to evaluate the grammar-of-graphics model and the AI authoring workflow. You'll understand the mental model quickly — a basic chart is 20 lines. Compare the DX to your current library honestly.
If you are a team building with AI agents: the AI-authoring design is the real story here. When your AI assistant can generate correct, type-safe chart definitions from "show me monthly revenue as bars with an average line" without you correcting the series model, that saves compounding time. Try feeding the AI authoring request template to your AI coding agent and see how it compares to generating Recharts or Chart.js code. The same lesson applies when you fix AI slop in generated code — structured, typed APIs produce better AI output than configuration-heavy ones.
If you are evaluating open-source tools that are pushing the boundaries of what AI-assisted development looks like: TanStack Charts joins a growing set of open-source AI agent tools on GitHub that worth tracking. The project's own README acknowledges it was built "almost entirely with AI coding agents under direct supervision" — and the API design reflects that experience.
FAQ
Q: Is TanStack Charts free? A: Yes. It is MIT-licensed and free for all use, including commercial. The source code is on GitHub at TanStack/charts.
Q: Can TanStack Charts replace Recharts? A: Not yet for production. TanStack Charts is pre-alpha (v0.9.0) with an evolving API. For prototyping and internal tools, it can produce the same chart families Recharts covers. For production dashboards, Recharts remains the safer choice as of August 2026.
Q: Is TanStack Charts React-only? A: No. The chart definition is a plain, framework-agnostic object. Adapters exist for React, Solid, Vue, Svelte, Preact, and vanilla DOM. You swap the adapter import to change frameworks without touching the chart definition.
Q: Can AI coding agents write correct TanStack Charts code? A: Yes — the API was designed for this. The official AI Authoring guide prescribes a deterministic sequence (state the question, identify field types, choose marks, choose scales) that maps cleanly to how AI agents reason. The grammar-of-graphics model avoids the need to learn an application-specific series model, which is the main friction AI agents hit with Recharts.
Q: How is TanStack Charts different from D3?
A: D3 gives you low-level building blocks but requires you to build axes, tooltips, legends, and layout yourself. TanStack Charts compiles a grammar-of-graphics definition into a complete scene with responsive layout, guides, interactions, and a renderer. D3 modules are used internally for specialized capabilities (curves, geo projections, Sankey layouts) but are optional, granular imports — you never need the d3 umbrella package.
Q: Does TanStack Charts support server-side rendering? A: Yes. SVG server-side rendering is a first-class feature. The ChartSpec compiles to a renderer-neutral scene that can be serialized to static SVG without a browser. This is relevant for teams concerned about HTML-in-Canvas rendering performance — SVG SSR gives you charts that work without JavaScript while hydrated React components add interactivity on the client.
Every claim here is traced to a primary source, dated, and listed under Sources. Research and drafting are AI-assisted; editing, verification and publication are human decisions, and a person is accountable for what appears on this page. How we work →
Discussion
0 comments