JavaScripting

The definitive source of the best
JavaScript libraries, frameworks, and plugins.

  • ×

    Gantt

    Github

    Javascript Gantt chart
    Filed under  › 

    • 🔾33%Overall
    • ★725
    • ⏳33.1 days
    • 🕩219
    • 👥4

    dhtmlxGantt

    dhtmlx.com npm: v.7.1.6 License: GPL v2

    Getting started | Features | Follow us | License | Useful links

    dhtmlxGantt is an open source JavaScript Gantt chart that helps you illustrate a project schedule in a nice-looking chart.

    It can show the dependencies between tasks as lines and allows you to set up different relationships between tasks (finish-to-start, start-to-start, finish-to-finish, start-to-finish).

    dhtmlxGantt provides a flexible API and a large number of event handlers, which gives you the freedom to customize it for your needs.

    gantt-demo

    Check more samples >

    Getting started

    Add files:

    <script src="dhtmlxgantt.js" ></script>
<link rel="stylesheet" href="dhtmlxgantt.css" type="text/css">

    Add markup:

    <div id="gantt_here" style='width:100%; height:100vh;'></div>

    And initialize:

    gantt.config.date_format = "%Y-%m-%d %H:%i";
gantt.init("gantt_here");
gantt.parse({
  data: [
    {id: 1, text: "Project #1", start_date: null, duration: null, parent:0, progress: 0, open: true},
    {id: 2, text: "Task #1", start_date: "2019-08-01 00:00", duration:5, parent:1, progress: 1},
    {id: 3, text: "Task #2", start_date: "2019-08-06 00:00", duration:2, parent:1, progress: 0.5},
    {id: 4, text: "Task #3", start_date: null, duration: null, parent:1, progress: 0.8, open: true},
    {id: 5, text: "Task #3.1", start_date: "2019-08-09 00:00", duration:2, parent:4, progress: 0.2},
    {id: 6, text: "Task #3.2", start_date: "2019-08-11 00:00", duration:1, parent:4, progress: 0}
  ],
  links:[
    {id:1, source:2, target:3, type:"0"},
    {id:2, source:3, target:4, type:"0"},
    {id:3, source:5, target:6, type:"0"}
  ]
});

    ==> Check the live demo

    Complete guides

    All tutorials

    https://docs.dhtmlx.com/gantt/desktop__howtostart_guides.html

    Video guides

    https://www.youtube.com/user/dhtmlx/videos

    Features

    Functionality GNU GPL v2 Commercial Enterprise Ultimate
    Standard features :heavy_check_mark: :heavy_check_mark: :heavy_check_mark: :heavy_check_mark:
    Auto scheduling :x: :heavy_check_mark: :heavy_check_mark: :heavy_check_mark:
    Baselines, deadlines and other custom elements :x: :heavy_check_mark: :heavy_check_mark: :heavy_check_mark:
    Critical path calculation :x: :heavy_check_mark: :heavy_check_mark: :heavy_check_mark:
    Custom content in the overlay :x: :heavy_check_mark: :heavy_check_mark: :heavy_check_mark:
    Custom tasks types :x: :heavy_check_mark: :heavy_check_mark: :heavy_check_mark:
    Decimal units for tasks durations :x: :heavy_check_mark: :heavy_check_mark: :heavy_check_mark:
    Dynamic loading :x: :heavy_check_mark: :heavy_check_mark: :heavy_check_mark:
    Expanding/collapsing split tasks :x: :heavy_check_mark: :heavy_check_mark: :heavy_check_mark:
    Free local module for MS Project export/import :x: :x: :x: :heavy_check_mark:
    Free local PDF/PNG export module :x: :x: :heavy_check_mark: :heavy_check_mark:
    MS Project link formatting :x: :heavy_check_mark: :heavy_check_mark: :heavy_check_mark:
    Multiple resources per task :x: :heavy_check_mark: :heavy_check_mark: :heavy_check_mark:
    Online export to PDF/PNG without watermark :x: 1 year 1 year Perpetual
    Project-level work calendars :x: :heavy_check_mark: :heavy_check_mark: :heavy_check_mark:
    Project and milestones task types :x: :heavy_check_mark: :heavy_check_mark: :heavy_check_mark:
    Resizing grid columns and the grid itself from the UI :x: :heavy_check_mark: :heavy_check_mark: :heavy_check_mark:
    Resource histogram :x: :heavy_check_mark: :heavy_check_mark: :heavy_check_mark:
    Resource management :x: :heavy_check_mark: :heavy_check_mark: :heavy_check_mark:
    S-curve to show the progress of a project :x: :heavy_check_mark: :heavy_check_mark: :heavy_check_mark:
    Setting task types automatically :x: :heavy_check_mark: :heavy_check_mark: :heavy_check_mark:
    Several Gantt charts on 1 page :x: :x: :heavy_check_mark: :heavy_check_mark:
    Simple API for hiding/showing columns of the grid :x: :heavy_check_mark: :heavy_check_mark: :heavy_check_mark:
    Splitting tasks into subtasks :x: :heavy_check_mark: :heavy_check_mark: :heavy_check_mark:
    Tasks grouping :x: :heavy_check_mark: :heavy_check_mark: :heavy_check_mark:
    Time constraints for tasks :x: :heavy_check_mark: :heavy_check_mark: :heavy_check_mark:
    Working calendar for the whole project :x: :heavy_check_mark: :heavy_check_mark: :heavy_check_mark:

    Follow us

    Star our GitHub repo :star:

    Check our roadmap for future updates :wrench:

    Read us on Medium :newspaper:

    Follow us on Twitter :bird:

    Like our page on Facebook :thumbsup:

    License

    dhtmlxGantt v.7.1.6 Standard

    This version of dhtmlxGantt is distributed under GPL 2.0 license and can be legally used in GPL projects.

    To use dhtmlxGantt in non-GPL projects (and get Pro version of the product), please obtain Commercial/Enterprise or Ultimate license on our site https://dhtmlx.com/docs/products/dhtmlxGantt/#licensing or contact us at sales@dhtmlx.com

    (c) XB Software Ltd.

    Show All