The problem i am facing is displaying more than one task in a same row. But the default structure of Gantt Chart is to show task in individual rows infront of task name. We have customize the structure and replaced task names ( left Columns of the Gantt Chart ) with the workers name. Tasks assigned to each Worker should displayed in the same row as the the worker name.
There is a functionality available in Js version of Gantt chart but not sure about the react version of it. In js one can access the instance of gantt chart and but in react you have to do everything with help of props.
UPDATE: 2025-07-10
Starting from v9.0.9, React and JS versions of DHTMLX Gantt share the same core library, meaning that all features of JS Gantt are now available in the React version — including Split Tasks.
Release article: https://dhtmlx.com/blog/announcing-dhtmlx-react-gantt/
Note: The following content is preserved for historical reference and applies to older versions prior to v9.0.9.
Unfortunately, split tasks functionality in React version of Dhtmlx Gantt chart is not available.
This functionality is available in the PRO version of JS dhtmlxGantt https://docs.dhtmlx.com/gantt/desktop__split_tasks.html. JS dhtmlxGantt can be used in react app. To do this, you need to write a wrapper component.
Here is a demo and tutorial on how to do it: https://github.com/DHTMLX/react-gantt-demo https://dhtmlx.com/blog/create-react-gantt-chart-component-dhtmlxgantt/
Here is the demo, with JS dhtmlxGantt split tasks in react app: https://files.dhtmlx.com/30d/22969d8959ddb7651919594cd28848fd/gantt-react+split.zip.