<
Overhauled Themes and New Dark Theme, Manually Scheduled Summaries, Built-in Baselines, and More in DHTMLX Gantt 9.0
React

High-Performance React JS Gantt Chart

Build a performant React JS Gantt chart for managing projects with thousands of tasks with DHTMLX Gantt.

Try DHTMLX React JS Gantt Live Demo

Open a demo on desktop
Be among those who successfully use DHTMLX Gantt and create tools for managing thousands of projects worldwide.
Capterra Shortlist 2024
GetApp Category Leaders 2024
Software Advice Front Runners 2024
Best Meets Requirements
High Performer EMEA
Users Most Likely To Recommend
Easiest to Use

How to Create React Gantt Chart

4 steps to start with DHTMLX Gantt in React JS:
1.
Create a React component for Gantt and import Gantt and its CSS file.
2.
Create the Gantt instance in the useEffect method and add the Gantt configuration there.
3.
Destroy the Gantt Instance in the same method in the return function to clean up when Gantt is no longer needed.
4.
Return the container for Gantt.

Features of DHTMLX React JS Gantt Chart

PRO edition
Add-ons
Standard edition
Resource management
End-users are empowered to allocate multiple resources, such as personnel and facilities, to projects and tasks. DHTMLX Gantt enhances allocation accuracy by providing a wide range of load charts and histograms.
Resource management
Critical path
With the critical path calculation embedded in DHTMLX Gantt, end-users can easily identify the minimum duration of an entire project and pinpoint the most vital tasks. The chart also allows displaying the slack time and defying the lag and lead times as needed.
Critical path
Auto scheduling
DHTMLX Gantt offers a convenient automatic scheduling feature. Thus, when a user modifies the duration of a specific task, the auto-scheduling extension automatically updates all associated due dates, according to the task dependencies.
Auto scheduling
Resource management
Node.js server module
You can complement DHTMLX Gantt with a Node.js server module used for working with Gantt charts on the back-end. It allows integrating data with complex CRM or ERP systems, synchronizing collaboration of multiple users, and performing all kinds of Gantt-related calculations on the fly.
PDF/PNG export module
This standalone module allows end-users to export Gantt charts of any size to PDF and PNG formats securely with no need to send your data to our server. Moreover, it goes beyond PDF and PNG, making it flexible to convert Gantt projects to iCal and Excel files.
PDF/PNG export module
MS Project and Primavera P6 module
DHTMLX provides an export module for MS Project and Primavera P6 that you can deploy directly on your server. It facilitates the secure export and import of Gantt data, ensuring compatibility with the most widely used project management formats.
MS Project and Primavera P6 module
Drag and drop
With DHTMLX Gantt, end-users can take advantage of diverse drag-and-drop operations. They will be able to create new tasks, select and move several tasks at once, rearrange grid columns, and more. As a developer, you can control drag-and-drop behavior via API.
Drag and drop
Inline editing
Having used the keyboard navigation mode, end-users can manage project tasks right in the grid via inline editing. You can set keyboard shortcuts and allow your users to create and manage tasks and relationships between them.
Inline editing
Tooltips
You may expand your Gantt chart functionality by adding tooltips to any of its elements, including tasks, connectors, milestones, etc. It's possible to add any custom information and fine-tune their look and feel to meet your project requirements.
Tooltips
Drag and drop

Why Choose DHTMLX React JS Gantt Chart?

User-friendly initialization
Whether you’re a JavaScript expert or an entry-level developer, starting your work with DHTMLX Gantt is straightforward. You can initialize the component with a few lines of code and easily set desired functionality. Detailed guides, demos, and video tutorials are available to help you.
Complete feature set out of the box
DHTMLX Gantt is a feature-rich library for building project management web apps. You can benefit from different task types, comprehensive scheduling techniques, and efficient resource management. Besides, its clean UI requires no additional customization.
Fully customizable
A comprehensive API of the DHTMLX React JS Gantt chart permits you to customize each and every element: time scales, timeline area, grid, taskbars, and edit form. API properties allow you to control the size of scales and cells. You can add markers and tooltips to enrich project visualization.
Stable and high-performance
When dealing with large projects that consist of thousands of tasks, robust and flawless performance is of utmost importance. DHTMLX Gantt loads any number of tasks within seconds and ensures smooth rendering due to smart rendering and dynamic loading.
Cross-browser and adaptable
DHTMLX Gantt provides cross-browser compatibility, ensuring consistent experience across Chrome, Firefox, Safari, and all Chromium-based browsers, including Microsoft Edge, Opera, and Vivaldi. The library is also compatible with any front-end or back-end technology.
Get started for free
Download the DHTMLX Gantt trial version and evaluate it free of charge for 30 days benefiting from the official technical support from our team.

What Customers Say

