Forum7189: Gantt Chart plug-in

Title: Gantt Chart plug-in

The TeamPage Gantt Chart plug-in adds an interactive Gantt chart view to Projects and Milestones in TeamPage. It displays tasks as horizontal bars on a time axis, letting you see your team’s schedule at a glance, track progress, and — when permitted — reschedule tasks by dragging their bars.

The chart is accessible through the Chart tab that appears on each Project and Milestone page. A site-wide view (showing tasks from all projects) is also available as a server-level tab.

Download

To visitor: You need to log in to this support site to see the link to download the plug-in.

Key Features

Feature	Description
Task bars	Each task is drawn as a colored bar spanning its start and due dates.
Priority colors	Bars and left-panel icons are tinted by task priority.
Milestone markers	Milestone due dates appear as vertical lines across the chart.
Tree structure	Parent tasks expand and collapse to reveal child tasks, with smooth animation.
Zoom levels	Switch between Hours, Days, Weeks, and Months views.
Progress fill	Bars optionally show a fill based on estimated hours or completed child tasks.
Hover tooltip	Hovering over a bar shows a summary card with dates, assignees, priority, and more.
Bar drag	Authorized users can drag bars left/right to reschedule tasks, or drag handles to change the start or due date independently.
Text filter	Type in the filter box to instantly narrow rows by title.
Flexible left panel	The left panel can be resized by dragging the divider; all columns scroll horizontally when the panel is narrow.
Automatic ID column	The Entry ID column width adjusts automatically to fit the longest ID in the current data set.
Fullscreen mode	Open the chart in a new browser tab for a larger workspace.

The Chart Interface

Toolbar

The toolbar runs along the top of the chart. On the left side are navigation controls; on the right side are the filter input and the settings button.

Control	Action
Scroll to today (calendar icon)	Pans the chart so today’s date is centred in view.
Extend to past (double-left arrow)	Adds columns to the left edge of the grid.
Extend to future (double-right arrow)	Adds columns to the right edge of the grid.
Zoom in (magnifier +)	Switches to a finer time scale (e.g. Weeks → Days).
Zoom out (magnifier −)	Switches to a coarser time scale (e.g. Days → Weeks).
Fullscreen (expand icon)	Opens the chart in a new browser tab.
Filter box	Filters visible rows by task title (case-insensitive, updates live).
Settings (gear icon)	Opens the in-chart settings panel.

Left Panel

Each row in the left panel shows:

Entry ID — a clickable link to the task entry (column width auto-fits to the longest ID in the data set)
Priority icon — a small colored circle indicating priority (can be hidden)
Task title — a clickable link, indented to reflect the task hierarchy; parent tasks show a caret icon to collapse or expand their children
Project (optional) — the project the task belongs to, shown as a link
Milestone (optional) — the milestone the task belongs to, shown as a link
Assignee avatars (optional) — up to three profile photos; a badge (e.g. +2) appears when more assignees are present

The left panel can be:

Resized by dragging the vertical divider between the panel and the bar area
Panned horizontally by holding Shift and scrolling the mouse wheel while the cursor is over the left panel

Chart Area

The chart area to the right of the left panel contains:

Time header — two rows; the top row shows year/month labels that stay visible as you scroll horizontally, and the bottom row shows individual day/week/month/hour cells
Weekend shading — Saturdays and Sundays are lightly shaded in Days and Hours views
Today column — today’s date is highlighted with a distinct background
Task bars — horizontal bars whose left edge is the start date and right edge is the due date; the bar color reflects the task’s priority
Milestone lines — vertical lines marking milestone due dates, labeled with the milestone name in the header
Progress fill — when enabled, a lighter fill inside the bar shows percentage complete

To navigate the chart area:

Scroll horizontally using the mouse wheel, or click and drag on any empty area of the chart
Scroll vertically by scrolling anywhere in the chart area

Hover Tooltip

Hovering over a task bar shows a tooltip containing:

