Gantt chart

A React component in Beamline's Charts & data-vis category.

A plan as bars on a timeline: tasks grouped down the side, each bar from its start to its end with its progress, milestones as diamonds, arrows from each task to the ones waiting on it (red, with the reason, when a task starts before what it waits on ends), a line at today and a day, week or month scale; drag a bar or its end, or grab it with Space and walk it with the arrows.

Use it for

Work planned over weeks or months where order matters: a launch plan, a migration, a release train, a hiring plan.
Seeing what waits on what, what is late against today, and moving dates by hand.

Not for

Events at times of day (event-calendar).
Work moving through stages without dates (kanban-board).
A history of what happened (timeline).

Anatomy

toolbar: the range shown, the scale switch (Day · Week · Month), Today
side list: groups that fold, task names with assignee, a grip for keyboard focus
header: months above days or weeks
lanes: one per task, weekends shaded at day scale
bar: colour by group, progress filled from the start, name inside when it fits (beside it when not), end handle
milestone: a diamond with its name
dependency arrow from a task's end to the start of a task waiting on it
today line; a status line when a move is refused or breaks a dependency

Variants

0: scale: day · week · month (column widths 32 / 18 per day / 5 per day)
1: readOnly
2: groups folded

States

loading
empty
dragging or resizing (the dates show on the bar while held)
grabbed by keyboard
dependency broken (arrow red, a glyph and the reason on the waiting task)
late (its end is before today and it is not done: a mark and the word Late)
done (progress 1: a check)
progress not tracked (null: hatched)
refused (canChange gave a reason)

Keyboard

Tab reaches the tasks as one list: ↑ ↓ move between tasks, ← → on a group folds or opens it
Space grabs a task: ← → move it a day (a week at week and month scale), Shift+← → change its end, Space or Enter drops, Escape puts it back
Enter opens a task (onTaskOpen)
T scrolls to today

Motion

Changing the scale keeps the date under the middle of the view in place while the columns ease to their new widths. A bar moved by keyboard or by someone else glides to its new dates; the arrows follow it. A dragged bar follows the pointer at once and settles on its day. Groups fold with a height ease. Reduced motion places everything at once; nothing runs at rest.

Props

Prop	Type	Default	Description
`tasks / defaultTasks / onTasksChange`	`GanttTask[] / (tasks, change) => void`	—	{ id, label, start: Date, end: Date, progress?: number \| null, group?, dependsOn?: string[], milestone?, assignee?, readOnly? }; change is { task, start, end, kind: move · resize }.
`groups`	`{ id, label, color? }[]`	—	Groups in order; a task's group picks its colour and place.
`scale / defaultScale / onScaleChange`	`"day" \| "week" \| "month"`	—	Default week.
`today`	`Date`	—	The present for the today line and Late; the browser's clock by default.
`canChange`	`(task, next: { start, end }) => true \| string`	—	Return a reason to refuse a move or resize.
`onTaskOpen`	`(task) => void`	—	Click or Enter on a task.
`readOnly`	`boolean`	—	Nothing moves.
`height`	`number \| "fill"`	—	Default 420.
`locale`	`string`	—	Formats dates.
`loading`	`boolean`	—	Skeleton bars.
`emptyLabel`	`string`	—	Default "Nothing planned yet".
`aria-label` (required)	`string`	—	The plan's name: "Q4 launch plan".
`className / classNames / style / ref`	`string / GanttChartClassNames / CSSProperties / Ref<HTMLDivElement>`	—	The root and its parts (toolbar, side, header, lane, bar, milestone, arrow, today).

Dependencies

lucide-react

Import

import { GanttChart } from "@/components/gantt-chart/gantt-chart";

Get it

Gantt chart is part of Beamline: 200+ components and 50+ complete screens for React that your coding agent (Claude Code, Codex, Cursor or any MCP client) installs into your app through Beamline's MCP server, as a ready-built package or as plain React source you can change. $49 launch price, one payment, no subscription, lifetime updates, one licence for your whole team. Get Beamline · Connect your agent