React Gantt Chart: Ziehen, Fortschritt, Abhängigkeiten

Du brauchst ein React Gantt Chart für einen Projektplan, eine Roadmap oder einen Rollout beim Kunden. Balken auf eine Datumsachse zu zeichnen, ist an einem Nachmittag erledigt. Dann wollen die Leute einen Balken ziehen, um eine Aufgabe zu verschieben, ihn strecken, um das Enddatum zu ändern, sehen, welche Aufgabe auf welche wartet, und den Plan auf dem Smartphone öffnen, wo eine Achse über zwölf Wochen nur 390px breit ist. Dieser Guide zeigt, was eine Gantt-Komponente können muss, welche kostenlosen und kostenpflichtigen Optionen es gibt, welche Props im Gantt von Wingo UI zählen, wie du Änderungen auf dem Server speicherst und ab wann eine kostenpflichtige Gantt-Library die bessere Wahl ist.

Was muss eine Gantt-Chart-Komponente für React können?

Sieben Dinge:

1. Balken zum Ziehen und Strecken. Die Mitte verschiebt eine Aufgabe, die Kanten ändern Start oder Ende, und das Ergebnis rastet auf ganze Tage ein.
2. Fortschritt. Ein gefüllter Teil des Balkens, änderbar per Ziehen oder in einem Formular.
3. Abhängigkeitspfeile vom Ende des Vorgängers zum Start des Nachfolgers, mit einem klaren Signal, wenn der Plan eine Abhängigkeit verletzt.
4. Gruppen und Meilensteine. Phasen, die sich einklappen lassen und deren Zeitraum und Fortschritt sich aus ihren Aufgaben ergeben, und Rauten für Termine wie einen Go-live.
5. Zoom. Tage für die nächsten zwei Wochen, Wochen für ein Quartal, Monate für ein Jahr.
6. Tastatur und Screenreader. Jede Verschiebung geht ohne Maus und wird angesagt.
7. Ein Smartphone-Layout. Eine horizontale Achse passt nicht auf ein Smartphone, also braucht das Diagramm dort eine andere Form.

Gibt es ein kostenloses React Gantt Chart?

Ja. Suchst du nach „React Gantt Chart kostenlos“, also ohne Lizenzgebühren, findest du diese Optionen. Sie unterscheiden sich in Lizenz, Pflege und darin, wie viel du selbst baust. Die Angaben stammen aus Doku, GitHub und npm des jeweiligen Projekts, Stand Oktober 2026.

SVAR ist die stärkste kostenlose Wahl, wenn du ein konfiguriertes Widget mit Aufgabentabelle, Sortieren und Filtern ab Werk willst. Kibo UI passt, wenn du Quellcode im shadcn-Stil willst und Abhängigkeiten und Fortschritt selbst ergänzen möchtest, denn seine Doku erwähnt beides nicht. Meide gantt-task-react bei neuen Projekten: Ein archiviertes Repository bekommt keine Fixes mehr.

Welche Props braucht das Gantt von Wingo UI?

Ein Array und einen Callback. tasks listet die Zeilen, und onTaskChange bekommt jede Verschiebung, jedes Strecken, jedes Ziehen am Fortschritt und jedes Speichern der Details als { start, end, progress? }.

npx wingo-ui@latest add gantt

"use client";

import { useState } from "react";
import { Gantt, type GanttTask } from "@/components/ui/gantt";

const PLAN: GanttTask[] = [
  { id: "design", name: "Design", start: new Date(2026, 9, 19), end: new Date(2026, 9, 30) },
  {
    id: "wireframes",
    name: "Wireframes",
    parentId: "design",
    start: new Date(2026, 9, 19),
    end: new Date(2026, 9, 23),
    progress: 1,
    assignee: { name: "Emma Carter" },
  },
  {
    id: "visuals",
    name: "Visual Design",
    parentId: "design",
    start: new Date(2026, 9, 26),
    end: new Date(2026, 9, 30),
    progress: 0.3,
    dependencies: ["wireframes"],
  },
  {
    id: "build",
    name: "Seiten bauen",
    start: new Date(2026, 10, 2),
    end: new Date(2026, 10, 13),
    assignee: { name: "Liam Walker" },
    dependencies: ["visuals"],
  },
  { id: "launch", name: "Launch", start: new Date(2026, 10, 16), end: new Date(2026, 10, 16), milestone: true, dependencies: ["build"] },
];

export function WebsitePlan() {
  const [tasks, setTasks] = useState(PLAN);

  return (
    <Gantt
      title="Website-Relaunch"
      tasks={tasks}
      locale="en-US"
      onTaskChange={(task, change) =>
        setTasks((list) => list.map((t) => (t.id === task.id ? { ...t, ...change } : t)))
      }
    />
  );
}

Bei der Aufgabenstruktur kommt es auf drei Details an. end ist inklusiv, eine eintägige Aufgabe hat also denselben Wert für start und end. progress läuft von 0 bis 1. Eine Aufgabe, die andere Aufgaben als parentId nennen, wird zur Gruppe: Ihr Zeitraum und ihr nach Dauer gewichteter Fortschritt werden aus den Kindern berechnet, und der Chevron in der Liste klappt sie ein.

Als Nächstes greifst du zu defaultZoom (day, week oder month, also 40, 20 und 6 Pixel pro Tag), snap (day oder week), listColumns (Verantwortliche, Start, Ende, Dauer, Fortschritt, Status), maxHeight (standardmäßig 520px, mit fixiertem Kopf und fixierter Aufgabenliste), editable und tone.

Zieh einen Balken, streck eine seiner Kanten, öffne dann die Zoom-Auswahl und wechsle auf Monate.

Wie funktioniert React Gantt Drag and Drop?

Ein Balken hat drei Ziehflächen. Die Mitte verschiebt die Aufgabe und behält ihre Länge, die linke und die rechte Kante bewegen jeweils ein Ende. Während du ziehst, bleibt das Original blass stehen, und ein Label zeigt die neuen Termine; beim Loslassen rastet der Balken auf die snap-Einheit ein. Nahe am Rand der Zeitachse scrollt die Ansicht mit. So ziehst du eine Aufgabe in den nächsten Monat, ohne loszulassen.

So sieht React Gantt Drag and Drop mit der Maus aus. Auf Touchgeräten muss ein Wischen über das Diagramm aber weiterhin scrollen. Auf einem Touchscreen hebt sich ein Balken deshalb erst nach langem Drücken an (450ms, der Standardwert für langes Drücken in der Library): Ein schnelles Wischen verschiebt die Zeitachse, bewusstes Halten nimmt die Aufgabe auf. Dieselbe Trennung zwischen Scrollen und Ziehen erklärt das dnd kit Tutorial für Touch-Drag auf dem Smartphone.

Die Tastatur kann dasselbe. Mit Tab landest du auf einer Aufgabe, Pfeil hoch und runter wechseln zwischen Aufgaben, Enter öffnet die Details, Alt mit Pfeil links oder rechts verschiebt sie um einen Snap-Schritt, Alt mit Shift und Pfeil links oder rechts ändert ihr Ende, und Escape bricht ein Ziehen ab. Eine Live-Region sagt jede Änderung an, etwa den neuen Zeitraum der Aufgabe.

Wie funktionieren Fortschritt und Abhängigkeitspfeile?

Setz progressEditable, und unter jedem Balken erscheint ein kleiner Griff; zieh ihn, und der Fortschritt ändert sich in Schritten von 5%. Derselbe Wert lässt sich zusammen mit den Terminen im Details-Popover bearbeiten.

Abhängigkeiten sind vom Typ Ende-Anfang: Trag die ID eines Vorgängers in dependencies ein, und ein Pfeil läuft vom Ende seines Balkens zum Start dieser Aufgabe. Beginnt eine Aufgabe am letzten Tag ihres Vorgängers oder davor, wird der Pfeil rot gestrichelt, die Aufgabenliste zeigt ein Warnsymbol, und die Ansage nennt beide Aufgaben. Dieselbe Prüfung ist als findDependencyViolations(tasks) exportiert, so blockierst du ein Speichern oder zeigst ein Banner nach genau der Regel, die auch das Diagramm zeichnet.

Das Diagramm verschiebt abhängige Aufgaben nicht, wenn du einen Vorgänger verschiebst. Das ist eine bewusste Grenze: Das Diagramm meldet, dein Code entscheidet. Ein einfacher Vorwärtsdurchlauf auf Basis von topoSortTasks, das Vorgänger vor ihre Nachfolger sortiert, schiebt jeden verspäteten Nachfolger nach rechts:

import { addDays, differenceInCalendarDays } from "date-fns";
import { topoSortTasks, type GanttTask } from "@/components/ui/gantt";

// schiebt jede Aufgabe nach rechts, bis sie am Tag nach dem Ende ihres spätesten Vorgängers beginnt (nur Aufgaben ohne Kinder)
export function pushDependents(tasks: GanttTask[]): GanttTask[] {
  const byId = new Map(tasks.map((t) => [t.id, t]));
  for (const { id } of topoSortTasks(tasks)) {
    const task = byId.get(id)!;
    let earliest: Date | null = null;
    for (const depId of task.dependencies ?? []) {
      const predecessor = byId.get(depId);
      if (!predecessor) continue;
      const next = addDays(predecessor.end, 1);
      if (!earliest || next > earliest) earliest = next;
    }
    if (earliest && task.start < earliest) {
      const days = differenceInCalendarDays(earliest, task.start);
      byId.set(id, { ...task, start: addDays(task.start, days), end: addDays(task.end, days) });
    }
  }
  return tasks.map((t) => byId.get(t.id)!);
}

Ruf sie in onTaskChange auf, nachdem du die Änderung übernommen hast:

onTaskChange={(task, change) =>
  setTasks((list) => pushDependents(list.map((t) => (t.id === task.id ? { ...t, ...change } : t))))
}

Sie schiebt Aufgaben nur nach hinten. Ziehst du einen Vorgänger nach vorn, bleiben seine Nachfolger, wo sie sind. Eine Lücke zu schließen, bleibt also eine Entscheidung, die jemand per Ziehen trifft.

Wie speichere ich Änderungen im Gantt auf dem Server?

Gib aus onTaskChange ein Promise zurück. Der Balken bleibt an seiner neuen Stelle, solange der Request läuft. Wird das Promise abgelehnt, springt er an seine alte Stelle zurück, und das Diagramm sagt an, dass die Änderung fehlgeschlagen ist. Gibst du false zurück, wird eine Änderung sofort verworfen; so lehnst du eine Verschiebung per Regel ab.

"use client";

import { useState } from "react";
import { format } from "date-fns";
import { Gantt, type GanttTask } from "@/components/ui/gantt";

const day = (date: Date) => format(date, "yyyy-MM-dd");

export function SavedPlan({ initial }: { initial: GanttTask[] }) {
  const [tasks, setTasks] = useState(initial);

  return (
    <Gantt
      title="Website-Relaunch"
      tasks={tasks}
      locale="en-US"
      progressEditable
      onTaskChange={async (task, change) => {
        const response = await fetch(`/api/tasks/${task.id}`, {
          method: "PATCH",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ start: day(change.start), end: day(change.end), progress: change.progress }),
        });
        if (!response.ok) throw new Error("Nicht gespeichert");
        setTasks((list) => list.map((t) => (t.id === task.id ? { ...t, ...change } : t)));
      }}
    />
  );
}

Schick Termine als Kalendertage, wie oben. Ein Date, das mit toISOString() serialisiert wird, steht in UTC. Eine Aufgabe, die in Berlin um lokale Mitternacht endet, kommt auf dem Server also als 22 oder 23 Uhr am Vortag an (je nach Sommerzeit). Speichert der Server nur den Datumsteil, rückt der Balken nach dem Neuladen einen Tag nach vorn.

Wie funktioniert eine Projekt-Timeline in React auf dem Smartphone?

Sie hört auf, eine Zeitachse zu sein. Unter 512px eigener Breite wird das Gantt zu einer Liste von Aufgaben, gruppiert nach Phase, jede mit einem Mini-Balken innerhalb des Projektzeitraums, damit du weiterhin siehst, was wann läuft. Tipp auf eine Aufgabe, und ihre Details öffnen sich unter 768px in einem Bottom Sheet (abschalten kannst du das mit responsive={false}). Zwischen 512 und 1023px zeigt die Liste nur die Namen, die übrigen Spalten erscheinen ab 1024px.

Der Wechsel richtet sich nach der Breite des Diagramms selbst. Ein Gantt in einem schmalen Seitenpanel am Desktop bekommt also ebenfalls die Liste.

Soll ich ein Gantt-Diagramm oder eine Timeline nehmen?

Nimm das Gantt für den Plan und die Timeline für den Verlauf. Ein Gantt-Diagramm besteht aus Balken mit Start und Ende: Dauer, Überschneidungen und Abhängigkeiten. Eine Timeline besteht aus Ereignissen zu einem bestimmten Zeitpunkt: „Spezifikation freigegeben“, „Rechnung bezahlt“, „Versendet“. Suchst du nach „React Gantt Diagramm“, „React Gantt Timeline“ oder „Projekt Timeline React“, kann beides gemeint sein. Entscheide also nach den Daten: Zeilen mit Start und Ende brauchen das Gantt, einzelne Momente die Timeline.

Sind die Zeilen Räume, Autos oder Personen und die Balken Buchungen, passt keins von beiden: Das ist ein Ressourcen-Scheduler, beschrieben im Guide zum React Resource Scheduler mit der Komponente Scheduler.

Wann lohnt sich eine kostenpflichtige Gantt-Library?

Wenn das Diagramm Projektmanagement leisten soll, statt es nur anzuzeigen. Das Gantt von Wingo UI zeichnet Abhängigkeiten vom Typ Ende-Anfang, prüft sie und überlässt das Umplanen deinem Code. Es hat keinen kritischen Pfad, keine Ressourcen-Histogramme, keine Arbeitszeitkalender (Wochenenden sind schattiert, Feiertage sind nicht abgebildet), keine Baselines und keinen Export. Sobald mehr als 150 Zeilen sichtbar sind, virtualisiert es sie, lädt Aufgaben aber nicht bei Bedarf aus einem Backend nach.

Genau für diese Liste gibt es die kostenpflichtigen Editionen. Stand Oktober 2026 ergänzt SVAR PRO (opens in a new tab) automatische Terminplanung über alle vier Abhängigkeitstypen, kritischen Pfad, Constraints, Ressourcenplanung, Arbeitszeitkalender, Baselines, Export als PDF, PNG, Excel und MS Project sowie den Import aus MS Project. DHTMLX PRO (opens in a new tab) ergänzt automatische Terminplanung, kritischen Pfad, Ressourcenverwaltung, Baselines, Projekt- und Ressourcenkalender und den offiziellen React-Wrapper, ab $799 für einen Entwickler und ein Projekt. Bryntum (opens in a new tab) beginnt bei $940 pro Entwickler im Small-Team-Tarif (ab 3 Lizenzen). Sind deine Nutzer Projektmanager, die MS-Project-Dateien importieren und wissen wollen, was alles rutscht, wenn eine Aufgabe rutscht, kommt eine Lizenz billiger, als selbst einen Scheduler zu schreiben.

Für einen Plan innerhalb eines Produkts (ein Kunden-Rollout im CRM, eine Roadmap im Admin-Bereich) brauchst du die sieben Dinge aus dem ersten Abschnitt, deine Design Tokens und Code, den du ändern kannst. Dafür ist das Gantt gebaut. Wingo UI Pro kostet $8 im Monat, $80 im Jahr oder $150 einmalig, Stand Oktober 2026 (Preise).

Was sind die typischen Fehler bei einem React Gantt Chart?

• Exklusive Enddaten. Speicher end als letzten Tag der Aufgabe, inklusiv. Mischst du inklusive und exklusive Enden, ist jeder Balken einen Tag zu lang oder zu kurz.
• Gruppentermine aus der Datenbank. Der Zeitraum einer Gruppe ergibt sich aus ihren Kindern. Speicher keinen separat bearbeiteten Gruppenzeitraum und erwarte nicht, dass er sich durchsetzt.
• Zyklen. A hängt von B ab und B von A. Das Diagramm warnt im Entwicklungsmodus, und topoSortTasks belässt solche Aufgaben in ihrer ursprünglichen Reihenfolge, aber ein Vorwärtsdurchlauf wie pushDependents löst sie nicht auf.

Wie baue ich es in mein Projekt ein?

Führ npx wingo-ui@latest add gantt aus. Die CLI kopiert den Quellcode nach components/ui, ergänzt die Komponenten und Hooks, auf denen das Gantt aufbaut (darunter Popover, Date Picker, Slider, Progress, Tooltip und den Hook für langes Drücken), und installiert date-fns, @tanstack/react-virtual, motion und lucide-react. Für Boards statt Plänen lies den Guide zum React Kanban Board. Weitere Deep Dives zu einzelnen Komponenten findest du in der Kategorie Komponenten-Guides, und der Guide zu React-Formularkomponenten wendet dieselben Regeln für Touch, Tastatur und Screenreader auf jedes Formularelement an.

Häufige Fragen

Gibt es ein kostenloses React Gantt Chart?

Ja. SVAR React Gantt hat einen Core unter MIT mit Drag and Drop, Abhängigkeiten und Zoom, DHTMLX Gantt eine Community Edition unter MIT, die du selbst in React einbindest, und Kibo UI liefert ein Gantt unter MIT als Quellcode über seine Registry im shadcn-Stil. gantt-task-react steht ebenfalls unter MIT, sein GitHub-Repository ist aber archiviert, und das letzte npm-Release stammt vom Juli 2022.

Wie baue ich Drag and Drop in ein React Gantt Chart ein?

Behandle einen Balken als drei Ziehflächen: Die Mitte verschiebt die Aufgabe, die linke Kante ändert den Start, die rechte das Ende, und lass das Ergebnis beim Loslassen auf ganze Tage einrasten. Das Gantt von Wingo UI übernimmt das für dich und meldet jede Änderung über onTaskChange mit neuem Start, Ende und Fortschritt.

Welche Abhängigkeitstypen gibt es in einem Gantt-Diagramm?

Projekt-Tools kennen vier: Ende-Anfang, Anfang-Anfang, Ende-Ende und Anfang-Ende. Ende-Anfang ist mit Abstand der häufigste und der einzige Typ, den das Gantt von Wingo UI zeichnet; SVAR PRO plant automatisch über alle vier.

Was ist der Unterschied zwischen einem Gantt-Diagramm und einer Timeline?

Ein Gantt-Diagramm plant Arbeit als Balken auf einer Zeitachse, du siehst also Dauer, Überschneidungen und Abhängigkeiten. Eine Timeline listet Ereignisse auf, die zu einem bestimmten Zeitpunkt passiert sind, etwa einen Aktivitäts-Feed oder einen Bestellverlauf, und dafür ist die Timeline-Komponente von Wingo UI gedacht.

Ist das Gantt von Wingo UI kostenlos?

Nein. Gantt und Timeline sind Pro-Komponenten. Popover, Tooltip und Progress, auf denen das Gantt aufbaut, sind kostenlos.