TanStack Charts 1.0: Setup, Bundle Size and When to Use It

TL;DR

What: TanStack Charts 1.0 is a typed, framework-agnostic chart library built on marks, scales and D3 primitives.
Why it matters: One definition works across React, Angular, Vue and more, with SVG or Canvas output.
What to do: Trial it on one real chart, set explicit scales, and import only the D3 modules you need.
Key stat: TanStack’s suite measured it at 43.21–49.50 kB gzip vs 156.76–172.30 kB for Recharts.

TanStack Charts is a new MIT-licensed charting library that reached 1.0 in October 2026. You compose charts from marks, scales and axes in typed TypeScript definitions, render them as SVG or Canvas, and mount them through adapters for React, Angular, Vue and others. It suits apps whose charts will grow beyond standard templates.

— Ashutosh Tiwari, NexGismo

TanStack Charts is an open-source TypeScript visualization library from the TanStack team, built on the grammar of graphics. A chart is a framework-independent definition made of marks (lines, bars, dots), scales and interactions, which framework adapters then render to accessible SVG or, optionally, Canvas.

TanStack Charts landed its 1.0 release on October 5, 2026, and it arrives with a pitch most dashboard teams will recognise: “charts you don’t have to outgrow.” The pain point is real. You ship a clean line chart, then product asks for bars underneath, a few highlighted points, an annotation and a tooltip that shows app-specific data. With many chart libraries, that is the moment you start fighting the preset chart types.

Tanner Linsley, who created TanStack Query and Table, says in the launch post that he helped maintain Chart.js 2.0 and later built react-charts before starting this project. TanStack Charts is his answer to the wrappers he kept writing on top of other libraries.

This spotlight covers what TanStack Charts actually is, how to set it up in React and Angular, what its published bundle benchmarks really say, and the first-day gotchas that the getting-started examples skip.

What is TanStack Charts and how is it different?

TanStack Charts is a grammar-of-graphics library: you describe a chart as data, not as a fixed chart type. The 1.0 announcement explains the model simply. A line is a mark, points are marks and bars are marks. Scales map your data into values those marks need, and axes and interactions complete the chart.

That is a different mental model from the two libraries most React teams use. LogRocket’s side-by-side comparison sums it up well: Chart.js treats a chart as a configuration object rendered to Canvas, Recharts treats it as a tree of React components rendered to SVG, and TanStack Charts treats it as a data definition.

The practical effect is composition. If your line chart later needs bars, you add a barY mark to the same definition. You don’t swap to a “combo chart” type or rebuild the component.

What ships in the box

According to the official comparison page, TanStack Charts includes built-in axes and grid, legend, pointer tooltip, multi-series, selection, animation and responsive resize. It renders SVG by default with optional Canvas 2D, has no WebGL renderer, and is MIT-licensed. The installation guide lists adapters for React, React Native, Preact, Vue, Solid, Svelte, Angular, Lit, Alpine and Octane.

How do you install TanStack Charts in React or Angular?

You install one package, @tanstack/charts, plus the peers for your framework. The core, compact scales, adapters and optional capabilities all live in that single package behind separate import paths, per the installation docs.

# Core package (definitions, marks, compact scales, adapters live in one package)
npm install @tanstack/charts

# React app: add the React peers
npm install @tanstack/charts react react-dom

# Angular app (MEAN stack): Angular 19+ peers
npm install @tanstack/charts @angular/core @angular/platform-browser

Framework peers are deliberately optional, because package managers can’t scope peers to individual export subpaths. Install only the peers for the adapter you use. The compatibility table lists React and React DOM 18 or 19, Vue 3.5 or newer, and Angular core and platform-browser 19 or newer.

A React chart that combines bars and a line

Here is a revenue-versus-target chart that mixes two marks in one definition. It follows the patterns in the React quick start: explicit scales, the optional tooltip, and a memoized definition.

