<
Announcing DHTMLX React Gantt with Redux, TypeScript and MUI Support
DHTMLX Gantt
React

The Most Powerful React Gantt Chart

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

Resource owners
You can assign tasks to specific resources through a lightbox form. Resources can represent people or materials. An icon in the grid indicates the resources assigned to a task. A task can have multiple resources assigned.
🔗 Dependency links
Links connect tasks and describe dependencies between them. You can make links read-only or editable.
Projects and tasks
DHTMLX Gantt includes built-in task types: project, task, and milestone. Additionally, you can create custom task types. Projects are composed of tasks.
Resource grid
The grid in the resource load diagram can display department names and resource owners alongside their workload. You can configure the grid columns according to your needs.
Resource timeline
In the load diagram, you can switch between viewing the number of hours or tasks allocated to each resource. The resources are synchronized with the main Gantt chart.

React Gantt Chart Key Features

Easy customization with React components

If you want true React customization, you can create React components for features like task templates, custom lightbox forms, or inline editors. With a single property change, you can swap out a default behavior for a fully custom, branded solution. Everything stays within your React workflow, without needing to manually manipulate the DOM. This setup is perfect for advanced UI features or unique user experiences. You can also use custom React components for inline editors in the Gantt grid.

Work time calendars and auto scheduling

DHTMLX React Gantt provides a powerful auto-scheduling engine that can calculate start and end dates, handle constraints, and recalculate dependent tasks when something changes. This is very useful for large charts or projects that demand continuous re-calculation as tasks shift. If you need server-side scheduling, the Node.js module version can run these calculations on the backend.

Dynamic and fully configurable React Gantt chart

You can configure nearly every aspect of your React Gantt through dedicated props, from column definitions to chart templates and plugin activations. Thus, it is easy to tweak behavior - like enabling auto-scheduling, customizing chart scales, or defining how tasks are rendered - without diving into low-level code. The result is a flexible, React-like approach to Gantt configuration. Passing new props will dynamically update the chart and reduce the need for manual re-initialization.

Seamless theming and MUI compatibility

DHTMLX React Gantt offers multiple built-in themes for easy customization. You can apply a theme dynamically using the skin prop and further refine it with custom styles or by overriding CSS variables. Additionally, DHTMLX React Gantt is compatible with Material UI (MUI) components, making it easy to match your design system.

Deployment covered
with every license.
100+ awards
No fees on the number
of Gantt end-users in React
cloud-based apps.
NCI
Deutsche Bank
Siemens
Apple
Airbus
Embraer
Hilton
Tele2
Aprika
FedEx
GanttPro
Oracle
Amazon
Accenture
IBM
Cisco
Intel
Nasa
ABB
Capgemini
BBC News
NCI
Deutsche Bank
Siemens
Apple
Airbus
Embraer
Hilton
Tele2
Aprika
FedEx
GanttPro
Oracle
Amazon
Accenture
IBM
Cisco
Intel
Nasa
ABB
Capgemini
BBC News

How to Create and Use React Gantt Chart

Set up a powerful React Gantt chart

DHTMLX React Gantt can efficiently render 30,000+ tasks in milliseconds, being ultra-fast even in large-scale projects. The dedicated DHTMLX React Gantt chart NPM package simplifies installation and integration. DHTMLX Gantt works seamlessly with React (version 18 and higher), leveraging React's native props and state. The React wrapper manages a standard DHTMLX Gantt instance under the hood, automatically translating React props, such as tasks and configuration, into the corresponding Gantt initialization and data structures.

Use React Gantt with Redux

Integrating Redux with the DHTMLX React Gantt allows you to keep your application state in a single store, enabling predictable data flows and easier debugging. Whenever your tasks or other data need updating, you dispatch an action that updates Redux, and the Gantt automatically re-renders to reflect the changes. This approach also makes it simpler to manage advanced features like user interactions or external data sources. It is especially helpful if many parts of your UI (besides the Gantt) need to react to the same data updates.

Benefit from a full support for JSX & TSX

React Gantt comes with type definitions enabling its usage in TypeScript applications. With JSX and TSX support, you can fully leverage React's syntax and TypeScript's type-checking to build, maintain, and scale complex Gantt charts. It can also add type safety, ensuring your data structures and Gantt props line up correctly.

Get Started with React Gantt Chart by DHTMLX

1
Download trial version.

Fill in a form and get access to the DHTMLX Gantt evaluation version free for 30 days.

2
Utilize supporting materials.

Refer to the documentation and blog post guides for detailed, step-by-step instructions on how to integrate DHTMLX Gantt into your React application.

3
Select a suitable license.

After evaluating the product, it's time to choose the appropriate Gantt license that aligns with your requirements, like the number of developers, projects, and SaaS.

