TanStack Charts: Neue typensichere Chart-Bibliothek für SVG und Canvas

LinkTanStack5. September 2026Tool

Mit TanStack Charts (v0, Alpha) stellt das TanStack-Team eine typensichere und Tree-shaking-fähige Chart-Grammatik vor. Sie erlaubt das flexible Rendern via SVG, Canvas oder in gemischten Modi und setzt auf tiefe TypeScript-Integration sowie Kompatibilität mit D3-Primitiven.

Das Wichtigste

Deklarative Chart-Grammatik für SVG und Canvas mit Unterstützung kompakter Basiselemente oder D3-kompatibler Eingaben.
Vollständige Typsicherheit: Typen bleiben bis zur Datenzeile erhalten; fehlerhafte Definitionen schlagen bereits zur Compile-Zeit fehl.
Kompakte Bundle-Größe von rund 29 kB (minifiziert und gzippt) für ein Standard-React-Liniendiagramm inklusive SVG, Skalen und Achsen.
Hybrides Rendering: Einzelne rechenintensive Markierungen lassen sich auf Canvas auslagern, während Achsen und Tooltips als barrierefreies SVG/HTML verbleiben.
Unterstützung für Web-Adapter, Standard-DOM, statischen Export sowie einen experimentellen React-Native-Adapter.

Warum das relevant ist

Datenvisualisierung im Frontend leidet oft unter sperrigen APIs, unzureichender TypeScript-Unterstützung oder großen Bundle-Größen. TanStack Charts bringt das modulare Architekturprinzip des TanStack-Ökosystems in den Chart-Bereich und schließt die Lücke zwischen leichtgewichtigen Komponenten und komplexen D3-Lösungen.

Einordnung

TanStack Charts schlägt ein kompositionsorientiertes Modell vor: Anstatt monolithische Chart-Komponenten bereitzustellen, definiert man Charts deklarativ über defineChart mit separaten Marks, Scales und Tooltips. Besonders bemerkenswert ist die Rendering-Flexibilität: Standardmäßig setzt die Bibliothek auf barrierefreies SVG, erlaubt aber das gezielte Umschalten einzelner rechenintensiver Marks auf Canvas, ohne das API-Modell oder Interaktionen wie Hover und Tooltips zu brechen. Durch die offizielle Kompatibilität mit D3-Skalen und shadcn-Komponenten integriert sich die Lösung nahtlos in moderne React- und Design-System-Workflows.

Erwähnte Links

TanStack Charts Documentationtanstack.com/charts/v0

Gefunden in

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

Zusammenfassung von KI erstellt (Gemini 3.8 Flash, 27. September 2026). Sie kann Fehler enthalten – maßgeblich ist die Originalquelle.

Inhaltlich ähnlich, ermittelt über die KI-Suche.

Video
Video:Better Stack10. Aug. 2026
TanStack Charts: Neue Chart-Bibliothek nach dem Grammar-of-Graphics-Prinzip
Better Stack stellt TanStack Charts vor, eine neue TypeScript- und JavaScript-Charting-Bibliothek. Statt starrer Chart-Typen nutzt die Bibliothek ein 'Grammar of Graphics'-Konzept, bei dem Diagramme flexibel aus Marks, Skalen und Mappings zusammengesetzt werden. Neben hoher Typsicherheit und Framework-agnostischem Kern zeichnet sie sich durch geringe Bundle-Größe und ein agentenfreundliches API-Design aus.
Webentwicklung· Tool
Repository:shadcn-labs/pdfcn5. Sep. 2026
pdfcn: React-Komponenten für PDF-Erstellung im shadcn-Stil
pdfcn ist eine quelloffene Komponentenbibliothek zur Erstellung von PDFs mit React. Sie basiert auf Takumi sowie Forme und übernimmt das Copy-Paste-Prinzip und CLI-Workflow-Modell von shadcn/ui.
1045SterneTypeScript
Webentwicklung· Tool
Repository:lukilabs/beautiful-mermaid5. Sep. 2026
beautiful-mermaid: Schnelles Rendern von Mermaid-Diagrammen als SVG und ASCII
beautiful-mermaid ist eine TypeScript-Bibliothek von Craft, die Mermaid-Diagramme synchron als SVG oder ASCII-Art ausgibt. Sie arbeitet ohne DOM-Abhängigkeiten und richtet sich an Web-Apps sowie CLI-Werkzeuge im KI-Umfeld.
11.031SterneTypeScript
KI & AI· Tool
X-Post:OrcDev15. Aug. 2026
shadscan: Open-Source-UI-Audit für React und shadcn/ui ohne KI
OrcDev stellt shadscan vor, ein kostenloses Open-Source-Tool zur Prüfung von React- und shadcn/ui-Anwendungen. Die Software analysiert Code sowie gerenderte Seiten deterministisch auf fehlende Zustände, Barrierefreiheit, Layout-Überläufe und Metadaten-Probleme, ohne dabei KI-Modelle oder API-Schlüssel zu benötigen.
192Lesezeichen42.246Aufrufe
Webentwicklung· Tool
Link:Maxwell Barvian5. Sep. 2026
NumberFlow: Abhängigkeitsfreie React-Komponente für animierte Zahlen
NumberFlow ist eine quelloffene, barrierefreie React-Komponente von Maxwell Barvian, die Zahlenwechsel automatisch und flüssig animiert. Die Bibliothek verzichtet auf externe Abhängigkeiten, nutzt Web-Standards und unterstützt native Formatierungsoptionen über Intl.NumberFormat.
Webentwicklung· Tool
Repository:vercel-labs/native5. Sep. 2026
Native SDK: Natives Desktop-Framework ohne Web-Runtime von Vercel Labs
Native SDK ist ein Open-Source-Toolkit von Vercel Labs zur Erstellung nativer Desktop-Anwendungen. Es kombiniert deklaratives Markup und TypeScript mit einer in Zig entwickelten Rendering-Engine, die ohne Browser, WebView oder JavaScript-Runtime im Binärpaket auskommt.
7628SterneZig
Webentwicklung· Tool