Skip to main content

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
React
Angular
Vue
Svelte
Typescript
JsPlumb - Angular, React, Vue, Svelte diagramming library

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 trial
Gantt 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

Flowchart builder application - JsPlumb, leading alternative to GoJS, JointJS and ReactFlow

Flowchart

Gantt chart builder application - JsPlumb, build diagrams and rich visual UIs fast

Gantt

Chatbot builder application - JsPlumb - JavaScript and Typescript diagramming library that fuels exceptional UIs

Chatbot

Callflow builder application - JsPlumb - When you've reached the limit with ReactFlow, we can help!

Call Flow

Kanban application - JsPlumb - When you've reached the limit with ReactFlow, we can help!

Kanban

Network topology diagram builder - JsPlumb - Angular, React, Vue, Svelte diagramming library

Network Topology

Database schema builder application - JsPlumb - JavaScript and Typescript diagramming library that fuels exceptional UIs

Database Schema

Org Chart application - JsPlumb, leading alternative to GoJS, JointJS and ReactFlow

Org Chart

Mindmap builder application - JsPlumb - Angular, React, Vue, Svelte diagramming library

Mindmap

Element grouping demonstration - JsPlumb, flowcharts, chatbots, bar charts, decision trees, mindmaps, org charts, gantt charts and more

Nested Groups

Path tracing demonstration - JsPlumb, industry standard diagramming and rich visual UI Javascript library

Path Tracing

Hello world demonstration - JsPlumb - JavaScript and Typescript diagramming library that fuels exceptional UIs

Hello World

Image processor application - JsPlumb, build diagrams and rich visual UIs fast

Image Processor

Neighbour views dynamic selections demonstration - JsPlumb, flowcharts, chatbots, bar charts, decision trees, mindmaps, org charts, gantt charts and more

Neighbourhood Views

Active filtering demonstration - JsPlumb, leading alternative to GoJS, JointJS and ReactFlow

Active Filtering

Org chart layout demonstration - JsPlumb - JavaScript and Typescript diagramming library that fuels exceptional UIs

Hierarchy Layout

CAD Drawing tools demonstration - JsPlumb, flowcharts, chatbots, bar charts, decision trees, mindmaps, org charts, gantt charts and more

Connector Editors

Force directed layout demonstration, org chart layout demonstration - JsPlumb - Angular, React, Vue, Svelte diagramming library

Layouts

Collapsible hierarchy Italic language family demonstration - JsPlumb - Angular, React, Vue, Svelte diagramming library

Collapsible Hierarchy

Nested instances desktop example - JsPlumb - JavaScript and Typescript diagramming library that fuels exceptional UIs

Nested Instances