Gantt Chart

An interactive Gantt chart with a resizable task tree on the left and a scrollable timeline on the right. Supports nested tasks, drag-to-move, drag-to-resize, dependency arrows, zoom levels, and undo/redo.

Interactive

Use onchange to retain the updated task tree in parent state. Drag task bars to move them, drag their edges to resize. Click + on a task to add a child. Use the toolbar to zoom, navigate to today, undo/redo, or export/import JSON. Dependency arrows are drawn automatically between tasks listed in dependencies.

Task
Phase 1 — Design 60%
Requirements 100%
Wireframes 50%
Design review
Phase 2 — Build
Frontend
Backend
Integration
QA & Launch
Oct 2026
Nov 2026
Dec 2026
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
4
5
6
7
8
9
10
Phase 1 — Design 60%
Requirements 100%
Wireframes 50%
Design review
Phase 2 — Build
Frontend
Backend
Integration
QA & Launch

View-only

Pass viewOnly to disable all editing interactions. Useful for read-only dashboards or embedded previews.

Task
Discovery 100%
Delivery 20%
Handover
Sep 2026
Oct 2026
Nov 2026
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
Discovery 100%
Delivery 20%
Handover

Data model

GanttTypes.GanttTask fields: id, label, startDate / endDate (YYYY-MM-DD), optional progress (0–100), color (CSS color string), children (nested tasks), and dependencies (array of task ids).