Collapse All
Expand All
Undo
Redo
Auto Scheduling
Critical Path
Fullscreen
Zoom to Fit
Zoom Out
Zoom In
Export
PDF
Get more tools at the best price for building full-featured apps faster.
Interactive JavaScript/HTML5 Gantt Chart
for Your Solutions
DHTMLX Gantt is a full-featured Gantt chart for cross-browser and cross-platform applications.
The most complete library to cover all the needs of a project management app.
JS Gantt Chart Samples
JavaScript Gantt Features
- Merging working calendars pro
- Setting working time in minutes
- Part-time resource assignment pro(New!)
- Decimal units for tasks durations pro
- MS Project link formatting pro
- Horizontal drag-n-drop of multiple tasks
- Scrolling the Timeline by click and drag
- Expanding/collapsing split tasks pro
- Zooming by mouse wheel
- Creating tasks by drag-n-drop
- Gantt import as ES6 module
- S-curve to show the progress of a project pro
- Tasks constraints pro
- Multiple resources per task pro
- Resource histogram pro
- Inline editing
- Resource management pro
- Editable or readonly Gantt chart
- Full control with JavaScript API
- Cross-browser: IE, FF, Chrome, Safari, Opera
- Flexible gantt layout: grid and timeline are replaceable components
- Working days and hours for individual tasks
- Keyboard navigation
- Support for touch devices: iOS, Android
- jQuery integration
- Fullscreen mode
- Loading from XML, JSON
- Rich drag-and-drop behavior to manage tasks
- Ability to mark specific times in the timeline area
- Tooltips
- Critical path calculation pro
- Backward planning
- Optional tree view
- Customizable task edit form (lightbox)
- Tasks grouping pro
- WBS codes calculation
- Three task types: project pro, task, milestone pro
- Progress percent coloring for tasks
- Auto scheduling pro
- Support for unscheduled tasks
- Dependency arrows
- Simple API for managing editability / readonly modes of individual tasks
- Reordering Grid columns by drag-n-drop
- Rollup tasks and milestones(New!)
- Node.js server module [Add-on]
- Working calendar for the whole project pro
- Creating tooltips for all Gantt elements
- Routing options for dataProcessor
- Import from MS Excel file
- Free slack and total slack
- Split tasks pro
- Ability to set task types automatically pro
- Right-to-left mode
- Material design
- Export/import from MS Project
- Smart rendering
- Support for baselines, deadlines and other custom elements pro
- Undo/redo functionality
- Accessibility
- Fast and smooth rendering
- Configurable columns in the grid
- Multi-task selection
- Per-column grid sorting
- Simple API for hiding/showing columns of the grid pro
- Ability to resize grid columns and the grid itself from the UI pro
- Sorting and filtering
- Dynamic loading pro
- Localization (30+ locales)
- Customizable time scale - zooming
- Non-linear time scale (hide days/hours)
- 7 different skins
- Content Security Policy compliance
- Export to Excel, iCal
- Support for custom tasks types pro
- 4 types of linking of tasks: finish-to-start, start-to-start, finish-to-finish, start-to-finish
- Placeholder row for creating new tasks
PRO Edition of JS Gantt Library
Resource allocation
The PRO edition enables you to develop Gantt charts with efficient resource management capabilities. PRO features allow users to allocate resources to tasks and track the workload with the help of resource usage diagrams, histograms, and resource calendars.
Critical path analysis
Another essential PRO feature is the critical path calculation. It is a cornerstone in project management, which determines vital tasks and the minimum duration of the whole project. Tasks that can’t be postponed are highlighted in red.
Adding custom content on top of Gantt
In addition to various custom elements inside Gantt, you can display any custom content on top of the chart as well. In our example, an additional layer above Gantt contains an S-curve, which depicts the project progress.
10
Years on the market
6000+
NPM downloads per month
1000+
New trial & GNU GPL users per month
2500+
Customers
DHTMLX Release History of JavaScript Gantt
April 19
2010
2010
1.0
1.3
August 27
2010
2010
September 23
2013
2013
2.0
2.1
March 20
2014
2014
September 9
2014
2014
3.0
3.1
October 27
2014
2014
3.2
March 18
2015
2015
3.3
July 22
2015
2015
October 7
2015
2015
4.0
4.1
September 1
2016
2016
4.2
August 15
2017
2017
November 16
2017
2017
5.0
5.1
February 27
2018
2018
5.2
July 6
2018
2018
November 5
2018
2018
6.0
6.1
February 21
2019
2019
6.2
July 16
2019
2019
6.3
November 14
2019
2019
April 7
2020
2020
7.0
7.1
April 8
2021
2021
8.0
Autumn
2021
2021
Check our product's roadmap for the future updates.
Trusted by Developers and Project Managers
Advantages for Developers
Our Gantt Chart is a pure JavaScript library w/o any dependencies on 3rd party tools
Simple integration with any server-side technology (PHP, ASP.NET, Java, and others)
Rich and flexible JavaScript API
Fully customizable and editable
Impressive fast rendering of any amount of tasks
All-covering documentation with vivid technical samples
Advantages for Project Managers
DHTMLX products are toprated on the market for over 10 years
The support is very qualitative and provided by DHTMLX Gantt development team, no external support staff who isn't aware of every single gantt detail
Gantt customers are software giants, market majors in service management, resource-saving technologies and electronics, as well as numerous small and medium companies.
No external dependencies and no hidden fees
Latest Customer Spotlights from Our Clients
JavaScript Gantt Integrations
Server-side integrations
Node.js Gantt Chart
In addition to DHTMLX client-side Gantt chart library, we offer a Node.js server module for your web apps. It enables you to:
Update Gantt chart tasks using the auto-scheduling feature with the information received from various sources like web and mobile apps;
Allow numerous end users to interact with Gantt and make changes into its schedule simultaneously;
Make calculations and perform scheduling analysis using your server code.
How to Create a JavaScript Gantt Chart - Video Tutorials
Learn how to easily start your work with DHTMLX Gantt in your web app and equip it with all the desired functionality
How to Create a Gantt Chart Using Node.js
How to Create a Gantt Chart App Using PHP Laravel
2 Ways to Export Your Gantt Diagram
Online Export
Use our online service to export your Gantt chart to PNG, PDF, Excel, iCal or MS Project formats.
It's provided free of charge under your active license subscription.
Local module
Get your own local module for your server to export Gantt to PDF, PNG or MS Project formats.
Choose the most convenient way to install it: Docker image or a standalone export module.
Support and Learning Resources for JS Gantt
Why Choose DHTMLX Gantt?
Remarkably High Performance
Work with either small or large projects becomes more efficient if the performance is robust. You can load any
amount of tasks to the Gantt chart, so the component will continue render them fast and smooth. If your projects
consist of thousands of tasks, you'll definitely appreciate this feature.
Accessibility
DHTMLX Gantt is one of the JavaScript Gantt chart libraries in the industry that provides the ability to build
accessible js gantt charts. Accessibility support includes WAI-ARIA, keyboard navigation and two high-contrast
skins (black and white). Find more information in our docs.
Intuitive User Interface
The intuitive drag-and-drop interface of DHTMLX Gantt allows end users to easily change start/end time and duration
of tasks, link tasks with each other, and set task completeness. This JavaScript Gantt chart can display three task
types: task, project, and milestone. Besides, end users can edit tasks on the fly directly in the chart without opening
the lightbox. If needed, you can set DHTMLX Gantt in a read-only mode.
Fully Customizable
DHTMLX Gantt provides a rich and flexible JavaScript API that allows you to configure each element of your
JavaScript/HTML5 Gantt chart: customize time scale, define the grid structure, change coloring of the task
bars, add text or any custom HTML to the task bars, define dependencies (relationships) between tasks, and
more. The task edit form (lightbox) can also be customized to includes the new custom fields.
Resource Management
DHTMLX Gantt library helps to estimate the workload of each participant of your project by using resources
management functionality. You can assign resources to the tasks and clearly see capacity and workload of
projects and resources by displaying the resources on a JavaScript Gantt diagram. You can consider resources not only as human
resources but also equipment, money, time, etc.
Cross-Browser Support
To let the users of your app work comfortably in any environment, DHTMLX Gantt chart component provides
support for all major browsers - Google Chrome, Firefox, Internet Explorer (11+), Microsoft Edge, Safari
in particular.
What Customers Say
A complete and easy to use companion for planning and resource management applications development
We have used the DHTMLX components, expecially the scheduler and the GANTT, to realize some complex resource management use cases that would require a lot of effort to realize from scratch. Using these components has significantly reduced the release time providing a good, bug free experience for the end users.
Versatile product and excellent support
We used dhtml for developing the Gantt charts in our project management tool. The product was easy to implement and is evolving continuously. So we are able to always have the best features in our cloud HR and ERP apps.
Truly Exceptional Products!
We searched high and low for a suite of components to make our lives much easier in developing our products, We initially had a need for a Gantt Chart and this one really stood out from the rest. I can tell you that after implementing it on 2 large products we are very impressed with the quality of this component as well as their other products.
Outstanding component
After reviewing many options for a Gantt component, we selected the one from DHTMLX. It is beautifully designed (appearance/UI) which was a key consideration for us, but really it's the full scope of features and capabilities that make it stand out. It has the flexibility for us to make it work exactly the way we need, and it has been a very simple process to integrate it and get it up and running.
Best choice for product development. Absolutely
It's stable. It's easy to setup, even if you don't have to much development experience. It's highly customizable. It's full of features out of the box (and if something missing, you can write your own addon to cover missing functionality). It's beautiful out of the box, which is not always the case for similar components. Workload functionality is included, which is not the case for such components.
DHTMLX Gantt Licensing
| Free GNU GPL v2 | Commercial | Enterprise | Ultimate | |
|---|---|---|---|---|
| License Terms |
Free GNU GPL v2
|
Commercial
|
Enterprise
|
Ultimate
|
| Developers |
Free GNU GPL v2
|
Commercial
5
|
Enterprise
20
|
Ultimate
|
| Projects |
Free GNU GPL v2
(open source only)
|
Commercial
1
|
Enterprise
5
|
Ultimate
|
| SaaS |
Free GNU GPL v2
|
Commercial
|
Enterprise
|
Ultimate
|
| Perpetual distribution rights |
Free GNU GPL v2
|
Commercial
|
Enterprise
|
Ultimate
|
| Support Plan |
Free GNU GPL v2
No Official Support
|
Commercial
Standard Support
|
Enterprise
Premium Support
|
Ultimate
Ultimate Support
|
| Time Period |
GNU GPL
|
Commercial
1 year
|
Enterprise
1 year
|
Ultimate
1 year
|
| Updates |
GNU GPL
|
Commercial
Minor & major updates
Bug fixes
|
Enterprise
Minor & major updates
Bug fixes
|
Ultimate
Minor & major updates
Bug fixes
Emergency bug fixes
|
| Tickets |
Free GNU GPL v2
Only Community Forum
|
Commercial
10
|
Enterprise
30
|
Ultimate
|
| Response Time |
GNU GPL
|
Commercial
72h
|
Enterprise
48h
|
Ultimate
24h
|
| Personal Acccount Manager |
GNU GPL
|
Commercial
|
Enterprise
|
Ultimate
|
|
Functionality
|
GNU GPL
Standard
|
Commercial
Professional
|
Enterprise
Professional
|
Ultimate
Professional
|
|
16 PRO features
|
GNU GPL
|
Commercial
|
Enterprise
|
Ultimate
|
| Resource management |
GNU GPL
|
Commercial
|
Enterprise
|
Ultimate
|
| Critical path calculation |
GNU GPL
|
Commercial
|
Enterprise
|
Ultimate
|
| Baselines, deadlines and other custom elements |
GNU GPL
|
Commercial
|
Enterprise
|
Ultimate
|
| Simple API for hiding/showing columns of the grid |
GNU GPL
|
Commercial
|
Enterprise
|
Ultimate
|
| Dynamic loading |
GNU GPL
|
Commercial
|
Enterprise
|
Ultimate
|
| Tasks grouping |
GNU GPL
|
Commercial
|
Enterprise
|
Ultimate
|
|
Auto scheduling
|
GNU GPL
|
Commercial
|
Enterprise
|
Ultimate
|
| Project and milestones task types |
GNU GPL
|
Commercial
|
Enterprise
|
Ultimate
|
| Split tasks |
GNU GPL
|
Commercial
|
Enterprise
|
Ultimate
|
| Setting task types automatically |
GNU GPL
|
Commercial
|
Enterprise
|
Ultimate
|
| Custom content in the overlay |
GNU GPL
|
Commercial
|
Enterprise
|
Ultimate
|
| Time constraints for tasks |
GNU GPL
|
Commercial
|
Enterprise
|
Ultimate
|
| Project-level work calendars |
GNU GPL
|
Commercial
|
Enterprise
|
Ultimate
|
| MS Project-like format of task dependencies |
GNU GPL
|
Commercial
|
Enterprise
|
Ultimate
|
| Decimal format of task duration |
GNU GPL
|
Commercial
|
Enterprise
|
Ultimate
|
| Several Gantt charts on 1 page ? This feature enables creating and destroying instances of Gantt, what is especially common for Angular, React, and other frameworks. |
GNU GPL
|
Commercial
|
Enterprise
|
Ultimate
|
| Online export to PDF/PNG without watermark |
GNU GPL
|
Commercial
1 year
|
Enterprise
1 year
|
Ultimate
3 years
|
| Free local PDF/PNG export module |
GNU GPL
|
Commercial
|
Enterprise
|
Ultimate
|
| Free local module for MS Project export/import |
GNU GPL
|
Commercial
|
Enterprise
|
Ultimate
|
|
GNU GPL
|
Commercial
|
Enterprise
|
Ultimate
|
|
GNU GPL
Free
|
Commercial
Total: $699
|
Enterprise
Total: $1399
|
Ultimate
Total: $2999
|
Other DHTMLX Products
Need help with DHTMLX Gantt integration into your app? Contact us
Send
a Question
a Question