How to Create a Gantt Chart
Data Format
One row per task.
| Task | Start | End | Segment Label |
|---|---|---|---|
| Discovery | 2026-01-05 | 2026-01-16 | Stakeholder interviews |
| Design | 2026-01-12 | 2026-02-06 | Wireframes + review |
| Development | 2026-02-02 | 2026-03-20 | |
| QA & Testing | 2026-03-09 | 2026-03-27 | Regression pass |
- Task (required): the task name, shown in the left-hand column.
- Start, End (required, dates): the task bar spans from Start to End. An End date before Start is clamped to Start.
- Segment Label (optional): short text shown inside the bar itself, distinct from the task name. Left blank, the bar shows no inside label rather than falling back to the task name. Hidden automatically if it doesn't fit the bar's width.
The calendar header, row heights, and the overall date range all recalculate from your data, there's no separate "project start/end" setting to keep in sync.
Chart Elements
Every part of the chart maps to a section in the style panel.
Bars
Each task's date range.
- Fill - bar color, one shared color across all bars (no per-row override built into the default template, though any bar can still be recolored individually by clicking it).
- Stroke / Stroke Width - bar border.
- Dash - Solid, Dashed, or Dotted.
Bar thickness (as a percentage of the row) isn't an exposed style control, it's fixed by the template.
Task Labels
The left-hand column of task names. Column width is calculated from the longest label, up to a cap, so a very long task name won't take over the chart.
- Color - text color.
- Font / Font Size - text styling.
- Rotation - rotates the task labels.
Labels
The Segment Label text inside each bar, when set.
- Color - text color.
- Font / Font Size - text styling.
Date Labels
The small date-range text auto-generated below each bar (e.g. "Jan 5 - Jan 16").
- Color - text color.
- Font / Font Size - text styling.
Row
Click directly on a task row's background (not the bar) to style it.
- Fill - row background color, transparent by default. Set on one row to highlight it, or on the group to zebra-stripe every row.
- Stroke / Stroke Width - row border.
- Separator below - toggles the divider line under that specific row.
Header
Click the calendar header block at the top to style it.
- Fill - background color behind the whole header block.
- Year / Quarter / Month / Week / Day - independent toggles for which calendar tiers show at all. Year, Month, and Week are on by default; Quarter and Day are off. Turning every tier off still leaves an empty header band, it never collapses to zero height.
The date-band text itself (e.g. "Jan", "Feb", the "Task" corner label) is a separate "Headers" section:
- Color - text color, shared by every tier and the corner label.
- Font / Font Size - text styling.
Visibility
Beyond the sections above, the Bar, Task Labels, Labels, Date Labels, Outer Border, Row Separators, Header Separators, and Column Separators can each be shown or hidden independently from the Visibility list at the top of the panel.