Gantt
This interactive Gantt chart features tasks, task groups and milestones. Drag dependencies between tasks and use the inspector to update task names and their progress. Timeline options are configurable, and we use JsPlumb's support for floated labels to handle horizontal scroll.
Vanilla JS
Angular
Vue
Svelte
Typescript
The source code for this demo is available on Github.
Vanilla JS
Angular
React
https://github.com/jsplumb-demonstrations/gantt
If you haven't got a license for JsPlumb, we offer 30 day evaluations.
Start a free trialGantt charts
What is a Gantt chart?
A Gantt chart is used for project management to visualize all tasks from the beginning of a project to its completion. A Gantt chart lays out individual tasks and their dependencies, ownership, duration, and the expected duration of the project as a whole. With each task mapped out and assigned, your team can easily meet deadlines and ensure accountability.
What are the parts of a Gantt chart?
The main components of a Gantt chart are tasks, task groups and milestones. There may also be dependencies drawn between any of these. JsPlumb's Gantt chart demonstration also offers the ability to show the progress of individual tasks.
How do I work this demonstration?
- Click on a task, milestone or task group to select it
- Edit details in the inspector on the right hand side. For task groups and milestones you can edit their label; for tasks you can also edit the task's progress
- Drag tasks and milestones horizontally to change their start date
- When a task is selected, use the resize handles in the corner of the task to change the task's duration. You cannot change the duration of a milestone, as they are a point in time, and you cannot change the duration of a task group, as the group's total duration is calculated from its child tasks.
- When selected, use the delete button to remove a task, task group or milestone. When you remove a task group all of its child tasks will be removed too.
More Demos
See all demos


