Why Choose to Build React JS Gantt Chart with DHTMLX?

Declarative data handling in DHTMLX React Gantt
React Gantt is designed to work with arrays of tasks, links, resources, calendars, and other data - all passed as props. Whenever these arrays change in your React state, the Gantt re-renders to reflect the new data. This simple, declarative pattern aligns perfectly with standard React data flows. It’s a natural approach for any React developer used to passing props to components.
Ideal for cloud-based applications
React Gantt charts are perfect for SaaS solutions, thanks to React's virtual DOM, modular structure, and lightweight dynamic UI. With DHTMLX Gantt, implementation costs are minimized—there are no extra fees for the number of end users in your SaaS applications. You can scale your solution as it grows without additional licensing expenses.
Full access to DHTMLX Gantt API
While most functionality is configurable through props, sometimes you need to access advanced methods for dynamic manipulation - like getTask(), updateTask(), or adding custom layers. For these cases, you can store a ref to the Gantt component and call its API when necessary. This pattern strikes a balance between declarative React usage and the ability to perform quick imperative updates. It is ideal for tasks such as adding new items programmatically or building complex custom interactions.
Rich feature set for professional project management
DHTMLX Gantt comes with an extensive set of out-of-the-box features, such as task dependencies and time constraints, critical path visualization, resource allocation, and baselines, which are essential for professional project management. Combined with React's ecosystem, these features enable developers to build advanced and visually appealing project management tools that cater to complex business needs.

React Gantt Examples by DHTMLX Users

React Gantt chart component for portfolio management
DHTMLX Gantt helps to visualize a roadmap, resource views, and portfolio prioritization in a React-based portfolio management solution for the DACH region.
Production scheduling solution with DHTMLX Gantt
Built upon a React stack, the application helps contract manufacturers solve their scheduling issues with the help of the Gantt chart.
Gantt customization
in a construction PM app
Here is an example of customizing DHTMLX to create a complete project management solution with Gantt and React JS.
Create powerful React Gantt charts with DHTMLX
Try DHTMLX Gantt free for 30 days to explore its full functionality and quickly build a top-notch React JS Gantt chart.
NO credit card required
About
Explore DHTMLX Gantt
DHTMLX Gantt is a powerful JavaScript component that seamlessly integrates with React applications. The PRO edition enables you to build high-performance React Gantt charts with a comprehensive feature set.
Documentation
Explore the React Gantt docs
Dive into comprehensive API references, step-by-step guides, and hands-on tutorials designed to help you seamlessly set up, configure, and tailor the DHTMLX React Gantt library to your needs.
Samples
Browse Gantt examples
Browse DHTMLX Gantt samples showcasing various features and configurations. It will help you quickly understand how to integrate, customize, and optimize the DHTMLX React Gantt for your project.

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
20+ PRO features
React Gantt chart
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
20+ PRO features
React Gantt chart
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
20+ PRO features
React Gantt chart
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
20+ PRO features
React Gantt chart
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

DHTMLX Gantt for React: Frequently Asked Questions

Can DHTMLX Gantt be integrated into React applications?

Yes, DHTMLX Gantt integrates perfectly with React. It can be wrapped as a React component and connected to React's state and props. With the help of the official NPM package dhtmlx-gantt and detailed documentation, the integration process is quick and simple. You can also try the full-featured DHTMLX Gantt with a free 30-day trial version, allowing you to test all capabilities before making a purchase.

Can I customize the appearance of a React Gantt chart built with DHTMLX?

Yes, DHTMLX Gantt supports CSS-based theming, which you can easily use alongside React's styling approaches, such as CSS modules, styled-components, or inline styles. This flexibility allows you to customize the chart's look and feel to match your application's design. Besides, you can add any custom HTML elements and define the logic of how they appear.

Is DHTMLX Gantt suitable for SaaS-based applications built with React?

Absolutely. React's lightweight and modular structure makes it a good fit for SaaS solutions, while DHTMLX Gantt adds robust project management functionality. Moreover, DHTMLX Gantt has no additional licensing fees for end-users, making it cost-effective for scalable SaaS projects.

Does DHTMLX Gantt support React hooks?

Yes, you can use React hooks like useEffect to initialize, configure, and clean up the Gantt chart when the component mounts and unmounts. Hooks make it easy to integrate the chart into React's lifecycle and manage its behavior dynamically.

What features does DHTMLX Gantt provide for React developers?

DHTMLX Gantt includes advanced features such as time constraints, inline editing, and workload allocation, allowing React developers to create fully customizable, interactive Gantt charts that adapt to project-specific requirements. With its powerful API and event system, developers can easily integrate and extend the Gantt chart's functionality in their applications.

Latest Blog Posts