Gantt Chart

Gantt charts show project schedules with tasks plotted on a timeline. Use them for project planning, sprint timelines, or release coordination.

Minimal Example

{
  "type": "gantt",
  "sections": [
    {
      "label": "Phase 1",
      "tasks": [
        { "id": "t1", "label": "Research", "start": "2024-01-01", "end": "2024-01-14" },
        { "id": "t2", "label": "Design", "start": "2024-01-15", "end": "2024-01-28" }
      ]
    }
  ]
}

Full Example

{
  "type": "gantt",
  "title": "Product Launch Plan",
  "sections": [
    {
      "label": "Planning",
      "tasks": [
        { "id": "req", "label": "Requirements gathering", "start": "2024-01-01", "end": "2024-01-14" },
        { "id": "spec", "label": "Technical spec", "start": "2024-01-08", "end": "2024-01-21" }
      ]
    },
    {
      "label": "Development",
      "tasks": [
        { "id": "backend", "label": "Backend API", "start": "2024-01-22", "end": "2024-03-01" },
        { "id": "frontend", "label": "Frontend UI", "start": "2024-02-01", "end": "2024-03-15" },
        { "id": "integration", "label": "Integration", "start": "2024-03-01", "end": "2024-03-15" }
      ]
    },
    {
      "label": "Launch",
      "tasks": [
        { "id": "qa", "label": "QA Testing", "start": "2024-03-16", "end": "2024-03-31" },
        { "id": "beta", "label": "Beta release", "start": "2024-04-01", "end": "2024-04-01", "milestone": true },
        { "id": "ga", "label": "GA release", "start": "2024-04-15", "end": "2024-04-15", "milestone": true }
      ]
    }
  ]
}

Top-Level Fields

Field	Required	Description
`type`	Yes	Must be `"gantt"`
`title`	No	Chart title
`sections`	Yes	Array of section objects

Sections

Sections group related tasks under a heading.

Field	Required	Description
`label`	Yes	Section heading
`tasks`	Yes	Array of task objects

Tasks

Each task is a bar on the timeline.

Field	Required	Description
`id`	Yes	Unique identifier
`label`	Yes	Task name
`start`	Yes	Start date (`"YYYY-MM-DD"` format)
`end`	Yes	End date (`"YYYY-MM-DD"` format)
`milestone`	No	`true` to display as a milestone marker instead of a bar

Milestones

Set start and end to the same date with "milestone": true:

{ "id": "launch", "label": "Launch day", "start": "2024-04-01", "end": "2024-04-01", "milestone": true }

More Examples

Sprint Timeline

{
  "type": "gantt",
  "title": "Sprint 14",
  "sections": [
    {
      "label": "Backend",
      "tasks": [
        { "id": "api", "label": "Search API", "start": "2024-03-04", "end": "2024-03-08" },
        { "id": "index", "label": "Build search index", "start": "2024-03-06", "end": "2024-03-11" },
        { "id": "cache", "label": "Add caching layer", "start": "2024-03-11", "end": "2024-03-13" }
      ]
    },
    {
      "label": "Frontend",
      "tasks": [
        { "id": "ui", "label": "Search UI component", "start": "2024-03-04", "end": "2024-03-10" },
        { "id": "filters", "label": "Filter controls", "start": "2024-03-10", "end": "2024-03-13" }
      ]
    },
    {
      "label": "QA",
      "tasks": [
        { "id": "test", "label": "Integration tests", "start": "2024-03-13", "end": "2024-03-15" },
        { "id": "ship", "label": "Ship to production", "start": "2024-03-15", "end": "2024-03-15", "milestone": true }
      ]
    }
  ]
}

Marketing Campaign

{
  "type": "gantt",
  "title": "Q2 Marketing Campaign",
  "sections": [
    {
      "label": "Content",
      "tasks": [
        { "id": "blog", "label": "Write blog posts", "start": "2024-04-01", "end": "2024-04-14" },
        { "id": "video", "label": "Record demo video", "start": "2024-04-08", "end": "2024-04-18" }
      ]
    },
    {
      "label": "Distribution",
      "tasks": [
        { "id": "social", "label": "Social media campaign", "start": "2024-04-15", "end": "2024-05-15" },
        { "id": "email", "label": "Email sequence", "start": "2024-04-20", "end": "2024-05-10" },
        { "id": "launch", "label": "Campaign launch", "start": "2024-04-15", "end": "2024-04-15", "milestone": true }
      ]
    }
  ]
}

On this page