⚡Vibe Coding

Charts mit Recharts einbauen

Daten visuell darstellen in React

Recharts ist die beliebteste Chart-Library fuer React. Linien, Balken, Torte, alles dabei. Mit Claude Code beschreibst du einfach welche Daten du visualisieren willst und bekommst den fertigen Chart.

Pro-Tip — Der schnelle Weg

Nutze die ResponsiveContainer Komponente immer als Wrapper. Ohne sie passt sich der Chart nicht an verschiedene Bildschirmgroessen an.

Seite 1

Recharts installieren

Installiere Recharts in deinem Next.js Projekt. Die Library ist leichtgewichtig und hat keine grossen Abhaengigkeiten.

npm install recharts

Ersten Chart bauen

Importiere die Komponenten und fuettere sie mit Daten. Recharts arbeitet deklarativ: du beschreibst WAS du willst, nicht WIE es gezeichnet wird.

'use client'
import { LineChart, Line, XAxis, YAxis, Tooltip, ResponsiveContainer } from 'recharts'

const data = [
{ monat: 'Jan', umsatz: 4000 },
{ monat: 'Feb', umsatz: 3000 },
{ monat: 'Mrz', umsatz: 5000 },
]

export function UmsatzChart() {
return (
<ResponsiveContainer width='100%' height={300}>
<LineChart data={data}>
<XAxis dataKey='monat' />
<YAxis />
<Tooltip />
<Line type='monotone' dataKey='umsatz' stroke='#8884d8' />
</LineChart>
</ResponsiveContainer>
)
}

Chart-Typen waehlen

LineChart fuer Trends, BarChart fuer Vergleiche, PieChart fuer Anteile, AreaChart fuer Volumen. Waehle den Typ der deine Daten am besten erzaehlt.

Styling anpassen

Passe Farben, Schriften und Groessen an dein Design an. Nutze die stroke und fill Props fuer Farben, die Tooltip-Komponente fuer Hover-Infos.

Echte Daten anbinden

Lade Daten von deiner API und reiche sie als data-Prop weiter. Recharts rendert automatisch neu wenn sich die Daten aendern.

const [data, setData] = useState([])
useEffect(() => {
fetch('/api/umsatz').then(r => r.json()).then(setData)
}, [])

Seite 2

Warum das funktioniert

Deklaratives API macht Charts bauen so einfach wie HTML schreiben
ResponsiveContainer sorgt automatisch fuer Mobile-Kompatibilitaet
Claude Code kann komplexe Charts aus einer Beschreibung generieren
Recharts ist die am meisten genutzte React Chart Library mit bester Doku

Tipps

Immer 'use client' am Anfang, Recharts braucht den Browser
ResponsiveContainer braucht eine feste Hoehe, width kann 100% sein
CartesianGrid mit strokeDasharray macht den Hintergrund professioneller
Fuer Dark Mode aendere die stroke-Farben der Achsen

Seite 3

Bereit für den nächsten Schritt?

KIWorld VibeCoding Masterclass

Du willst nicht nur einzelne Tools einrichten, sondern wirklich lernen wie du mit KI komplette Apps, Websites und SaaS-Produkte baust? Über 700 Videos — von Anfänger bis Fortgeschritten — in jedem Bereich. Von der Idee bis zum fertigen Produkt, ohne eine Zeile Code selbst zu schreiben.

Jetzt Masterclass ansehen