TanStack Charts: Typed, Tree-Shakable Visualisation Grammar for SVG and Canvas

LinkTanStackTool

TanStack has introduced TanStack Charts (v0, alpha), a typed, tree-shakable chart grammar for SVG and Canvas. It combines strict TypeScript inference, modular bundle sizes, and compatibility with D3 primitives.

Key points

  1. Declarative chart grammar for SVG and Canvas using compact primitives or D3-compatible inputs.
  2. Deep TypeScript integration tracing types directly back to source rows, failing invalid definitions at compile time.
  3. Lean footprint of around 29 kB minified and gzipped for a baseline React line chart including scales and axes.
  4. Flexible rendering model: SVG by default, mixed SVG and Canvas for high-density marks, or full Canvas rendering.
  5. Supports web adapters, vanilla DOM, static exports, and an experimental React Native adapter.

Why it matters

Web charting libraries often force developers to choose between heavy, inflexible all-in-one chart widgets and low-level D3 code. TanStack Charts applies the ecosystem's signature headless and modular philosophy to data visualisation, offering fine-grained control with minimal bundle overhead.

Analysis

The release focuses heavily on composability via defineChart, allowing developers to coordinate multiple layers—such as areas, rules, lines, and event dots—across a shared coordinate space. The ability to isolate performance-heavy marks to Canvas while retaining accessible SVG guides and HTML tooltips addresses a frequent pain point in data-dense dashboards. Integration with D3 shapes and scales ensures advanced visualisation requirements can be met without outgrowing the framework.

Found in

Summary generated by AI (Gemini 3.8 Flash, 27 September 2026). It may contain errors – the original source is authoritative.

Similar in content, found by the AI search.

  • Video

    Video:Better Stack

    TanStack Charts: New Grammar-of-Graphics Charting Library for JavaScript

    Better Stack reviews TanStack Charts, a newly released charting library for JavaScript and TypeScript. Built on the grammar of graphics rather than fixed chart types, it allows developers to compose visuals using marks, scales, and mappings. It features a framework-agnostic core, small bundle sizes, and an API deliberately structured for AI agents.

    Web development· Tool

  • Repository:DavidHDev/canvas-ui

    Canvas UI: Creative WebGL and Shader Effects for HTML Interfaces

    Canvas UI is a component library that renders canvas effects—such as fluid simulations, shaders, and 3D scenes—directly over live, interactive HTML interfaces. It is framework-agnostic and supports React, Vue, Svelte, and vanilla JavaScript.

    4.9kstarsTypeScript

    Web development· Tool

  • Repository:shadcn-labs/pdfcn

    pdfcn: shadcn-Style React Components for PDF Generation

    pdfcn is an open-source component library for generating PDFs in React. Built on Takumi and Forme, it adopts the copy-paste philosophy and CLI registry workflow of shadcn/ui.

    1kstarsTypeScript

    Web development· Tool

  • Repository:lukilabs/beautiful-mermaid

    beautiful-mermaid: Fast SVG and ASCII Rendering for Mermaid Diagrams

    beautiful-mermaid is a TypeScript library developed by Craft that renders Mermaid diagrams synchronously as SVG or ASCII art. It runs with zero DOM dependencies and is built for web interfaces and AI CLI assistants.

    11kstarsTypeScript

    AI & LLMs· Tool

  • X post:OrcDev

    shadscan: Open-source UI audit tool for React and shadcn/ui without AI

    OrcDev introduced shadscan, a free, open-source quality scanner for React and shadcn/ui applications. It deterministically checks code and rendered pages for missing states, accessibility gaps, overflow bugs, and metadata issues without requiring AI models, accounts, or API keys.

    192bookmarks42.2kviews

    Web development· Tool

Let's talk about your project

Locations

  • Mattersburg
    Johann Nepomuk Bergerstraße 7/2/14
    7210 Mattersburg, Austria
  • Vienna
    Ungargasse 64-66/3/404
    1030 Wien, Austria

Parts of this content were created with the assistance of AI.