Gantt Chart

Gantt chart illustrates a project schedule and the amount of time it would take for any one project to finish.


A Gantt chart is a type of bar chart, first developed by Karol Adamiecki in 1896, and independently by Henry Gantt in the 1910s, that illustrates a project schedule and the amount of time it would take for any one project to finish. Gantt charts illustrate number of days between the start and finish dates of the terminal elements and summary elements of a project.

Manage steps

In the Gann chart, each box represents a step. To manage a list of steps, click Manage steps or Add step.

Step fields

A step contains the following fields:

  • Name - Name of the step, use letters and number only

  • Type - type of step

    • Task

    • Use Section to divide the chart into various sections, for example to separate different parts of a project like development and documentation.

    • Use Milestones to add milestone to the diagrams. Milestones differ from tasks as they represent a single instant in time.

  • Parent - the parent of the step.

  • Start - Skip if parent is provided.

  • End - Only valid when Start date is provided. Skip if Duration is provided.

  • Duration - Use the following pattern: ([0-9]*)(d|h|m)

  • Status - The status of the task.

Add step

Click Add step button to add a new step. Click Manage steps first if you don't see the Add step button.

Edit step

Click Edit button of a step to edit a step.

Delete step

Click Delete button of a step to remove a step.

Move step upward or downward

Drag and drop the move icon to move a step upward or downward.

Gantt chart

To view the Gann chart, click Show gantt.

Build gantt

You can build a gantt chart from the steps by clicking the Build gantt button. If you have updated the steps, you can also click the button to rebuild the diagram.


To update the settings, click Configure.

  • Title - Title of the Gantt Diagram.

  • Axis Format - The default output date format is YYYY-MM-DD. You can define your custom axisFormat, like 2020-Q1 for the first quarter of the year 2020. Learn more at

  • Tick Interval - The default output ticks are auto. You can custom your tickInterval, like 1day or 1week. The pattern is: /^([1-9][0-9]*)(minute|hour|day|week|month)$/

  • Excludes - Excludes accepts specific dates in YYYY-MM-DD format, days of the week ('sunday') or 'weekends', but not the word 'weekdays'.

  • Should display today marker - You can hide the marker for the current date.

  • Theme

Last updated