Components Chart
gantt
Progression Timeline Series
Gantt chart — task bars across a date axis.
Use for project plans with overlapping or staggered tasks. Each task is a bar on the time axis; bars can span multiple periods and carry status tints.
When to use
- Overlapping work across lanes. When tasks run in parallel across multiple workstreams and the audience needs to see who is busy when. The lane-stacked bars make concurrency visible at a glance.
- Span is the story. Each bar's length encodes its duration. Use gantt when start dates, end dates, and overlap are what you want the audience to remember.
- Status pills add a second channel. Tint bars with
done/live/at-risk/blockedto layer health onto schedule. The plan reads as both 'when' and 'how it's going' in one chart. Since the bars carry no status text, a swatch+label status key is emitted automatically below the chart for the statuses present.
When not to use
- Single workstream. One lane of bars is a timeline, not a gantt. Use
timelineorlist-stepswhen there is no parallel work to coordinate. - More than five lanes. Past five workstreams the bars compress and the labels crowd. Group lanes (collapse 'SDK' subdomains into 'SDK') or split into two slides.
- No spans. If tasks are point-in-time milestones rather than durations, use
timelineorroadmap milestones. gantt earns its chrome only when bars have meaningful length.
Slots
| Slot | Selector | Required | Description |
|---|---|---|---|
title | h2 | yes | Slide heading naming the plan. |
tasks | ul > li | yes | Outer li per workstream lane; nested bullets per task. Each task carries inline-code tokens for span (Q1 → Q2, or an en-dash / -> delimiter) and an optional status pill; the two pills may appear in any order. Status vocabulary: on-track / done / live / at-risk / warn / blocked / fail / deferred / pilot / decision. The range axis recognises quarters (Q1–Q4) or months (Jan–Dec); other vocabularies fall back to a four-column axis with no ticks. |
Anatomy
┌─────────────────────────────────────────┐
│ header │
│ Gantt chart heading. │
│ │
│ Task A ▓▓▓▓▓▓▓▓▓▓▓▓▓▓░░░░░░ │
│ Task B ▓▓▓▓▓▓▓▓░░░░░░░░░░░░ │
│ Task C ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓░░ │
│ Task D ▓▓▓▓▓▓░░░░░░░░░░░░░░ │
│ │
│ footer 1/19 │
└─────────────────────────────────────────┘