<
Meet DHTMLX Gantt 8.0 with Improved Resource Management, Updated Auto Scheduling and Slack Calculation, New Design for Samples, and More
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.

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.
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.
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.
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.
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.
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.
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.
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.

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.
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.
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.
Github
Find demo sources on GitHub
We added the DHTMLX Gantt library demo sources for React.js framework on GitHub. The complete demo is implemented with the help of our JavaScript Gantt.
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

Gantt
Save on bundles
Commercial Enterprise Ultimate
License Terms
Commercial
Enterprise
Ultimate
Developers
Commercial
5
Enterprise
20
Ultimate
Projects
Commercial
1
Enterprise
5
Ultimate
Use in SaaS (unlimited end-users)
Commercial
Enterprise
Ultimate
Use in Salesforce
Commercial
Enterprise
Ultimate
Perpetual distribution rights
Commercial
Enterprise
Ultimate
Support Plan
Commercial
Premium Support
Enterprise
Premium Support
Ultimate
Ultimate Support
Time Period
Commercial
1 year
Enterprise
1 year
Ultimate
1 year
Updates
Commercial
Major, minor, and maintenance updates
Enterprise
Major, minor, and maintenance updates
Ultimate
Major, minor, and maintenance updates
Priority queue for bug fixing
Support requests
Commercial
30
Enterprise
50
Ultimate
Response Time
Commercial
48h
Enterprise
48h
Ultimate
24h
Personal account Manager
Commercial
Enterprise
Ultimate
Functionality
Commercial
Professional
Enterprise
Professional
Ultimate
Professional
16 PRO features
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.
Commercial
Enterprise
Ultimate
Online export to PDF/PNG without watermark
Commercial
Free for 1 year
Enterprise
Free for 1 year
Ultimate
Free for 3 years
Free local PDF/PNG export module
Commercial
Enterprise
Ultimate
Free local module for MS Project export/import
Commercial
Enterprise
Ultimate
Free Node.js Gantt server module
Commercial
Enterprise
Ultimate
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.