It's stable. It's easy to set up, even if you don’t have too 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.
Dmitry (Dan) Dudin
CEO at GanttPRO
The API is extremely flexible, well documented and easy to understand if you need to look at underlying source code. The support has been responsive and high quality. We would absolutely recommend using DHTMLX and are even considering using some other products that they offer based on our experience so far.
Hive Team
Team productivity platform
For Splitvice, dhtmlxGantt fits with what we need. It's a stand-alone component, without an extra run-time fee. It's flexible and highly customizable. We get good support when we need it, but most of our questions are found right in the knowledge database.
Splitvice Team
Portfolio and project management tool
We were looking for a project management plugin to help reduce our time to market and development costs. That is why we are using DHTMLX Gantt. I tested a free version of your Gantt product and I was satisfied with the API provided with the plugin. Your product fitted my needs and it was easy to integrate it into my application.
Thomas Meghe
senior developer at the French company Echo on
Documentation
Browse documentation
We’ve accurately maintained the documentation with API references and constantly updated technical guides and tutorials to help you quickly initialize, configure, and customize the Gantt library.
Samples
View online samples
We're constantly upgrading DHTMLX Gantt online samples where you can explore the Gantt chart features, play around with the code, preview, and share your results with your team or our tech support.
Free trial
Download a 30-day free trial
We suggest you download a free 30-day trial to make sure the DHTMLX Gantt library meets your requirements. Thus, you’ll be able to test its functionality, measure performance, and interact with official tech support.
Forum
Access our community forum
Our forum saves tons of shared knowledge you can rely on while building Gantt in React JS and other technologies. You can access it for free, 24/7, and find answers from our tech specialists.
Official tech support
Learn about DHTMLX support
We at DHTMLX provide support for every DHTMLX user. You can explore the levels of technical support for trial users and owners of proprietary and open-source licenses.
Integrations
Integrate Gantt with anything
On this page, we’ve collected all useful links you can use while integrating DHTMLX Gantt with Angular, React, Vue JS, Salesforce, ASP.Net, Node.js, and any other technology.

DHTMLX Gantt Licensing

Commercial
Total: $1399
Enterprise
Total: $2999
Ultimate
Total: $5999
License Terms Read License Agreement Read License Agreement Read License Agreement
Developers 5 20
Projects 1 5
Use in SaaS (unlimited end-users) Upon request for a fee
Use in Salesforce
Source code
Perpetual distribution rights
Support Plan
Premium Premium Ultimate
Time Period 1 year 1 year 1 year
Updates Major, minor, and maintenance updates Major, minor, and maintenance updates
Major, minor, and maintenance updates
Priority queue for bug fixing
Support requests 30 50
Response time 48h 48h 24h
Personal Account Manager
Functionality
PRO + 2 add-ons PRO + 3 add-ons PRO + 5 add-ons
16 PRO features
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.
Online export to PDF/PNG without watermark Free for 1 year Free for 1 year Free for 3 years
Free local PDF/PNG export module
Free local module for MS Project export/import
Free Node.js Gantt server module
Commercial
$1399
License Terms Read License Agreement
Developers 5
Projects 1
Use in SaaS (unlimited end-users) Upon request for a fee
Use in Salesforce
Source code
Perpetual distribution rights
Support Plan
Premium
Time Period 1 year
Updates Major, minor, and maintenance updates
Support requests 30
Response time 48h
Personal Account Manager
Functionality
PRO + 2 add-ons
16 PRO features
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.
Online export to PDF/PNG without watermark Free for 1 year
Free local PDF/PNG export module
Free local module for MS Project export/import
Free Node.js Gantt server module
Enterprise
$2999
License Terms Read License Agreement
Developers 20
Projects 5
Use in SaaS (unlimited end-users)
Use in Salesforce
Source code
Perpetual distribution rights
Support Plan
Premium
Time Period 1 year
Updates Major, minor, and maintenance updates
Support requests 50
Response time 48h
Personal Account Manager
Functionality
PRO + 3 add-ons
16 PRO features
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.
Online export to PDF/PNG without watermark Free for 1 year
Free local PDF/PNG export module
Free local module for MS Project export/import
Free Node.js Gantt server module
Ultimate
$5999
License Terms Read License Agreement
Developers
Projects
Use in SaaS (unlimited end-users)
Use in Salesforce
Source code
Perpetual distribution rights
Support Plan
Ultimate
Time Period 1 year
Updates
Major, minor, and maintenance updates
Priority queue for bug fixing
Support requests
Response time 24h
Personal Account Manager
Functionality
PRO + 5 add-on
16 PRO features
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.
Online export to PDF/PNG without watermark Free for 3 years
Free local PDF/PNG export module
Free local module for MS Project export/import
Free Node.js Gantt server module
Get a 70% Discount on DHTMLX Gantt for Your Startup
One-year license for DHTMLX JavaScript Gantt chart to help you cut your time-to-market and deliver top-notch software solutions.