Gantt

<div align="center" markdown="1"> <img src=".github/gantt-logo.jpg" width="80"> <h1>Frappe Gantt</h1>

A modern, configurable, Gantt library for the web.

</div>

Frappe Gantt

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 ERPNext. Surprisingly, we couldn't find a visually appealing Gantt library that was open source - so we decided to build it. Initially, the design was heavily inspired by Google Gantt and DHTMLX.

Key Features

• Customizable Views: customize the timeline based on various time periods - day, hour, or year, you have it. You can also create your own views.
• 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"
/>

Start using Gantt:

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

// Use .refresh to update the chart
gantt.tasks.append(...)
gantt.tasks.refresh()

Configuration

Frappe Gantt offers a wide range of options to customize your chart.

| Option | Description | Possible Values | Default | | ------------------------ | ------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------- | | arrow_curve | Curve radius of arrows connecting dependencies. | Any positive integer. | 5 | | auto_move_label | Move task labels when user scrolls horizontally. | true, false | false | | bar_corner_radius | Radius of the task bar corners (in pixels). | Any positive integer. | 3 | | bar_height | Height of task bars (in pixels). | Any positive integer. | 30 | | container_height | Height of the container. | auto - dynamic container height to fit all tasks - or any positive integer (for pixels). | auto | | column_width | Width of each column in the timeline. | Any positive integer. | 45 | | date_format | Format for displaying dates. | Any valid JS date format string. | YYYY-MM-DD | | upper_header_height | Height of the upper header in the timeline (in pixels). | Any positive integer. | 45 | | lower_header_height | Height of the lower header in the timeline (in pixels). | Any positive integer. | 30 | | snap_at | Snap tasks at particular intervel while resizing or dragging. | Any interval (see below) | 1d | | infinite_padding | Whether to extend timeline infinitely when user scrolls. | true, false | true | | holidays | Highlighted holidays on the timeline. | Object mapping CSS colors to holiday types. Types can either be a) 'weekend', or b) array of strings or date objects or objects in the format {date: ..., label: ...} | { 'var(--g-weekend-highlight-color)': 'weekend' } | | is_weekend | Determines whether a day is a weekend | Function | (d) => d.getDay() === 0 \|\| d.getDay() === 6 | | ignore | Ignored areas in the rendering | weekend or Array of strings or date objects (weekend can be present to the array also). | [] | | language | Language for localization. | ISO 639-1 codes like en, fr, es. | en | | lines | Determines which grid lines to display. | none for no lines, vertical for only vertical lines, horizontal for only horizontal lines, both for complete grid. | both | | move_dependencies | Whether moving a task automatically moves its dependencies. | true, false | true | | padding | Padding around task bars (in pixels). | Any positive integer. | 18 | | popup_on | Event to trigger the popup display. | click or hover | click | | readonly_progress | Disables editing task progress. | true, false | false | | readonly_dates | Disables editing task dates. | true, false | false | | readonly | Disables all editing features. | true, false | false | | scroll_to | Determines the starting point when chart is rendered. | today, start, end, or a date string.