build69
Sign inGet API key
build69  /  Components  /  Charts  /  GanttChart

GanttChart

v1.0.11Updated 27 Aug 2026

ClickUp-style project timeline — a zoomable task grid with collapsible group headers, dependency links, a critical-path toggle and a resizable task panel.

View source← Back to catalog

Preview

Live · 11 stories
DefaultOpen ↗
▸Why this is recommendedgantttimelineprojectschedule+4

The default, out-of-the-box GanttChart.

Recommended for+14
  • ✓Project plans and rollout schedules
  • ✓Team workload timelines
  • ✓Construction / implementation phase tracking
Tags+6
gantttimelineprojectscheduleroadmapdependenciesdata-vizdefault
Features+4
  • 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
  • Finish-to-start dependency arrows + drag-to-link handle
  • 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)
Not recommended for−2
  • ✕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.

get_registry_item({ name: "GanttChart" })

Usage

import { GanttChart } from '@/components/data-viz/gantt';

<GanttChart defaultTasks={tasks} groups={groups} defaultZoom="week" onTaskMove={save} />

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

PropTypeRequired
tasks

Controlled tasks (pair with callbacks)

GanttTask[]—
defaultTasks

Uncontrolled initial tasks - interactions mutate internally

GanttTask[]—
groups

Collapsible swimlane sections

GanttGroup[]—
zoom

Timeline scale (defaultZoom for uncontrolled)

'day' | 'week' | 'month'—
onTaskMove

Fired after a bar is dragged to new dates

(id, start, end) => void—
onDependencyCreate

Fired when a link is drawn between bars

(fromId, toId) => void—
readOnly

Disable all pointer/keyboard mutations

boolean—
labels

Override any built-in UI string - merged over the English DEFAULT_GANTT_CHART_LABELS; dates/numbers localize separately via LocaleProvider

Partial<GanttChartLabels>—

Related

Platform docsAll componentsSource files