frappe/gantt

★ 5,974JavaScriptAudience · developerComplexity · 2/5Setup · easy

Mindmap

mindmap
  root((Frappe Gantt))
    Core features
      Gantt chart render
      Dependency arrows
      Progress bars
    Interactivity
      Drag and resize
      Snap intervals
      View mode switch
    Configuration
      Holiday support
      Multi-language
      Custom styling
    Install
      npm
      Script tag

mindmap root((Frappe Gantt)) Core features Gantt chart render Dependency arrows Progress bars Interactivity Drag and resize Snap intervals View mode switch Configuration Holiday support Multi-language Custom styling Install npm Script tag

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Embed a draggable, resizable project timeline chart in a web app with just a few lines of JavaScript.

USE CASE 2

Display task dependencies with arrows so stakeholders can see which work blocks other work.

USE CASE 3

Switch the chart between hour, day, week, month, and year views without rewriting the underlying data.

USE CASE 4

Highlight weekends or holidays on the timeline so task duration calculations skip non-working days.

Tech stack

JavaScriptCSS

Getting it running

Difficulty · easy Time to first run · 5min

License not mentioned in the explanation, check the repository for terms.

In plain English

Frappe Gantt is an open-source JavaScript library for displaying Gantt charts on a webpage. A Gantt chart is a horizontal bar chart used in project planning: each bar represents a task, its position shows when the task starts and ends, and arrows between bars show which tasks depend on others being finished first. Frappe Gantt was built because the team behind ERPNext (an open-source business software platform) needed a good-looking chart library and could not find one they liked. Adding the library to a webpage is straightforward: install it via npm or include two files (a script and a stylesheet) directly in the HTML. After that, you define a list of tasks with names, start dates, end dates, and a progress percentage, then point the library at an element on the page and it draws the chart. Updating the chart later is done by refreshing the task list. The chart supports several view modes so you can display the timeline in hours, days, weeks, months, or years. Holidays and weekends can be highlighted or excluded from progress calculations, which is useful when a task's duration should not count non-working days. Labels, bar dimensions, column widths, and arrow styles are all configurable through options passed when creating the chart. The library supports multiple languages for the date labels that appear on the timeline, which makes it easier to deploy in products used by international teams. Tasks can be dragged and resized directly in the browser, with an option to snap movement to specific intervals such as one day or one hour. Frappe Gantt has no external dependencies and works in any modern browser. It is used in production by ERPNext. The README includes a full table of configuration options and documents the available API methods for controlling the chart from JavaScript.

Copy-paste prompts

Prompt 1

Using Frappe Gantt, write the JavaScript to render a project plan with 5 tasks, dependency arrows between them, and a weekly view set by default.

Prompt 2

How do I add Frappe Gantt to an HTML page without npm, just a script tag, and display a simple two-task chart with a progress bar?

Prompt 3

Show me how to handle the event fired when a user drags a Frappe Gantt task bar to a new date and send the updated start/end times to a backend API.

Prompt 4

How do I configure Frappe Gantt to snap bar movement to one-day intervals and exclude weekends from task duration progress calculations?

Prompt 5

Using Frappe Gantt's multi-language support, display the chart with French month and day labels.

Open on GitHub → Explain another repo

← frappe on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.