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) |
:::tip Managing Columns 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