Open Source Javascript Gantt

A simple, interactive, modern gantt chart library for the web with drag, resize, dependencies and time scales

Try it! Drag tasks across the timeline, resize to change duration, click to view more information

Installation

yarn add frappe-gantt

Usage

Dependencies: momentjs and snapsvg

Include it in your html

<script src="frappe-gantt.min.js" />

Create an svg element

<svg id="gantt"></svg>

Initiliaze a new Gantt object

var tasks = [
  {
	id: 'Task 1',
	name: 'Redesign website',
	start: '2016-12-28',
	end: '2016-12-31',
	progress: 20,
	dependencies: 'Task 2, Task 3'
  },
  ...
]
var gantt = new Gantt("#gantt", tasks);
		

Change view mode

		gantt.change_view_mode('Week') // Quarter Day, Half Day, Day, Week, Month 

Add event listeners

	  var gantt = new Gantt('#gantt', tasks, {
	on_click: function (task) {
		console.log(task);
	},
	on_date_change: function(task, start, end) {
		console.log(task, start, end);
	},
	on_progress_change: function(task, progress) {
		console.log(task, progress);
	},
	on_view_change: function(mode) {
		console.log(mode);
	}
});

Custom HTML in popup

	  var gantt = new Gantt('#gantt', tasks, {
	// can be a function that returns html
	// or a simple html string
	custom_popup_html: function(task) {
	  // the task object will contain the updated
	  // dates and progress value
	  const end_date = task._end.format('MMM D');
	  return `
		<div class="details-container">
		  <h5>${task.name}</h5>
		  <p>Expected to finish by ${end_date}</p>
		  <p>${task.progress}% completed!</p>
		</div>
	  `;
	}
});

Open Source Javascript Gantt

A simple, interactive, modern gantt chart library for the web with drag, resize, dependencies and time scales

MIT License