> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/mermaid-js/mermaid/llms.txt
> Use this file to discover all available pages before exploring further.

# Gantt charts

> Illustrate project schedules with tasks, durations, and dependencies

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

```mermaid theme={null}
gantt
    title A Gantt Diagram
    dateFormat YYYY-MM-DD
    section Section
        A task          :a1, 2014-01-01, 30d
        Another task    :after a1, 20d
    section Another
        Task in Another :2014-01-12, 12d
        another task    :24d
```

<Note>
  When dates are "excluded", the Gantt chart extends tasks to the right, not by creating gaps inside the task.
</Note>

## Comprehensive example

```mermaid theme={null}
gantt
    dateFormat  YYYY-MM-DD
    title       Adding GANTT diagram functionality to mermaid
    excludes    weekends

    section A section
    Completed task            :done,    des1, 2014-01-06,2014-01-08
    Active task               :active,  des2, 2014-01-09, 3d
    Future task               :         des3, after des2, 5d
    Future task2              :         des4, after des3, 5d

    section Critical tasks
    Completed task in the critical line :crit, done, 2014-01-06,24h
    Implement parser and jison          :crit, done, after des1, 2d
    Create tests for parser             :crit, active, 3d
    Future task in critical line        :crit, 5d
    Create tests for renderer           :2d
    Add to mermaid                      :until isadded
    Functionality added                 :milestone, isadded, 2014-01-25, 0d

    section Documentation
    Describe gantt syntax               :active, a1, after des1, 3d
    Add gantt diagram to demo page      :after a1  , 20h
    Add another diagram to demo page    :doc1, after a1  , 48h

    section Last section
    Describe gantt syntax               :after doc1, 3d
    Add gantt diagram to demo page      :20h
    Add another diagram to demo page    :48h
```

## 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

```mermaid theme={null}
gantt
    apple :a, 2017-07-20, 1w
    banana :crit, b, 2017-07-23, 1d
    cherry :active, c, after b a, 1d
    kiwi   :d, 2017-07-20, until b c
```

<Accordion title="Metadata syntax examples">
  | Syntax                                       | Start date          | End date               |
  | -------------------------------------------- | ------------------- | ---------------------- |
  | `<taskID>, <startDate>, <endDate>`           | Specified date      | Specified date         |
  | `<taskID>, <startDate>, <length>`            | Specified date      | Start + length         |
  | `<taskID>, after <otherTaskId>, <endDate>`   | After other task    | Specified date         |
  | `<taskID>, after <otherTaskId>, <length>`    | After other task    | Start + length         |
  | `<taskID>, <startDate>, until <otherTaskId>` | Specified date      | When other task starts |
  | `<endDate>`                                  | After previous task | Specified date         |
  | `<length>`                                   | After previous task | Start + length         |
</Accordion>

## 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:

```mermaid theme={null}
gantt
    title A Gantt Diagram Excluding Fri - Sat weekends
    dateFormat YYYY-MM-DD
    excludes weekends
    weekend friday
    section Section
        A task          :a1, 2024-01-01, 30d
        Another task    :after a1, 20d
```

## 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:

```mermaid theme={null}
gantt
    dateFormat HH:mm
    axisFormat %H:%M
    Initial milestone : milestone, m1, 17:49, 2m
    Task A : 10m
    Task B : 5m
    Final milestone : milestone, m2, 18:08, 4m
```

## Vertical markers

Add vertical reference lines:

```mermaid theme={null}
gantt
    dateFormat HH:mm
    axisFormat %H:%M
    Initial vert : vert, v1, 17:30, 2m
    Task A : 3m
    Task B : 8m
    Final vert : vert, v2, 17:58, 4m
```

## Date formats

### Input date format

Define how dates are parsed:

```
dateFormat YYYY-MM-DD
```

<Accordion title="Format options">
  | Input      | Example      | Description     |
  | ---------- | ------------ | --------------- |
  | `YYYY`     | 2014         | 4 digit year    |
  | `YY`       | 14           | 2 digit year    |
  | `Q`        | 1..4         | Quarter of year |
  | `M MM`     | 1..12        | Month number    |
  | `MMM MMMM` | January..Dec | Month name      |
  | `D DD`     | 1..31        | Day of month    |
  | `H HH`     | 0..23        | 24 hour time    |
  | `h hh`     | 1..12        | 12 hour time    |
  | `m mm`     | 0..59        | Minutes         |
  | `s ss`     | 0..59        | Seconds         |
</Accordion>

### Output axis format

Define how dates are displayed:

```
axisFormat %Y-%m-%d
```

<Accordion title="Axis format options">
  | Format | Definition               |
  | ------ | ------------------------ |
  | `%Y`   | Year with century        |
  | `%y`   | Year without century     |
  | `%m`   | Month as decimal         |
  | `%b`   | Abbreviated month name   |
  | `%B`   | Full month name          |
  | `%d`   | Zero-padded day of month |
  | `%H`   | Hour (24-hour clock)     |
  | `%I`   | Hour (12-hour clock)     |
  | `%M`   | Minute as decimal        |
  | `%S`   | Second as decimal        |
</Accordion>

### Axis ticks (v10.3.0+)

Customize tick intervals:

```mermaid theme={null}
gantt
  tickInterval 1week
  weekday monday
```

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

## Compact mode

Display multiple tasks in the same row:

```mermaid theme={null}
---
displayMode: compact
---
gantt
    title A Gantt Diagram
    dateFormat  YYYY-MM-DD

    section Section
    A task           :a1, 2014-01-01, 30d
    Another task     :a2, 2014-01-20, 25d
    Another one      :a3, 2014-02-10, 20d
```

## Interaction

Bind click events to tasks:

```
click taskId call callback(arguments)
click taskId href URL
```

<Note>
  This functionality is disabled when using `securityLevel='strict'`.
</Note>

## 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 `%%`:

```mermaid theme={null}
gantt
    title A Gantt Diagram
    %% This is a comment
    dateFormat YYYY-MM-DD
    section Section
        A task          :a1, 2014-01-01, 30d
        Another task    :after a1, 20d
```