← DocsMeridian
Recipe

Gantt Chart

Horizontal bar chart for visualizing timelines, schedules, and project roadmaps.

Preview
Research
Design
Development
Testing
Week 1Week 2Week 3Week 4

Ingredients

Timeline data
Array of tasks with start/end dates or percentages
Color palette
Distinct hues per category or status
Grid system
Time axis with consistent interval markers
Tooltip layer
Hover detail for task name, duration, and owner

Steps

  1. 1Normalize all task durations to a shared percentage scale (0–100).
  2. 2Render a horizontal track per task with a positioned bar using left/width percentages.
  3. 3Draw vertical gridlines at regular intervals (weeks, sprints, quarters).
  4. 4Layer dependency arrows between bars where tasks are sequential.
  5. 5Add a today marker line and highlight overdue bars in a warning color.

Variants

Grouped rowsMilestone diamondsProgress fillZoomable timelineDark mode
← HeatmapSankey →