Gantt Chart

Build project schedules as Gantt charts to plan laboratory work, track timelines, organize milestones, and visualize task duration.

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.

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.

Configuration

Initial Setup

1

Add the Gantt Chart widget to the section where you want to document the project schedule.

2

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

3

Click Manage steps or Add step to begin entering the project schedule.

4

After entering the required steps, click Build gantt to generate the chart.

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.

The Gantt Chart widget uses Mermaid Gantt syntax behind the scenes, so Mermaid date and interval rules apply to advanced formatting options.

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.

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.

Additional Functions

Add a Step

1

Click Manage steps to open the step list.

2

Click Add step.

3

Enter the step name, type, date information, duration, parent, and status as needed.

4

Save the step, then click Build gantt to update the chart.

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.

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.

Related Widgets

• Mermaid: Create custom diagrams, including advanced Gantt charts, directly from Mermaid syntax.

• Steps: Track procedural steps when the primary need is task execution rather than timeline visualization.

• Stage Flowchart: Visualize status progression through predefined stages.

• Relation Flowchart: Visualize relationships between records connected through ForeignKey or ForeignKeys columns.

References

• Mermaid Gantt Diagram Syntax - Syntax reference for Gantt-specific formatting, axis options, exclusions, and timeline behavior.

• Mermaid Documentation - General documentation for Mermaid diagrams and themes.