Skip to main content
A Gantt chart is a type of bar chart that illustrates a project schedule. It shows the start and finish dates of terminal elements and summary elements of a project.

​
Basic example

When dates are “excluded”, the Gantt chart extends tasks to the right, not by creating gaps inside the task.

​
Comprehensive example

​
Task metadata

Tasks use colon : to separate title from metadata. Metadata items are comma-separated.

​
Tags

Optional tags (must be specified first):
  • active - Currently active task
  • done - Completed task
  • crit - Critical task
  • milestone - Milestone marker

​
Task timing

SyntaxStart dateEnd date
<taskID>, <startDate>, <endDate>Specified dateSpecified date
<taskID>, <startDate>, <length>Specified dateStart + length
<taskID>, after <otherTaskId>, <endDate>After other taskSpecified date
<taskID>, after <otherTaskId>, <length>After other taskStart + length
<taskID>, <startDate>, until <otherTaskId>Specified dateWhen other task starts
<endDate>After previous taskSpecified date
<length>After previous taskStart + length

​
Title

Add an optional title: 
gantt
    title A Gantt Diagram

​
Excludes

Exclude specific dates, days, or weekends: 
excludes weekends
excludes 2024-12-25
excludes sunday

​
Weekend configuration (v11.0.0+)

Configure weekend start day:

​
Sections

Divide the chart into sections: 
section Development
    Task 1 :2014-01-01, 30d
    Task 2 :20d
section Documentation
    Task 3 :2014-01-12, 12d

​
Milestones

Milestones represent a single instant in time:

​
Vertical markers

Add vertical reference lines:

​
Date formats

​
Input date format

Define how dates are parsed: 
dateFormat YYYY-MM-DD
InputExampleDescription
YYYY20144 digit year
YY142 digit year
Q1..4Quarter of year
M MM1..12Month number
MMM MMMMJanuary..DecMonth name
D DD1..31Day of month
H HH0..2324 hour time
h hh1..1212 hour time
m mm0..59Minutes
s ss0..59Seconds

​
Output axis format

Define how dates are displayed: 
axisFormat %Y-%m-%d
FormatDefinition
%YYear with century
%yYear without century
%mMonth as decimal
%bAbbreviated month name
%BFull month name
%dZero-padded day of month
%HHour (24-hour clock)
%IHour (12-hour clock)
%MMinute as decimal
%SSecond as decimal

​
Axis ticks (v10.3.0+)

Customize tick intervals: Pattern: /^([1-9][0-9]*)(millisecond|second|minute|hour|day|week|month)$/

​
Compact mode

Display multiple tasks in the same row:

​
Interaction

Bind click events to tasks: 
click taskId call callback(arguments)
click taskId href URL
This functionality is disabled when using securityLevel='strict'.

​
Today marker

Style or hide the current date marker: 
todayMarker stroke-width:5px,stroke:#0f0,opacity:0.5
To hide: 
todayMarker off

​
Comments

Add comments with %%:

Build docs developers (and LLMs) love

Get started for freeTalk to us