Gantt Chart

Description

A Gantt chart displays tasks, events, or activities as horizontal bars along a timeline, where each bar’s left edge marks the start time, the right edge marks the end time, and the bar’s length represents duration. Tasks are stacked vertically, typically grouped by category, phase, or resource, creating a visual schedule that shows what happens when, how long it takes, and where activities overlap.

The chart was developed by Henry Gantt around 1910 for managing industrial production schedules and has since become the dominant visual tool for project management. Its strength lies in making temporal relationships immediately visible: parallel tasks, sequential dependencies, milestones, and bottlenecks all emerge from the spatial arrangement of bars on the timeline. The horizontal time axis provides a common scale that makes duration comparison intuitive and cross-task timing easy to read.

Modern Gantt charts often incorporate dependency arrows (showing which tasks must complete before others can start), progress indicators (showing how much of a task is complete), milestones (diamond markers for key dates), and resource allocation (coloring bars by assigned person or team). Interactive versions support drag-to-reschedule, zoom across time scales, and collapsible task hierarchies, making them powerful planning and monitoring tools.

When to Use

• Visualizing project schedules with task durations, dependencies, and milestones
• Showing when events or activities occurred along a historical timeline
• Comparing the duration and timing of processes across categories (manufacturing steps, legislative sessions, clinical trials)
• Planning and monitoring work where understanding overlap and sequencing is critical
• Displaying resource allocation across time (who is working on what, and when)

When NOT to Use

• For continuous time series data — use a line graph or area graph
• When there are hundreds of tasks and the chart becomes an unreadable wall of bars — aggregate or filter first
• When the primary question is about quantities rather than timing — use a bar chart
• When dependencies are complex and cyclic — use a network-based PERT chart or critical path diagram instead
• For comparing values at a single point in time — use a bar chart or dot plot

Anatomy

• Task bars: Horizontal bars, one per task or event, spanning from start time to end time. Width encodes duration.
• Task labels: Names or descriptions on the left side (or inside) each bar, identifying each activity.
• Time axis: The horizontal axis showing dates, weeks, months, or other time units.
• Task grouping: Tasks organized vertically by phase, category, or resource, often with group headers or indentation.
• Dependency arrows: Lines connecting the end of one task to the start of another, showing prerequisite relationships.
• Milestones: Diamond or special markers at key dates (deadlines, reviews, deliverables).
• Progress fill: A darker or differently colored fill within each bar showing the percentage of completion.
• Today line: A vertical line marking the current date for schedule tracking.

Variations

• Simple Gantt: Tasks displayed as plain bars without dependencies or progress, used for overviews.
• Gantt with dependencies: Arrows connect predecessor tasks to successors, showing the critical path.
• Resource Gantt: Rows represent resources (people, machines) rather than tasks; bars show what each resource is working on.
• Milestone chart: Only milestones are shown (no duration bars), useful for high-level schedule communication.
• Waterfall schedule: A Gantt chart where tasks are strictly sequential, forming a staircase pattern.
• Multi-level Gantt: Tasks are organized into a collapsible hierarchy (project > phase > task > subtask) for managing complex projects.

Code Reference

// Observable Plot - Gantt-style timeline
Plot.plot({
  marks: [
    Plot.barX(tasks, {
      x1: "start",
      x2: "end",
      y: "task",
      fill: "phase",
      tip: true,
      rx: 4
    }),
    Plot.ruleX([new Date("2025-01-01")], {
      stroke: "red",
      strokeDasharray: "4,4"
    })
  ],
  x: { type: "time", label: "Date" },
  y: { label: null },
  color: { legend: true, label: "Phase" },
  marginLeft: 150
})