What is a Gantt chart?
A Gantt chart is a horizontal bar chart that displays tasks across a timeline — each bar's position shows when a task starts and ends, and its length represents duration. More than a static visualisation, an interactive Gantt chart lets users drag bars to reschedule tasks, link tasks with dependency arrows, set milestones, and allocate resources to each task.
Dependencies are what make Gantt charts valuable for project management: Task B can't start until Task A finishes (finish-to-start). Task C must start when Task D starts (start-to-start). These relationships let the chart automatically cascade changes — if Task A slips by three days, everything depending on it moves too. Critical path analysis identifies which sequence of dependent tasks determines the minimum project duration.
Gantt charts are heavy frontend components. The grid, drag interactions, dependency arrows, timeline scaling (day/week/month views), and real-time conflict visualisation add up to a significant build even before any backend logic.
When does your app need it?
- You're building a project management tool where tasks have durations, start dates, and dependencies
- Your users manage complex multi-phase work — construction, software delivery, event planning, fit-outs
- You need to show project progress against a planned schedule in client-facing reports
- Resource allocation per task matters — who's assigned to what and when
- Milestone tracking is important to your workflow — key dates that gate downstream work
- You want to detect schedule conflicts and critical path automatically rather than manually
How much does it cost?
Adding a Gantt chart and project timeline typically adds 13–27 hours of development — roughly $2,000–$6,000 AUD.
A read-only Gantt view (display only, no editing) sits at the lower end. Full interactive editing — drag-to-reschedule, drag-to-resize, dependency linking, resource allocation, critical path highlighting — sits at the higher end. The choice of library significantly affects cost: commercial libraries like DHTMLX Gantt or Bryntum include much of the interaction out of the box; open-source alternatives like react-gantt-task require more custom development for advanced features.
Commercial Gantt library licences (DHTMLX, Bryntum) cost $500–$2,000+ per project and should be factored into your budget alongside development hours.
How it's typically built
Most production Gantt implementations use a specialised library rather than building from scratch. DHTMLX Gantt and Bryntum are the most feature-complete commercial options. react-gantt-task and @dhtmlx/trial-react-gantt are open-source alternatives suitable for simpler requirements.
The data model stores tasks with start date, duration (or end date), dependencies (an array of predecessor task IDs), assigned resources, and progress percentage. The frontend library renders this data and emits events when the user interacts — task moved, dependency added, task resized — which your app saves back to the API.
Backend logic handles dependency validation (prevent circular dependencies), critical path calculation, and baseline comparisons (original plan vs current state). For collaborative projects, optimistic locking or operational transforms prevent conflicting concurrent edits.
Questions to ask your developer
- Is a commercial Gantt library in scope? Commercial licences cost extra but can save significant development time — confirm this is budgeted.
- Which interactions are required? Drag-to-move, drag-to-resize, and dependency linking are each separate capabilities — scope them explicitly.
- How many tasks does the chart need to handle? Performance degrades with very large task lists — confirm the expected scale.
- Is critical path analysis required? It's a meaningful backend calculation — confirm whether it's needed or whether a basic timeline is sufficient.
- Is this collaborative? If multiple users edit the Gantt simultaneously, concurrency handling needs to be designed upfront.
See also: Resource and staff scheduling · Booking system · App cost calculator