Gantt Chart Maker

Gantt Chart Maker is a free, browser-based project scheduling tool. It lets you visualise tasks on a horizontal timeline, grouped by project phase, with colour coding, progress tracking, and a live "today" marker.

Switch between Day, Week, and Month zoom levels to see the fine-grained schedule or the high-level roadmap. Tasks are draggable in the list to reorder them. The chart auto-saves every change to your browser — no account needed. Export options include PNG (for slide decks or emails) and PDF (for documents and printing).

Common use cases: software sprints, product launches, event planning, construction schedules, academic project timelines, and marketing campaigns.

• Add tasks with the "Add Task" button. Set a name, start date, end date, optional group/phase label, progress %, colour, and note.
• Group tasks by phase using the "Group / Phase" field (e.g. "Design", "Development", "Testing"). Tasks with the same group are visually separated by a group header row.
• Reorder tasks by dragging rows up or down in the task list on the left.
• Edit or delete tasks by hovering a row and clicking the pencil or bin icon, or by clicking the bar in the chart.
• Zoom between Day, Week, and Month using the buttons in the toolbar. Day view shows each calendar day; Week view shows Monday-anchored 7-day spans; Month view shows calendar months.
• Today line shows where the current date falls on the chart. Toggle it off for cleaner exports.
• Progress is shown as a darker fill inside each task bar. Toggle it off to hide progress fills.
• Export PNG or PDF captures the entire Gantt canvas. Use "JSON" to copy all task data; "Import" to restore it.

A Gantt chart (named after Henry Gantt, 1910s) represents tasks as horizontal bars on a time axis. The left edge of each bar = start date; the right edge = end date; bar width = duration. This tool computes positioning using pure CSS percentages derived from the task's date offset within the chart's visible date range.

The chart range is auto-computed: chartStart = earliest task start − 3 days; chartEnd = latest task end + 3 days. Task bar left position = (taskStart − chartStart) / totalDays × 100%. Bar width = duration / totalDays × 100%.

Grid columns for each zoom level are generated by iterating from chartStart to chartEnd in day, 7-day, or calendar-month increments. The min-width of the chart inner div is set to totalDays × 28px (day zoom), weeks × 90px (week), or months × 100px (month) to ensure bars remain readable at any scale.

State persists to localStorage via Alpine.js watchers. Export uses html2canvas at 2× DPR scale fed into jsPDF, both loaded on-demand via dynamic import().