JavaScript Gantt Chart

javascript gantt chart

This JavaScript/HTML5 Gantt chart widget allows you to display a hierarchy of tasks in a timeline view, one item per row.

Demo Download

Drag and Drop

html5 gantt drag drop task moving

The JavaScript Gantt chart control supports drag and drop operations:

  • task moving
  • task resizing
  • row moving
  • link creating

Read more about Gantt drag and drop support.

Large Data Sets

html5 gantt progressive task rendering

The Gantt chart is optimized to handle large data sets. It will display a task hierarchy with 10,000+ tasks. Read more about large data sets.

Project Management

javascript gantt project management

The Gantt chart lets you create project management applications. It supports common project management elements:

  • Task groups
  • Milestones
  • Task dependencies - links (Start-to-Start, Start-to-Finish, Finish-to-Start, Finish-to-Finish)
  • Percent complete status

Read more about project management features.

Tutorials

More Features

  • jQuery Gantt plugin
  • AngularJS Gantt plugin
  • Full CSS styling
  • Mobile and touch devices support (Android, iPad, iPhone)
  • Custom time scale (minutes, hours, days, weeks, months, years)
  • Non-continuous timeline (hidden weekends)
  • Non-linear timeline (first month on a day scale, following year on a month scale)
  • Custom columns with additional task data (duration, description, assigned resources)
  • Fully customizable (custom HTML, CSS classes, colors, behavior)
  • Context menu for tasks, rows, links
  • Bubble with popup details
  • HTML5 support

Read more in the Gantt chart documentation.