TanStack Charts 1.0 : une API enfin stable

Ce qui se passe

TanStack publie la version 1.0 de Charts, que sa page d'accueil présente comme une grammaire de graphiques qu'on n'a pas à dépasser. L'API est déclarée stable, avec un guide de migration pour les versions précédentes ; la prise en charge de React Native reste expérimentale.

Le modèle

Un graphique se déclare avec defineChart : des marks (points, lignes, aires), des échelles et des canaux de données. Les champs, le type de chaque ligne de données, les domaines et clés inférés, les infobulles et les callbacks de focus remontent tous aux données passées ; une définition invalide échoue à la compilation, et chacun des 188 exemples du catalogue compile en TypeScript strict.

import { defineChart, dot } from '@tanstack/charts'
import { scaleLinear } from '@tanstack/charts/scales/linear'
import { Chart } from '@tanstack/charts/react'

const revenueVsRetention = defineChart({
  marks: [dot(accounts, { x: 'monthlyRevenue', y: 'retention', key: 'id' })],
  scales: {
    x: { scale: scaleLinear, axis: { label: 'Revenu mensuel (k$)' } },
    y: { scale: scaleLinear, axis: { label: 'Rétention à 90 jours' } },
  },
})

export const RevenueChart = () => (
  <Chart definition={revenueVsRetention} ariaLabel="Rétention selon le revenu" />
)

Rendu et poids

• SVG par défaut. Une marque lourde peut passer en Canvas sans toucher aux axes, étiquettes, focus, infobulles, mise en page, hydratation ni export. Canvas et animations restent hors du bundle tant qu'on ne les importe pas.
• D3 compatible : les échelles et courbes D3 s'utilisent telles quelles, l'API est inspirée d'Observable Plot.
• Thème : variables CSS et contenu d'infobulle personnalisé.

Le site publie un tableau de poids minifié et gzippé, daté d'août 2026 :

Limite : c'est la mesure des auteurs, sans protocole détaillé. La page donne aussi 32,1 ko gzip pour un graphique en ligne React de base, sans expliquer l'écart avec les 29 ko du tableau.

Comment s'y prendre

1. Prendre un graphique réel de l'application, pas l'exemple de démonstration.
2. Le reconstruire avec defineChart et comparer le poids du bundle.
3. Lire le guide de migration avant de s'engager sur une base existante.

Source : TanStack Charts, TanStack, 13 octobre 2026.