Gantt Chart
Interactive Gantt chart for project timelines with drag, resize, and dependency visuals.
Project Roadmap
Task
01
Mon
02
Tue
03
Wed
04
Thu
05
Fri
06
Sat
07
Sun
08
Mon
09
Tue
10
Wed
11
Thu
12
Fri
13
Sat
14
Sun
15
Mon
16
Tue
17
Wed
18
Thu
19
Fri
20
Sat
21
Sun
22
Mon
23
Tue
24
Wed
25
Thu
26
Fri
27
Sat
28
Sun
29
Mon
30
Tue
31
Wed
01
Thu
02
Fri
03
Sat
04
Sun
05
Mon
06
Tue
07
Wed
08
Thu
09
Fri
Strategy & Discovery
Experience Design
Implementation Sprint
QA & Launch Prep
tasks = [
%{
id: "task-1",
name: "Kickoff",
start_date: ~D[2024-01-02],
end_date: ~D[2024-01-05],
progress: 100
},
%{
id: "task-2",
name: "Design Sprint",
start_date: ~D[2024-01-06],
end_date: ~D[2024-01-12],
dependencies: ["task-1"]
}
]
<.gantt
id="product-roadmap"
tasks={@tasks}
start_date={~D[2024-01-01]}
end_date={~D[2024-01-31]}
/>
Highlights
- Auto-calculated date range based on tasks with optional overrides.
- Drag and resize hooks emit events for task updates.
- Dependency lines with arrowheads for critical path visualization.
- Slot support for custom task labels and interactive row content.
- Configurable row and bar sizing for dense timelines.