Skip to content

Latest commit

 

History

History
170 lines (138 loc) · 4.47 KB

gantt.md

File metadata and controls

170 lines (138 loc) · 4.47 KB
Raw

Gantt charts cheatsheet

Official documentation & live editor.

Defining

Defining tasks

gantt
    Dated task: task1, 2020-01-01, 7d
    Subsequent task: task3, after task1, 7d
    Critical task: crit, task5, 2020-01-01, 8d
    Active task: active, task6, 2020-01-01, 6d
    Done task: done, task7, 2020-01-01, 5d
    Critical active task: crit, active, 2020-01-01, 6d
    Critical done task: crit, done, 2020-01-01, 6d
    Task after multiple tasks: task4, after task5 task6 task7, 4d
Loading 
gantt
    Dated task: task1, 2020-01-01, 7d
    Subsequent task: task3, after task1, 7d
    Critical task: crit, task5, 2020-01-01, 8d
    Active task: active, task6, 2020-01-01, 6d
    Done task: done, task7, 2020-01-01, 5d
    Critical active task: crit, active, 2020-01-01, 6d
    Critical done task: crit, done, 2020-01-01, 6d
    Task after multiple tasks: task4, after task5 task6 task7, 4d

Defining sections

gantt
    Task with no section: a1, 2020-01-01, 25d
    section First Section
        A Task: a2, 2020-01-01, 7d
        Another task: a3, after a2, 7d
    section Second Section
        Next task: a4, 2020-01-12, 10d
        Final task: 5d
Loading 
gantt
    Task with no section: a1, 2020-01-01, 25d
    section First Section
        A Task: a2, 2020-01-01, 7d
        Another task: a3, after a2, 7d
    section Second Section
        Next task: a4, 2020-01-12, 10d
        Final task: 5d

Defining milestones & daily marker

gantt
    todayMarker stroke-width:5px,stroke:#0f0,opacity:0.5
    %% or `todayMarker off`
    Dated Milestone: milestone, m1, 2023-01-01, 3d
    Relative Milestone: milestone, m2, after m1, 5d
    Task 1: a1, 2023-01-01, 3d
    Task 2: a2, after a1, 5d
Loading 
gantt
    todayMarker stroke-width:5px,stroke:#0f0,opacity:0.5
    %% or `todayMarker off`
    Dated Milestone: milestone, m1, 2023-01-01, 3d
    Relative Milestone: milestone, m2, after m1, 5d
    Task 1: a1, 2023-01-01, 3d
    Task 2: a2, after a1, 5d

Configuring

Configuring date format

dateFormat defines the input date format (i.e. the format datetimes are defined in).

axisFormat defines the output date format (i.e. the format shown on the x axis).

Both have different placeholder values, see official documentation.

gantt
    dateFormat HH:mm
    axisFormat %H:%M
    First Milestone: milestone, m1, 03:20, 0m
    Second Milestone: milestone, m2, 07:00, 1m
    Task 1: a1, 02:45, 2h
    Task 2: a2, after a1, 2h
Loading 
gantt
    dateFormat HH:mm
    axisFormat %H:%M
    First Milestone: milestone, m1, 03:20, 0m
    Second Milestone: milestone, m2, 07:00, 1m
    Task 1: a1, 02:45, 2h
    Task 2: a2, after a1, 2h

Configuring title

gantt
    title The Chart's Title
    Task 1: a1, 2020-01-01, 3d
    Task 2: a2, after a1, 5d
Loading 
gantt
    title The Chart's Title
    Task 1: a1, 2020-01-01, 3d
    Task 2: a2, after a1, 5d

Other

Comments

gantt
    %% Comments can go here
    section Main Section
        %% Or here
        Task 1: a1, 2020-01-01, 3d
        Task 2: a2, after a1, 5d
Loading 
gantt
    %% Comments can go here
    section Main Section
        %% Or here
        Task 1: a1, 2020-01-01, 3d
        Task 2: a2, after a1, 5d

Links

gantt
    Clickable link 1: a1, 2020-01-01, 3d
    Clickable link 2: a2, after a1, 5d
    click a1 href "https://example.com"
    click a2 href "https://example.com/2"
Loading 
gantt
    Clickable link 1: a1, 2020-01-01, 3d
    Clickable link 2: a2, after a1, 5d
    click a1 href "https://example.com"
    click a2 call "https://example.com/2"

JavaScript click events can also be triggered, see official documentation.

Styling

Styling is performed with CSS, see official documentation.