Gantt Chart Manager is a tool for creating high-level project timelines and Gantt-style charts. Your charts are saved as JSON files directly on your computer, giving you full control over your data.
Browser Requirements
This application requires Google Chrome or Microsoft Edge to function properly. These browsers support the File System Access API, which allows the app to save your work directly to files on your computer with auto-save functionality.
Creating Your First Chart
From the welcome page, click "Create New Chart"
Enter a name for your chart
Choose where to save the file on your computer
Start adding teams/workstreams and milestones/tasks
Opening an Existing Chart
From the welcome page, click "Open Existing Chart"
Navigate to and select your chart's JSON file
The chart will load in the editor
Tip: Your work is automatically saved whenever you make changes. Look for the "Saved" indicator in the header to confirm your changes are saved.
Creating and Managing Charts
Chart Title
Click on the chart title in the editor header to rename your chart. The title is editable directly - just click and type.
Date Range
Set your chart's visible date range using the Start Date and End Date fields in the toolbar. The timeline will adjust to show only dates within this range.
Saving Your Work
Changes are saved automatically. You can also:
Press Ctrl+S (or Cmd+S on Mac) to save immediately
Click "Save As" to save a copy with a new name or location
Teams & Workstreams
Teams (or workstreams) are the top-level organizational units in your chart. They appear as collapsible sections in the sidebar and as rows in the Gantt view.
Adding a Team
Click the "+ Add Team or Workstream" button in the sidebar
Enter a name for the team
Click "Add" to create the team
Editing a Team
Click the pencil icon next to a team name to edit its details.
Collapsing Teams
Click the arrow icon next to a team name to collapse or expand it. When collapsed:
The team's milestones and groups are hidden
A summary bar shows the overall date range of all items within the team
The collapsed state is preserved when exporting to JPG
Deleting a Team
Click the trash icon next to a team name. This will delete the team and all its contents (groups, milestones, etc.).
Milestones & Tasks
Milestones and tasks represent the individual items on your timeline. They can have a date range (shown as a bar) or a single date (shown as a diamond).
Adding a Milestone/Task
Click the + icon next to a team or group name
Fill in the details:
Name: The display name
Color: Choose a color for the bar/diamond
Subtitle: Optional second line (e.g., owner, ticket number)
Start Date: Optional - if provided, shows as a bar
End Date: Required - the target completion date
Depends On: Optional - select another milestone this one depends on
Click "Add" to create the milestone
Bar vs Diamond Display
Bar: Shown when both start and end dates are provided
Diamond: Shown when only an end date is provided (single-date milestone)
Duplicating a Milestone
Click the copy icon next to a milestone to create a duplicate. The new milestone will be offset by 7 days from the original.
Groups
Groups provide an additional level of organization within teams. Use them to organize related milestones together (e.g., by partner, phase, or feature).
Adding a Group
Click the folder icon next to a team name
Enter a name for the group
Click "Add" to create the group
Collapsing Groups
Like teams, groups can be collapsed to show a summary bar representing all milestones within the group.
Tip: You can have milestones directly under a team (without a group) as well as milestones organized into groups. Use whatever structure works best for your project.
Markers
Markers are vertical lines that span across all teams, useful for highlighting important dates like releases, deadlines, or milestones that affect the entire project.
Adding a Marker
Click "+ Add Marker" in the Markers section of the sidebar
Enter a name, date, and color
Click "Add" to create the marker
Marker Display
Markers appear as:
A vertical dashed line extending through the entire chart
A label at the top of the chart showing the marker name
Timeline Controls
Zoom Levels
Use the zoom buttons to change the timeline granularity:
Day View
Each column represents one day. Shows day-of-week letters (M, T, W, etc.) and highlights weekends in gray.
Week View
Each column represents one week, starting on Monday. Good for medium-term planning.
Month View
Each column represents one month. Best for high-level, long-term views.
Date Range
Adjust the Start Date and End Date in the toolbar to focus on a specific time period. Items extending beyond the visible range will show continuation arrows.
Dependencies
Dependencies show relationships between milestones with curved arrows connecting them.
Creating a Dependency
Edit a milestone
In the "Depends On" dropdown, select the milestone this one depends on
Save the milestone
An arrow will be drawn from the end of the dependency to the start of the dependent milestone.
Tip: Dependencies work across teams - you can have a milestone in one team depend on a milestone in another team.
Legend
The legend helps explain what different colors mean in your chart.
Adding Legend Items
Click "+ Add Item" in the Legend section
Choose a color and enter a label
Click "Add" to add the item
Reordering Legend Items
Drag and drop legend items using the grip handle to reorder them.
Legend in Exports
The legend appears at the top of exported JPG images. When exporting a single team, only colors used by that team's milestones are shown in the legend.
Drag & Drop
Reordering Milestones (Sidebar)
Drag milestones using the grip handle to reorder them within their team or group.
Moving Milestones (Gantt View)
Click and drag a milestone bar in the Gantt view to move it to different dates. Both the start and end dates will shift together.
Resizing Milestones (Gantt View)
Hover over the left or right edge of a milestone bar to reveal resize handles. Drag these to change the start or end date independently.
Note: Single-date milestones (diamonds) can only be moved, not resized.
Exporting
Export to JPG
Click the "Export JPG" button to create an image of your chart.
Export Options:
Export entire chart: Creates an image of all teams and milestones
Export single team: Select a specific team to export only that section
What's Included in the Export:
Chart title
Timeline header with dates
All visible teams, groups, and milestones
Collapsed sections show as summary bars with expand indicators
Continuation arrows for items extending beyond the visible range
Dependency arrows
Markers
Legend (filtered to relevant colors when exporting a single team)
Save As
Click "Save As" to save a copy of your chart with a new filename or in a different location.
Keyboard Shortcuts
Shortcut
Action
Ctrl+S / Cmd+S
Save chart
Ctrl+Z / Cmd+Z
Undo
Ctrl+Y / Cmd+Shift+Z
Redo
Escape
Close open modal
Tips & Best Practices
Organizing Your Chart
Use Teams/Workstreams for major organizational divisions (departments, phases, vendors)
Use Groups for sub-categories within teams (features, partners, sprints)
Use consistent colors across your chart - define them in the legend for clarity
Working with Large Charts
Collapse sections you're not actively working on to reduce visual clutter
Use Week or Month view for high-level overviews
Use Day view when you need precise date placement
Adjust the date range to focus on specific time periods
Sharing Your Charts
JPG export is ideal for presentations, emails, and documents
JSON files can be shared with team members who have this tool
Export collapsed views for executive summaries
Export expanded views for detailed team planning
File Management
Charts are saved as .json files - keep them organized in project folders
Use "Save As" to create snapshots or versions of your chart