# Gantt Chart

## Specs

| Label                     | Value                         |
| ------------------------- | ----------------------------- |
| **Version**               | 0.0.0 (updated on 2023-08-12) |
| **Developer**             | Labii Inc.                    |
| **Type**                  | Section                       |
| **Support Configuration** | Yes                           |

## Overview

The Gantt Chart section widget helps laboratory teams turn project steps into a visual schedule. Each step can be defined as a task, section, or milestone, then rendered as a timeline that shows start dates, end dates, duration, status, and grouping. Use this widget to coordinate experiments, manage assay development, plan validation work, document project phases, and keep research timelines visible inside the Labii record where the work is being tracked.

## Use Cases

* **Experiment Planning**: Map preparation, execution, incubation, analysis, and reporting steps for multi-day or multi-week experiments.
* **Project Management**: Track research phases, dependencies, milestones, and expected completion windows for a project record.
* **Validation and Compliance**: Document planned qualification, verification, review, and approval activities in a structured timeline.
* **Team Coordination**: Share schedule expectations with collaborators by keeping the chart directly inside the relevant record.
* **Milestone Tracking**: Highlight key decision points, review dates, submission deadlines, or deliverables as milestone entries.

## Interface

### Read-only View

The read-only view displays the generated Gantt chart as a visual timeline. Users can review each task bar, milestone, section heading, status, and date range without changing the underlying step data.

* **Timeline Display**: Shows the project schedule as horizontal bars arranged by step order.
* **Sections and Grouping**: Displays section-type steps as visual dividers for phases such as development, documentation, testing, and review.
* **Milestones**: Displays milestone-type steps as single points in time rather than duration-based bars.
* **Today Marker**: Shows the current date marker when enabled in the configuration.
* **Configured Axis**: Uses the configured axis format, tick interval, excluded dates, and theme.

<figure><img src="/files/IeFFxfTk53klAPz5vqEk" alt=""><figcaption></figcaption></figure>

### Edit View

The edit view provides tools to manage the list of steps used to build the chart. Each step becomes one row in the schedule, and the widget uses those rows to generate the final Gantt diagram.

* **Manage Steps**: Open the step management table from **Manage steps**.
* **Add Step**: Create a new schedule step from **Add step**.
* **Edit Step**: Update an existing task, section, or milestone from the step list.
* **Delete Step**: Remove a step that no longer belongs in the project schedule.
* **Reorder Steps**: Drag the move icon to place steps in the desired sequence.
* **Build Gantt**: Generate or rebuild the visual chart from the current step list.

<figure><img src="/files/wAE0FKX3RO1rajenY2bk" alt=""><figcaption></figcaption></figure>

## Configuration

### Initial Setup

{% stepper %}
{% step %}
Add the **Gantt Chart** widget to the section where you want to document the project schedule.
{% endstep %}

{% step %}
Click **Configure** to define chart-level settings such as the title, axis format, tick interval, excluded dates, today marker, and theme.
{% endstep %}

{% step %}
Click **Manage steps** or **Add step** to begin entering the project schedule.
{% endstep %}

{% step %}
After entering the required steps, click **Build gantt** to generate the chart.
{% endstep %}
{% endstepper %}

### Required Settings

* **Title**: Enter the title displayed on the Gantt diagram.

### Optional Settings

* **Axis Format**: Define how dates appear on the timeline axis. The default output date format is `YYYY-MM-DD`. Custom formats such as `2020-Q1` are supported through Mermaid Gantt syntax.
* **Tick Interval**: Control the spacing between timeline ticks. The default is automatic. Custom values must match the pattern `^[1-9][0-9]*(minute|hour|day|week|month)$`, such as `1day` or `1week`.
* **Excludes**: Exclude specific dates in `YYYY-MM-DD` format, days of the week such as `sunday`, or `weekends`. The value `weekdays` is not supported.
* **Should display today marker**: Show or hide the marker for the current date.
* **Theme**: Select the visual theme used to render the Gantt diagram.

