I build web tools for teams. I live in sprints and launch dates. I needed a Gantt chart that didn’t fight me. So I tested a few JavaScript libraries on a real project timeline. I used the same data set and tried them in Chrome, Safari, and Edge. I checked drag-and-drop, zoom, tooltips, and print.
You know what? They all work. But they don’t feel the same.
For the blow-by-blow details of that week-long experiment, you can skim my unfiltered project journal where I logged every surprise and shortcut.
My quick test setup (so you know what I did)
- Data size: 200 tasks, 20 dependencies
- Features I needed: drag, resize, day/week/month views, custom tooltips, export
- Stack: plain JS and a small React app
- Timezones: one user in PST, one in CET (hello, DST)
For a lightning-fast sanity check, I also pasted the same dataset into EJSchart to eyeball rendering consistency across browsers.
I made a simple “Web Redesign” plan. It had design, dev, QA, and launch. Nothing wild, but real enough.
Frappe Gantt — small, clean, and fast
This one is light. It looks cute out of the box. It’s good for simple needs. I used it in a marketing roadmap. The team loved that it didn’t feel heavy.
For deeper tweaks, I kept the Frappe Gantt Chart Documentation open in another tab; it covers all the props and events.
How it felt: snappy. Dragging was smooth. The code stayed tidy.
Where it shined:
- Easy setup
- Nice default look
- Great for 50–150 tasks
Where it hurt:
- No built-in dependencies editing on the chart
- Month view felt tight for long projects
- Print is basic
Real code I used:
<div id="gantt"></div>
<script>
const tasks = [
{ id: 'T1', name: 'Design', start: '2024-11-01', end: '2024-11-05', progress: 30 },
{ id: 'T2', name: 'Frontend', start: '2024-11-06', end: '2024-11-20', progress: 10, dependencies: 'T1' },
{ id: 'T3', name: 'Backend', start: '2024-11-08', end: '2024-11-22', progress: 0, dependencies: 'T1' },
{ id: 'T4', name: 'QA', start: '2024-11-23', end: '2024-11-28', progress: 0, dependencies: 'T2,T3' },
{ id: 'T5', name: 'Launch', start: '2024-11-30', end: '2024-11-30', progress: 0, dependencies: 'T4' }
];
const gantt = new Gantt('#gantt', tasks, {
view_mode: 'Week',
date_format: 'YYYY-MM-DD',
custom_popup_html: task => `
<div class="popup">
<h5>${task.name}</h5>
<p>${task._start.toDateString()} → ${task._end.toDateString()}</p>
<p>Progress: ${task.progress}%</p>
</div>
`
});
</script>
Tiny note: I had to tweak CSS to keep long task names from wrapping weird on small screens.
If budget is a hard constraint on your project, you might like the short piece I put together on the free JavaScript Gantt chart libraries I vetted.
DHTMLX Gantt — packed with features, made for serious work
This one has range. It’s heavier, yes. But it does the job when things get complex. I used it for a construction schedule with a lot of links and baselines. It handled it.
When I hit advanced scenarios, the DHTMLX Gantt Chart Documentation spelled out each config flag, so I rarely got stuck.
How it felt: powerful. Setup took a bit longer. Worth it when you need more.
Where it shined:
- Dependencies, baselines, critical path
- Big data holds up
- Good API for custom rules
Where it hurt:
- Learning curve
- Styling took time
- Some features need a paid plan
Real code I used:
<div id="gantt_here" style="width:100%; height:420px;"></div>
<script>
gantt.config.date_format = "%Y-%m-%d";
gantt.config.scale_unit = "week";
gantt.config.subscales = [{ unit: "day", step: 1, date: "%D %d" }];
gantt.config.drag_move = true;
gantt.config.drag_resize = true;
gantt.init("gantt_here");
gantt.parse({
data: [
{ id: 1, text: "Design", start_date: "2024-11-01", duration: 5, progress: 0.3 },
{ id: 2, text: "Frontend", start_date: "2024-11-06", duration: 10, progress: 0.1 },
{ id: 3, text: "Backend", start_date: "2024-11-08", duration: 11, progress: 0.0 },
{ id: 4, text: "QA", start_date: "2024-11-23", duration: 6, progress: 0.0 },
{ id: 5, text: "Launch", start_date: "2024-11-30", duration: 1, progress: 0.0 }
],
links: [
{ id: 10, source: 1, target: 2, type: "0" },
{ id: 11, source: 1, target: 3, type: "0" },
{ id: 12, source: 2, target: 4, type: "0" },
{ id: 13, source: 3, target: 4, type: "0" },
{ id: 14, source: 4, target: 5, type: "0" }
]
});
gantt.templates.task_text = (s, e, task) => `${task.text} (${Math.round(task.progress*100)}%)`;
</script>
A small thing I hit: DST shifts in March moved bars by a pixel in Safari. I fixed it by locking date formats and snapping to days.
Highcharts Gantt — pretty, polished, and great labels
If you care about look and feel, this one sings. It has rich labels and nice tooltips. I used it on a public roadmap page. Stakeholders liked the polish.
How it felt: clean. Tooltips were easy to shape. Printing was strong.
Where it shined:
- Styling
- Export to PNG/PDF
- Smooth zoom
Where it hurt:
- Data prep takes care
- Dependencies add setup
- License for full use
Real code I used:
<div id="container" style="height: 420px"></div>
<script>
Highcharts.ganttChart('container', {
title: { text: 'Web Redesign Plan' },
xAxis: { currentDateIndicator: true },
series: [{
name: 'Tasks',
data: [
{ id: 'd', name: 'Design', start: Date.UTC(2024,10,1), end: Date.UTC(2024,10,5) },
{ id: 'f', name: 'Frontend', start: Date.UTC(2024,10,6), end: Date.UTC(2024,10,20), dependency: 'd' },
{ id: 'b', name: 'Backend', start: Date.UTC(2024,10,8), end: Date.UTC(2024,10,22), dependency: 'd' },
{ id: 'q', name: 'QA', start: Date.UTC(2024,10,23), end: Date.UTC(2024,10,28), dependency: ['f','b'] },
{ id: 'l', name: 'Launch', start: Date.UTC(2024,10,30), end: Date.UTC(2024,10,30), dependency: 'q', milestone: true }
]
}],
tooltip: {
pointFormatter() {
const s = new Date(this.start).toDateString();
const e = new Date(this.end).toDateString();
return `<b>${this.name}</b><br/>${s} → ${e}`;
}
}
});
</script>
I did spend time on UTC dates. But after that, the timeline felt rock solid.
DayPilot Gantt — fast to start, friendly API
This one let me ship a small internal tool in one afternoon. The API is gentle. The grid is neat. It did weekends and work hours well too.
How it felt: simple.