Understanding the Interface
The Gantt chart interface is divided into two main areas: the task list on the left and the timeline on the right.
Left Panel (Task List)
The left side shows task details in a grid format with these columns:
| Column | Description |
|---|---|
| WBS | Work Breakdown Structure codes (1, 1.1, 1.2, etc.) |
| Name | Task name - click to edit |
| Start Date | When the task begins |
| Duration | Task length in business days |
| % Done | Progress percentage |
| Predecessor | Dependency notation (e.g., "3FS+2d") |
| Owner | Assigned team member with avatar |
| Sub | Subcontractor assignment |
Column Visibility
Columns automatically adjust based on screen width:
| Screen Size | Hidden Columns |
|---|---|
| Small | WBS, Duration, Predecessor, Sub |
| Medium | WBS, Duration, Predecessor, Sub, % Done |
| Large | None (all columns visible) |
On larger screens, all columns are visible which may require horizontal scrolling. Right-click any column header to hide columns you don't need. Your preferences are saved automatically.
Resizing Columns
Drag the border between column headers to resize. Your column widths are saved automatically.
Right Panel (Timeline)
The right side displays the visual timeline:
| Element | Description |
|---|---|
| Task bars | Horizontal bars showing task duration |
| Progress fill | Colored portion showing % complete |
| Dependency lines | Lines connecting related tasks |
| Now marker | Vertical line showing today's date |
| Baseline bars | (When visible) Original planned dates |
Task Bars
- Bar length represents duration
- Bar position shows start/end dates
- Bar color can be customized per task
- Progress fill shows completion percentage
Dependency Lines
- Gray lines connect non-critical tasks
- Red lines indicate the critical path
- Arrows show dependency direction
- Different line patterns for different dependency types
Now Marker
A vertical line marks today's date, helping you see which tasks are past due, in progress, or upcoming.
Task Colors
Tasks can be color-coded with over 20 color options:
- Double-click a task to open the editor
- Select a color from the color picker
- Save changes
Colors help visually organize:
- Different trade work (electrical, plumbing, etc.)
- Priority levels
- Work phases
- Assigned teams
State Persistence
Your display preferences are automatically saved:
- Zoom level and view preset
- Column widths
- Scroll position
- Expanded/collapsed task hierarchy
- Baseline visibility settings
These settings persist across browser sessions.
Selecting a Schedule
Projects can have multiple schedules. Use the schedule dropdown at the top to choose:
| Option | Description |
|---|---|
| Combined Schedule | View all schedules combined (read-only) |
| Individual schedule | Select a specific schedule to view and edit |
The "Combined Schedule" view is read-only. Select an individual schedule to make edits.
Related
- Toolbar & Controls - Toolbar features and navigation
- Tasks - Working with tasks
- Keyboard Shortcuts - Navigate efficiently