TL;DR
Nach drei Dashboard-Projekten habe ich mir diese Woche Zeit genommen, den Markt zu sichten: Welche React-Chart-Bibliotheken gibt es eigentlich, und welche davon passen zu meinem Use Case? Spoiler: Von über 20 Bibliotheken sind für Dashboards im Mittelstand nur etwa 6 wirklich relevant. Die anderen sind entweder zu wissenschaftlich, zu teuer oder zu aufwändig.
Kontext & Ziel
In den letzten Wochen habe ich ein Finance Dashboard, ein Weather & Energy Dashboard und einen DashReport gebaut. Dabei habe ich hauptsächlich Recharts (teilweise Charts.js) verwendet, einfach weil ich damit angefangen hatte und es funktioniert hat.
Aber: Ist Recharts wirklich die beste Wahl? Oder verpasse ich etwas?
Diese Woche hatte ich keine Zeit zum Programmieren, also habe ich stattdessen mit Claude zusammen ein wenig recherchiert.
Mein Ziel: Einen Überblick bekommen, welche Bibliotheken für meine Nische tatsächlich in Frage kommen.
Meine Anforderungen
Bevor ich in die Recherche eingestiegen bin, habe ich mir überlegt, was ich eigentlich brauche:
Must-haves:
- Kostenlos oder günstiges Lizenzmodell (da ich alleine arbeite)
- Professioneller Look & Feel ohne viel Styling-Aufwand
- Mindestens die Standard-Charts: Line, Bar, Area, Pie
- Gute Dokumentation und aktive Community
Muss gut mit LLM-gestützter Entwicklung funktionieren (Claude, ChatGPT kennen die Bibliothek)
Nice-to-haves:
- Passt sich automatisch an verschiedene Bildschirmgrößen an
- Dezente Animationen
Anpassbar an Corporate Designs
Brauche ich nicht:
- 3D-Charts (kein Wissenschafts-Dashboard)
- Exotische Chart-Typen
- Enterprise-Support-Verträge
Was ich gefunden habe
Der React-Chart-Markt ist riesig. Über 20 Bibliotheken, dazu noch Dashboard-Frameworks mit integrierten Charts. Aber für meinen Use Case fallen die meisten schnell raus.
Zu wissenschaftlich: Plotly ist fantastisch für 3D-Visualisierungen und wissenschaftliche Daten, aber kein Mittelständler braucht ein 3D-Scatter-Plot seiner Verkaufszahlen.
Zu kompliziert: Visx von Airbnb gibt dir maximale Kontrolle, aber du musst quasi jeden Chart von Grund auf zusammenbauen. Viel zu aufwändig.
Zu teuer: Highcharts, Syncfusion, FusionCharts sind alles gute Produkte, aber mit Lizenzkosten, die für Einzelpersonen oder kleine Projekte keinen Sinn machen.
Übrig bleiben sechs Bibliotheken, die ich mir genauer angeschaut habe.
Die 6 relevanten Bibliotheken im Vergleich
Recharts
Recharts ist die meistverwendete React-Chart-Bibliothek mit über einer Million Downloads pro Woche. Ich nutze sie seit Woche 14.
- Was mir gefällt: Schneller Einstieg, gute Dokumentation, Charts passen sich automatisch an die Bildschirmgröße an. Wenn ich Claude oder ChatGPT nach Recharts-Code frage, bekomme ich fast immer funktionierenden Code zurück. Die LLMs kennen diese Bibliothek gut.
- Was mich stört: Wenn ich sehr individuelle Designs umsetzen will, wird es manchmal fummelig. Aber für Standard-Dashboards reicht es locker.
- Kosten: Komplett kostenlos (MIT-Lizenz).
Nivo
Nivo hat mich bei der Recherche am meisten überrascht. Die Charts sehen von Anfang an richtig gut aus, ohne dass ich viel am Styling machen muss.
- Was mir gefällt: Es gibt einen interaktiven Playground auf nivo.rocks, wo ich Charts live zusammenklicken und dann den fertigen Code kopieren kann. Perfekt für meinen Workflow! Außerdem: Heatmaps, Sankey-Diagramme, Calendar-Charts, das sind alles Sachen, die Recharts nicht kann.
- Was mich stört: Die Bibliothek funktioniert etwas anders als Recharts. Wenn ich wechsle, muss ich mich umgewöhnen und ob die LLMs das können, muss ich testen.
- Kosten: Komplett kostenlos (MIT-Lizenz).
ApexCharts
ApexCharts wurde speziell für Dashboards entwickelt. Zoom, Scrollen durch Zeitreihen, mehrere Charts die synchron reagieren: das ist alles schon eingebaut.
- Was mir gefällt: Wenn ein Kunde durch seine Daten zoomen oder scrollen will, muss ich das nicht selbst programmieren. Spart Zeit. Die Charts sehen modern aus und haben schöne Animationen.
- Was mich stört: Ehrlich gesagt noch nichts, ich habe es aber auch noch nicht in einem echten Projekt verwendet.
- Kosten: Kostenlos für Unternehmen unter 2 Mio. USD Umsatz, Non-Profits und Bildung. Darüber: kommerzielle Lizenz nötig.
Chart.js
Chart.js ist mit 65.000 GitHub-Stars die bekannteste JavaScript-Chart-Bibliothek überhaupt. Jedes Tutorial, das du findest, nutzt wahrscheinlich Chart.js.
- Was mir gefällt: Riesige Community, unzählige Tutorials und Antworten auf Stack Overflow. Wenn ich ein Problem habe, hat es garantiert schon jemand gelöst. Außerdem gibt es viele Erweiterungen (Zoom, Anmerkungen in Charts, etc.).
- Was mich stört: Die LLMs kennen Chart.js zwar gut, aber der Code ist für mich weniger intuitiv und mehr Konfiguration. Geschmackssache.
- Kosten: Komplett kostenlos (MIT-Lizenz).
Apache ECharts
ECharts kommt ursprünglich aus China (von Baidu) und kann Dinge, die andere nicht können: Millionen von Datenpunkten flüssig darstellen. Für normale Business-Dashboards Overkill, aber gut zu wissen, falls mal ein Projekt mit riesigen Datenmengen kommt.
- Was mir gefällt: Extrem viele Chart-Typen verfügbar, sehr schnell auch bei vielen Daten.
- Was mich stört: Die Dokumentation ist teilweise noch auf Chinesisch, und die LLMs kennen ECharts nicht so gut wie Recharts oder Chart.js.
- Kosten: Komplett kostenlos (Apache-Lizenz).
Tremor
Tremor ist speziell für Dashboards gebaut und nimmt dem Entwickler noch mehr Arbeit ab: Neben Charts gibt es fertige KPI-Karten, Listen und andere Dashboard-Bausteine. Alles im gleichen Design.
- Was mir gefällt: Wenn ich Tailwind CSS nutze, passt Tremor perfekt rein. Die Komponenten sehen sofort professionell aus.
- Was mich stört: Weniger Kontrolle über die Charts selbst. Wenn ein Kunde sehr spezielle Wünsche hat, stoße ich vielleicht an Grenzen.
- Kosten: Komplett kostenlos (MIT-Lizenz).
Fazit
Woche 18: ✅
Bei der Recherche bin ich über 30 Chart-Typen gestolpert. Für Business-Dashboards im Mittelstand sind aber nur wenige wirklich relevant.
Alle sechs Bibliotheken können die Essentials. Bei Heatmaps, Funnels und Sankey-Diagrammen gibt es Unterschiede: Nivo und ECharts haben hier die größte Auswahl.
Nach dieser Recherche werde ich vermutlich bei Recharts bleiben, aber ich habe Lust bekommen auch die anderen Bibliotheken mal auszutesten.
Warum Recharts? Ich kenne es, es funktioniert, die LLMs können damit gut umgehen. Für die Standard-Charts, die 90% meiner Dashboards ausmachen werden, reicht es vollkommen.
Wann ich wechseln würde:
- Nivo, wenn ein Kunde ein besonders schickes Design will oder ich Chart-Typen wie Sankey oder Heatmap brauche. Der Playground macht das Ausprobieren super einfach.
- ApexCharts, wenn ich viele interaktive Features brauche (Zoom, Scrollen durch Daten) ohne sie selbst bauen zu müssen.
- Tremor, wenn ich ein Dashboard schnell fertig brauche und nicht viel am Design basteln will.
- ECharts, falls wirklich mal ein Projekt mit riesigen Datenmengen kommt (Sensordaten, IoT, etc.).
