Repolode
Submit
TanStack

TanStack/charts

A typed TypeScript charting grammar for responsive, accessible, server-rendered charts built on granular D3 primitives.

View on GitHubWebsite
Stars
848
Forks
56
Open issues
51
Last commit
9 hours ago

What is it?

TanStack Charts is a TypeScript visualization library that describes charts as a composition of marks, channels, and scales. Marks consume the original data arrays, objects, or iterables directly, so applications do not need to reshape their data model to build a chart. Common numeric, band, point, and ordinal scales are provided compactly, and native d3-scale functions can be swapped in where fuller semantics are needed.

The library covers the runtime around the chart as well: responsive layout, automatic guide margins, themes, interaction, animation, accessibility, SVG server-side rendering, hydration, and export. Definitions are framework-independent and can be rendered through React, Preact, Vue, Solid, Svelte, Angular, Lit, Alpine, Octane, a vanilla DOM host, static SVG, or an optional Canvas renderer. Marks, transforms, layouts, and renderers are exposed as separate subpaths so applications only import what they use.

Key features

  • 01Marks accept arrays, objects, tuples, and iterables without a data-model rewrite.
  • 02Compact linear, band, point, and ordinal scales, with direct d3-scale substitution.
  • 03Responsive sizing with automatic guide margins, themes, and interaction.
  • 04SVG server-side rendering, hydration, and export.
  • 05Optional Canvas renderer for reducing per-mark DOM cost.
  • 06Same chart definition works across many frameworks and the vanilla DOM.

Use cases

  • Adding standard line, bar, or area charts to a React or Vue application.
  • Rendering charts on the server for SSR pages or static exports.
  • Building product-specific visualizations that outgrow common chart presets.
  • Sharing one chart definition across several frameworks in a multi-framework codebase.

Quick start

  1. 1

    Install the workspace dependencies

    pnpm install
  2. 2

    Run the integrated data dashboard sandbox

    pnpm dev:sandbox

Things to know

  • The README documents unreleased main, which may differ from the published 1.1.0 release.
  • Development requires Node.js 22 or newer and pnpm 11.
  • Canvas rendering reduces DOM cost but not scene memory or dense nearest-point work for large interactive charts.

In collections

Data science courses & tools

Topics

#data-visualization#charts#d3#typescript#svg#accessibility#ssr#react#accessible-charts#charting-library

FAQ

What is charts?
A typed TypeScript charting grammar for responsive, accessible, server-rendered charts built on granular D3 primitives. TanStack Charts is a TypeScript visualization library that describes charts as a composition of marks, channels, and scales. Marks consume the original data arrays, objects, or iterables directly, so applications do not need to reshape their data model to build a chart. Common numeric, band, point, and ordinal scales are provided compactly, and native d3-scale functions can be swapped in where fuller semantics are needed.
Is charts free to use? What license does it have?
charts is open source under the MIT license. Check the license terms before using it in commercial products.
Is charts still maintained?
Actively maintained. The last commit to charts was on Oct 22, 2026.
What can I use charts for?
Adding standard line, bar, or area charts to a React or Vue application. Rendering charts on the server for SSR pages or static exports. Building product-specific visualizations that outgrow common chart presets. Sharing one chart definition across several frameworks in a multi-framework codebase.
How do I install charts?
Install the workspace dependencies: pnpm install Run the integrated data dashboard sandbox: pnpm dev:sandbox
Where can I get charts?
The source code and installation instructions are on GitHub: https://github.com/TanStack/charts

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects