GanttChart
v1.0.22Updated 19 Oct 2026ClickUp-style project timeline — a zoomable task grid with collapsible group headers, dependency links, a critical-path toggle and a resizable task panel.
Preview
Live · 12 stories▸Why this is recommendedgantttimelineprojectschedule+4
The default, out-of-the-box GanttChart.
- ✓Project plans and rollout schedules
- ✓Team workload timelines
- ✓Construction / implementation phase tracking
- Day / week / month zoom with two-tier sticky header
- Drag to move / resize bars (snaps to day grid, keyboard arrows too)
- Inner progress fill + drag-to-set progress
- Milestone diamonds
- Collapsible groups with min-max summary spans
- All four dependency kinds — FS / SS / FF / SF, written as a bare predecessor id or { id, type }; the kind decides which END of each bar the connector lands on, so a start-to-start link joins the two left edges and a finish-to-finish the two right ones
- Drag-to-link handle (makes the finish-to-start default; a gesture cannot say which ends it means)
- Critical path over all four kinds: earliest-start / longest-tail CPM, so starting together contributes none of the predecessor duration where a finish-to-start contributes all of it
- TODAY line + scroll-to-today button
- Weekend shading
- Hover tooltip (customisable via renderTaskTooltip)
- Working calendar: custom weekend days, labeled holidays with distinct shading, and respectNonWorkingDays mode (endpoints snap to working days, durations count working days)
- Professional list columns: WBS numbering, assignees, start/end, duration, progress mini-bar (configurable via listColumns) with a drag-resizable panel divider
- Selection model (bars, rows and connectors; Delete removes a selected dependency), inline add-task composers, cycle-safe critical-path toggle, edge auto-scroll while dragging
- Read-only mode
- i18n: labels prop overrides every built-in string (toolbar, legend, empty state, tooltip, aria-labels, announcements); axis month/weekday names, dates and numbers localize via LocaleProvider/useB69Locale — Buddhist-calendar Thai renders out of the box (see the ThaiLocale story)
- Unmount-safe interaction engine: the auto-scroll and fit-to-plan rAF loops are disposed without state updates on unmount, so SPA route changes away from a mounted chart stay console-clean in React 19 dev (FB-13)
- ✕Simple event sequences (use TimelineHorizontal)
- ✕Calendar day views (use Calendar)
Install
Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.
Usage
Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.
Props
tasksControlled tasks (pair with callbacks)
—defaultTasksUncontrolled initial tasks - interactions mutate internally
—groupsCollapsible swimlane sections
—zoomTimeline scale (defaultZoom for uncontrolled)
—onTaskMoveFired after a bar is dragged to new dates
—onDependencyCreateFired when a link is drawn between bars with the drag handle. The type is always "FS": a drag gesture cannot say which ends it means, so it makes the default kind and a host wanting another writes it into the data. MCP feedback fb_196930af.
—onDependencyDeleteFired when a selected connector is deleted, with the kind that was removed.
—showDependenciesDraw dependency connectors (default true). All four kinds — a connector anchors on whichever end of each bar its kind names.
—showCriticalPathInitial state of the critical-path highlight (uncontrolled thereafter — the toolbar toggle owns it). The CPM understands all four dependency kinds: a start-to-start link contributes none of the predecessor duration to the run where a finish-to-start contributes all of it.
—readOnlyDisable all pointer/keyboard mutations
—labelsOverride any built-in UI string - merged over the English DEFAULT_GANTT_CHART_LABELS; dates/numbers localize separately via LocaleProvider
—