Task title
Traction ID and the name of the person who posted the entry
A detail table with: related project, related milestone, start date, due date, completion date, priority, assignees, subscribers, time estimate, and duration

The tooltip’s left accent border matches the color of the bar being hovered.

In-Chart Settings Dialog

Click the gear icon to open the settings panel. Changes take effect immediately and are saved locally in the browser.

Sort

Setting	Options	Description
Sort by	List order, Due date, Start date, Priority, Status	Determines the order in which rows are displayed.
Order	Ascending, Descending	Direction of the sort.

Display

Setting	Default	Description
Show completed tasks	Off	When checked, completed tasks are included in the chart.
Task grouping	On	Groups child tasks under their parent with tree indentation.
Priorities	On	Shows the colored priority circle in the ID column and on bars.
Assignee avatars	Off	Shows assignee profile photos in the left panel.
Progress	None	Draws a progress fill on each bar — choose None, By hours (estimated vs. actual), or By child tasks (ratio of completed children).
Projects	Off	Shows the associated project name as a column in the left panel.
Milestones	Off	Shows the associated milestone name as a column in the left panel.

Dragging Bars to Reschedule

When bar dragging is enabled by an administrator, users who belong to the drag-enabled group and have Edit permission on a task can reschedule it directly on the chart.

Drag the bar body — moves the entire task, preserving its duration
Drag the left handle — changes the start date only
Drag the right handle — changes the due date only

Dragging snaps to the column grid (one day, one week, etc., depending on the current zoom level). After dropping, a status message confirms the new dates. If the server update fails, an error message is shown.

Tasks that cannot be dragged — because dragging is disabled or the user lacks permission — show a default cursor over the bar and its handles.

Administrator/User Setup Options

Click the [Configure] link in [Server Setup] > [Plugins] to open the setup dialog.

Journal-Level Settings

These settings apply to all users of a given project or milestone.

Setting	Default	Description
Use Completion Date for Completed Tasks	No	When Yes, completed tasks use their completion date as the bar’s right edge instead of the due date.
Infer Missing Due Date	Yes	When Yes, a task with no due date falls back to its milestone’s due date, then the project’s due date, then today plus the offset below.
Fallback Due Date Offset (Days)	0	Number of days added to today to determine a bar’s end when no due date can be found via the inference chain above.
Show Tasks Without a Due Date	Yes	When Yes, tasks with no determinable end date are still rendered on the chart.
Enable Bar Dragging	Yes	When Yes, authorized users can drag bars to reschedule tasks.
Drag-Enabled Group	Everyone	Only members of this group can drag bars. Edit permission on the task is also required.

User-Level Settings

These settings can be adjusted per user in the user preferences area. Users and administrators can set the default values.

Setting	Default	Description
Default Zoom Level	Days	The zoom level shown when the chart is first opened.
Minimum Zoom Level	Days	The finest zoom level a user can select; zoom-in is blocked beyond this level.
Maximum Zoom Level	Months	The coarsest zoom level a user can select; zoom-out is blocked beyond this level.
Automatically Scroll to Today	Yes	When Yes, the chart scrolls to today’s date when opened.
Task Bar Label	Entry Title	What text to display on each bar — Entry Title, Entry ID, Entry ID + Entry Title, or None.
Show Priority Icon on Bars	Yes	When Yes, a small colored circle appears at the left edge of each bar.
Grid Lookahead (Hours)	0	Extra hours added to the right edge of the grid when zoomed to Hours.
Grid Lookahead (Days)	0	Extra days added to the right edge of the grid when zoomed to Days.
Grid Lookahead (Weeks)	0	Extra weeks added to the right edge of the grid when zoomed to Weeks.
Grid Lookahead (Months)	0	Extra months added to the right edge of the grid when zoomed to Months.

Attachments:

en_example.png
toolbar.png
leftpanel.png
bar_area.png
hint_dialog.png

Article: Forum7189 (permalink)
Categories: :Doc:plug-in
Date: May 19, 2026; 1:13:17 AM Eastern Daylight Time

Author Name: Takashi Okutsu
Author ID: takashi