# Gantt Chart

## Overview

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.

## Configure

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 <https://mermaid.js.org/syntax/gantt.html>
* **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**


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.labii.com/widgets/section-widgets/diagram/gantt-chart.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
