Gantt charts are bar charts that visually illustrate a project's tasks, schedule, and dependencies. With Frappe Gantt, you can build beautiful, customizable, Gantt charts with ease.

You can use it anywhere from hobby projects to tracking the goals of your team at the worksplace.

ERPNext uses Frappe Gantt.

Motivation

We needed a Gantt View for a project, but surprisingly couldn't find a visually appealing Gantt library that was open source. So we built it!

Initially, the design was heavily inspired by Google Gantt and DHTMLX.

Today, we pride ourselves on having the most aesthetically pleasing and powerful Gantt library on the market - except, of course, that it's free.

Key Features

A wide variety of modes - be it day, hour, or year, you have it. Or add your own modes!

Customizable Views: customize the timeline based on various time periods - day, hour, or year, you have it. And if it's not covered, you can create your own!
Ignore Periods: exclude weekends and other holidays from your tasks' progress calculation.
Configure Anything: spacing, edit access, labels, you can control it all. Change both the style and functionality to meet your needs.
Multi-lingual Support: suitable for companies with an international base.

Usage

Install with:

npm install frappe-gantt

Include it in your HTML:

<script src="frappe-gantt.umd.js"></script>
<link rel="stylesheet" href="frappe-gantt.css">

Or from the CDN:

<script src="https://cdn.jsdelivr.net/npm/frappe-gantt/dist/frappe-gantt.umd.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/frappe-gantt/dist/frappe-gantt.css">

And start hacking:

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

To see the list of all options, check out the docs (under development).

Development Setup

If you want to contribute enhancements or fixes:

Clone this repo.
cd into project directory.
Run pnpm i to install dependencies.
pnpm run build to build files - or pnpm run build-dev to build and watch for changes.
Open index.html in your browser.
Make your code changes and test them.