// RevenueChart.tsx — bars + line in one definition, data from your Express API
import { useMemo } from 'react'
import { barY, lineY, 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'

interface MonthRow {
  month: string      // "2026-08"
  revenue: number    // from MongoDB aggregation
  target: number
}

export function RevenueChart({ rows }: { rows: readonly MonthRow[] }) {
  // Memoize: a new definition identity rebuilds the whole scene
  const definition = useMemo(
    () =>
      defineChart({
        marks: [
          barY(rows, { x: 'month', y: 'revenue' }),
          lineY(rows, { x: 'month', y: 'target' }),
        ],
        scales: {
          x: { scale: () => scaleBand().padding(0.2) },
          y: { scale: scaleLinear, nice: true, grid: true },
        },
        tooltip,
      }),
    [rows],
  )

  return (
    <Chart
      definition={definition}
      height={320}
      ariaLabel="Monthly revenue against target"
      onSelect={(point) => point && console.log(point.datum.month)}
    />
  )
}

The quick start is explicit that the definition infers the row type, so you shouldn’t add component generics or casts. Callback types such as point.datum.month flow from the marks.

Using it in a MEAN-stack Angular app

For Angular, import the Chart component from @tanstack/charts/angular and pass it the same kind of definition. The 1.0 release notes include two Angular-specific fixes: server-rendered chart nodes are now preserved during hydration, and the default tooltip template works with Angular 19 AOT linking. Because definitions are plain TypeScript, you can keep them in a shared library and reuse them in an Express-rendered admin page or a React micro-frontend.

Is TanStack Charts really smaller than Chart.js and Recharts?

It depends on which TanStack number you read, and this is the detail most launch coverage misses. The project publishes two different bundle figures, measured in different ways.

The TanStack Charts homepage shows an August 2026 snapshot where TanStack Charts is 29 kB, between uPlot at 22 kB and Chart.js at 46 kB. The same page describes a basic React line chart as 32.1 kB gzip.

The comparison page uses a stricter method. Its controlled suite builds 12 minified browser consumers (line, bar, area and scatter, each at three complexity tiers). In that suite, TanStack Charts measured 43.21–49.50 kB gzip and Chart.js measured 45.78–59.61 kB. The page itself warns that the external figures are not comparable to the controlled ranges.

Where the size advantage is real

Against Chart.js, the honest reading is “about the same size.” The large gap appears against component-heavy libraries. In the same controlled suite, Recharts measured 156.76–172.30 kB gzip, or 97.24–112.60 kB with React externalized, and Apache ECharts measured 156.77–177.34 kB. The comparison page also states it does not publish a cross-machine runtime timing leaderboard, so treat any speed claims you see elsewhere with care.

My recommendation: measure your own build. Bundle size is one input to load time, and our JavaScript performance checklist covers the others that usually matter more.

What gotchas will you hit in your first TanStack Charts project?

The two most common first-day errors are missing scales and importing all of D3. Both come straight from documented rules that are easy to skim past.

// ❌ Two common first-day errors
import { defineChart, lineY } from '@tanstack/charts'
import * as d3 from 'd3'                     // pulls in the whole D3 umbrella

const chart = defineChart({
  marks: [lineY(events, { x: 'timestamp', y: 'latency' })],
  scales: {
    y: { scale: d3.scaleLinear },           // x scale missing -> authoring error
  },
})

// ✅ Explicit scales, and only the D3 module you actually use
import { defineChart, lineY } from '@tanstack/charts'
import { scaleLinear } from '@tanstack/charts/scales/linear'   // compact, no D3 runtime
import { scaleUtc } from 'd3-scale'                             // time scales need d3-scale

const chart = defineChart({
  marks: [lineY(events, { x: 'timestamp', y: 'latency' })],
  scales: {
    x: { scale: scaleUtc },
    y: { scale: scaleLinear },
  },
})

Both positional scales are required. The installation guide says a missing scale is an authoring error rather than a hidden fallback. Declare x and y every time.
Compact scales don’t cover time. The built-in @tanstack/charts/scales/* entries cover linear, band, point and ordinal. Time, UTC, log, power and other scales need d3-scale, and you must declare every d3-* module your source imports.
Don’t install the D3 umbrella. The docs warn against installing the d3 package just because a chart uses one D3 capability. Named modules keep your bundle tied to the chart you actually wrote.
Memoize live definitions. The React quick start notes that a new definition identity rebuilds the scene, so wrap definitions that capture props in useMemo.
React Native is still experimental. The compatibility contract keeps it experimental until native-device validation is done.

When should you use SVG vs Canvas in TanStack Charts?

Use the default SVG renderer unless one mark is paint-heavy, then move only that mark to Canvas. The homepage describes this mixed mode directly: the dense mark paints to Canvas while axes, labels, focus, tooltips and responsive layout keep working from the same definition.

// Move only the dense mark to Canvas; axes, tooltip and focus stay in SVG
import { canvasChartRenderer } from '@tanstack/charts/canvas'
import { defineChart, dot, lineY } from '@tanstack/charts'

const activity = defineChart({
  marks: [
    lineY(summary, { x: 'time', y: 'average' }),
    dot(events, { x: 'time', y: 'latency', renderer: canvasChartRenderer }),
  ],
  scales,
  tooltip,
})

Canvas and motion stay out of the default bundle until you import them, according to the same page. That keeps a simple dashboard light while still giving you a path for a dense scatter plot later. SVG has an accessibility advantage too: axes, labels and marks render as accessible SVG, and tooltips use an accessible HTML live region.

Testing definitions on the server

Chart definitions, scene creation and SVG string rendering don’t require a browser, per the installation docs. That makes it easy to catch broken definitions in a Node.js test before they reach users:

// Node.js (no browser needed): compile a scene to sanity-check a definition in CI
import { createChartScene, defineChart, lineY } from '@tanstack/charts'
import { scaleLinear } from '@tanstack/charts/scales/linear'

const chart = defineChart({
  marks: [lineY([2, 5, 3])],
  scales: { x: { scale: scaleLinear }, y: { scale: scaleLinear } },
})

const scene = createChartScene(chart, { width: 640, height: 320 })
console.log(scene.points.length) // fails fast if the definition is invalid

Should you switch to TanStack Charts now?

Switch if your charts are growing past standard templates, or if you need the same chart in more than one framework. Stay put if a stable Recharts or Chart.js setup already meets your needs. Even the TanStack comparison page recommends Chart.js for Canvas-first standard charts and Recharts for a React-native SVG component model.

The 1.0 label matters more than usual here. The stable compatibility contract says removing an API, renaming an option or changing a documented default now requires a major release, and deprecated APIs stay supported for the whole major version. The project moved quickly to get there: the releases page shows 0.15 through 0.18 before 1.0, followed by 1.1, 1.2 and 1.2.1.

A sensible adoption path is the same one we use for any new TanStack tool, including TanStack Start: pick one real chart, rebuild it, and compare bundle size, accessibility and code clarity against what you have. Readable chart definitions also age better, a theme we covered in writing code a human will maintain.

TanStack Charts vs Chart.js vs Recharts (from TanStack’s documented comparison)
Criterion	TanStack Charts	Chart.js	Recharts
Chart model	Grammar-of-graphics definition	Configuration object	React component tree
Default output	SVG (optional Canvas 2D)	Canvas only	SVG only
Framework-neutral core	Yes, core + adapters	Yes	React only
Bundle (controlled suite, gzip)	43.21–49.50 kB	45.78–59.61 kB	156.76–172.30 kB
License	MIT	MIT	MIT

Sources: TanStack Charts comparison page (bundle baseline dated 2026-10-14) and LogRocket for the chart-model summary.

The NexGismo verdict: TanStack Charts is the most interesting charting release of 2026 for teams that build dashboards across more than one framework. I’d use it for new Angular or React dashboards that will keep growing, but I wouldn’t rip out a working Chart.js setup for size alone, because the measured gap against Chart.js is small.

TanStack Charts 1.0 was released on October 5, 2026, with a stable compatibility contract for its public APIs.
Charts are built from marks, scales and axes in one typed definition, rather than from fixed chart types.
In TanStack’s controlled suite, TanStack Charts measured 43.21–49.50 kB gzip and Chart.js measured 45.78–59.61 kB.
Recharts measured 156.76–172.30 kB gzip in the same suite, which is where the size savings are largest.
Both x and y scales must be declared, and time scales require the d3-scale package.
The Angular adapter needs Angular 19 or newer, and React Native support remains experimental.

Frequently Asked Questions

What is TanStack Charts?

TanStack Charts is an MIT-licensed, framework-agnostic charting library for TypeScript and JavaScript. You build charts from marks such as lines, bars and dots, combined with scales and axes. It renders SVG by default, offers an optional Canvas renderer, and ships adapters for React, Vue, Angular, Svelte, Solid and more.

Is TanStack Charts production ready?

Version 1.0 shipped in October 2026 with a stable compatibility contract: breaking API changes now require a major release, and deprecated APIs stay supported for the whole major version. The React Native adapter is still experimental. Test it against your own charts before migrating a large dashboard.

Is TanStack Charts smaller than Chart.js?

Not by much. In TanStack's own controlled suite, TanStack Charts measured 43.21 to 49.50 kB gzip and Chart.js 45.78 to 59.61 kB across 12 test builds. The large savings appear against Recharts and Apache ECharts, which measured over 150 kB in the same suite.

Does TanStack Charts work with Angular?

Yes. The @tanstack/charts/angular adapter supports Angular core and platform-browser 19 or newer, and version 1.0 fixed server-rendered Angular charts during hydration. Chart definitions are framework-independent TypeScript, so the same definition can be shared between Angular and React code.

Should I switch from Recharts to TanStack Charts?

Switch if you need one typed definition that grows into custom marks, mixed SVG and Canvas rendering, or support beyond React. Stay on Recharts if your charts are standard React dashboards and your team prefers JSX components. TanStack recommends comparing your real charts before replacing an existing library.

How should you evaluate TanStack Charts this week?

Pick the chart in your app that has collected the most workarounds: the one with extra annotations, a custom tooltip or a second data series bolted on. Rebuild it with TanStack Charts, declare explicit scales, and import only the D3 modules it needs. Then compare the bundle, the keyboard and screen-reader behaviour, and how readable the definition is for the next developer.

If you try it in an Angular or MEAN-stack project, tell us how the adapter behaves with your setup. We’d like to cover real-world Angular results in a follow-up.