Gantt Chart
A high-performance, interactive Gantt chart component for project scheduling. Render thousands of tasks at 60fps with canvas-based rendering, full drag-and-drop editing, and comprehensive project management features.
Features
Tasks & Milestones
Create, edit, and organize tasks in a hierarchical structure. Support for milestones, summary tasks, and task groups.
Dependencies
Finish-to-Start, Start-to-Start, Finish-to-Finish, and Start-to-Finish link types with lag/lead time.
Critical Path
Automatic critical path calculation and highlighting. Identify bottlenecks instantly.
Drag & Drop
Move tasks, resize duration, and create dependencies by dragging. Full undo/redo support.
Baseline Comparison
Compare planned vs. actual schedules with visual baseline overlay.
Resource Management
Assign resources to tasks, detect overallocation, and view resource workload.
Working Calendar
Define working days, holidays, and custom calendars per resource or project.
Export
Export to PNG, PDF, CSV, and Excel. Print-optimized layout with page breaks.
Zoom Levels
Hour, day, week, month, quarter, and year views. Smooth zoom transitions.
Markers & Today Line
Highlight deadlines, sprints, or milestones with vertical markers.
Filtering & Search
Filter tasks by assignee, status, date range, or custom criteria.
Keyboard Navigation
Full keyboard support for accessibility. Navigate, select, and edit without a mouse.
Quick start
Get a Gantt chart running in minutes.
import { useRef, useCallback } from 'react';
import { GanttChart, GanttChartRef } from '@timelinekit/react';
import '@timelinekit/core/styles';
function day(offset: number) {
const d = new Date();
d.setDate(d.getDate() + offset);
d.setHours(0, 0, 0, 0);
return d;
}
export default function App() {
const ref = useRef<GanttChartRef>(null);
const handleReady = useCallback(() => {
const gantt = ref.current;
if (!gantt) return;
const list = gantt.list;
list.clear();
const t1 = list.createTask('1');
t1.name = 'Planning';
t1.startTime = day(1);
t1.endTime = day(4);
list.addTask(t1);
const t2 = list.createTask('2');
t2.name = 'Development';
t2.startTime = day(7);
t2.endTime = day(18);
list.addTask(t2);
const t3 = list.createTask('3');
t3.name = 'Testing';
t3.startTime = day(21);
t3.endTime = day(25);
list.addTask(t3);
list.addLink(t1, t2, 'finishToStart');
list.addLink(t2, t3, 'finishToStart');
}, []);
return (
<div style={{ height: '100vh' }}>
<GanttChart ref={ref} onReady={handleReady} />
</div>
);
}