JavaScript Gantt Chart

javascript-gantt-chart.png

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.png

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.png

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.png

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.