{% hint style="info" %}
The Gantt Chart widget uses Mermaid Gantt syntax behind the scenes, so Mermaid date and interval rules apply to advanced formatting options.
{% endhint %}

### Step Fields

Each step contains the following fields:

* **Name**: Enter the step name. Use letters and numbers only.
* **Type**: Select the type of step:
  * **Task**: Use for work that spans a defined period.
  * **Section**: Use to divide the chart into project phases, such as development and documentation.
  * **Milestone**: Use for a single point in time, such as a review date or submission deadline.
* **Parent**: Select the parent step when the schedule item belongs under another step or phase.
* **Start**: Enter the start date. Skip this field when a parent is provided and the date should be derived from the parent context.
* **End**: Enter the end date when a start date is provided. Skip this field when duration is provided instead.
* **Duration**: Enter the task duration using the pattern `([0-9]*)(d|h|m)`, such as `5d`, `12h`, or `30m`.
* **Status**: Select the current status of the task.

{% hint style="warning" %}
For each task, provide either an end date or a duration. Providing both can make the schedule harder to maintain and may produce unexpected timeline output.
{% endhint %}

## Additional Functions

### Add a Step

{% stepper %}
{% step %}
Click **Manage steps** to open the step list.
{% endstep %}

{% step %}
Click **Add step**.
{% endstep %}

{% step %}
Enter the step name, type, date information, duration, parent, and status as needed.
{% endstep %}

{% step %}
Save the step, then click **Build gantt** to update the chart.
{% endstep %}
{% endstepper %}

### Edit a Step

Click **Edit** for a step to update its name, type, parent, dates, duration, or status. Rebuild the Gantt chart after editing steps so the rendered timeline reflects the latest schedule.

### Delete a Step

Click **Delete** for a step to remove it from the schedule. Review any child steps or related timeline entries before deleting a parent or section step.

### Reorder Steps

Drag and drop the move icon to move a step upward or downward. The order in the step list controls the order of items in the rendered Gantt chart.

### Show or Rebuild the Chart

Click **Show gantt** to view the rendered chart. Click **Build gantt** after adding, editing, deleting, or reordering steps to regenerate the diagram from the current step data.

## Best Practices

* Use section steps to group large projects into clear phases such as planning, execution, analysis, review, and reporting.
* Use milestones for important dates that do not have duration, including review meetings, delivery dates, approval points, and regulatory submissions.
* Keep task names short and specific so the chart remains easy to scan.
* Use duration for relative task planning and start/end dates when the schedule must align to calendar dates.
* Exclude weekends or non-working days when the timeline should reflect business-day scheduling.
* Rebuild the chart after every major schedule update to confirm that the visual timeline matches the step list.

{% hint style="success" %}
For laboratory projects with many moving parts, keep the Gantt Chart in the same record as the project summary, protocol, or study plan so timeline decisions stay connected to the scientific context.
{% endhint %}

## Related Widgets

* [**Mermaid**](/widgets/section-widgets/diagram/mermaid.md): Create custom diagrams, including advanced Gantt charts, directly from Mermaid syntax.
* [**Steps**](/widgets/section-widgets/process-management/steps.md): Track procedural steps when the primary need is task execution rather than timeline visualization.
* [**Stage Flowchart**](/widgets/section-widgets/diagram/stage-flowchart.md): Visualize status progression through predefined stages.
* [**Relation Flowchart**](/widgets/section-widgets/diagram/relation-flowchart.md): Visualize relationships between records connected through ForeignKey or ForeignKeys columns.

## References

* [Mermaid Gantt Diagram Syntax](https://mermaid.js.org/syntax/gantt.html) - Syntax reference for Gantt-specific formatting, axis options, exclusions, and timeline behavior.
* [Mermaid Documentation](https://mermaid.js.org/) - General documentation for Mermaid diagrams and themes.


---

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