GanttChart
CSS-based Gantt chart for displaying project timelines. Uses children content for row definitions.
Default Timeline
Basic project timeline with four phases showing overlapping task durations.
Task
Week 1Week 2Week 3Week 4
Design,0,30,#c9952c;Development,20,70,#17a2b8;Testing,60,90,#28a745;Launch,85,100,#dc3545
Sprint Timeline
Agile sprint with six overlapping phases from research through deployment.
Task
Week 1Week 2Week 3Week 4
Research,0,20,#c9952c;Wireframes,15,35,#17a2b8;Frontend,30,65,#28a745;Backend,25,60,#6c757d;QA,55,80,#dc3545;Deploy,75,100,#c9952c
Product Launch
End-to-end product launch timeline from concept to market release.
Task
Week 1Week 2Week 3Week 4
Concept,0,15,#8b5cf6;Design,10,35,#c9952c;Development,30,70,#17a2b8;Beta,65,85,#28a745;Launch,80,100,#dc3545
Marketing Campaign
Marketing campaign phases with creative, media, and analysis tracks.
Task
Week 1Week 2Week 3Week 4
Planning,0,20,#c9952c;Creative,15,45,#8b5cf6;Production,40,65,#17a2b8;Media Buy,55,80,#28a745;Analysis,75,100,#f59e0b
Usage
Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | content | - | Row definitions as "label,start%,end%,color" separated by semicolons |