We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

tasks do not render well, appear as compressed to width

Hi, I was implementing a Gantt component with the following data, however the tasks are presented on the screen in a compressed way (width), the same happens without using predecessors.  I'm doing something wrong? I appreciate your help


3 Replies

MS Monisha Sivanthilingam Syncfusion Team January 6, 2023 09:41 AM UTC

Hi Alberto,

Thank you for reaching out to Syncfusion support.

We believe we have identified the issue you are experiencing and have a solution for you. It appears that you have provided the start date and duration for tasks in your data source but have only mapped the start date and end date fields in the taskFields section.

To properly render the tasks, the Gantt Chart requires at least one of the following values: end date, or duration. In your current configuration, only the start date is provided to the chart's data source, which is why the tasks are being rendered in a compressed manner as unscheduled tasks.

To resolve this issue, we recommend mapping the duration field in the taskFields section as well. We have included an example and sample for your reference.



const taskFields = {

id: 'TaskID',

name: 'TaskName',

startDate: 'StartDate',

endDate: 'EndDate',

duration: 'Duration',

progress: 'Progress',

dependency: 'Predecessor',

child: 'subtasks',

notes: 'info',

resourceInfo: 'resources',



Sample: https://stackblitz.com/edit/react-nfrcrw?file=index.html,index.js

We hope this helps, and please don't hesitate to reach out if you have any further questions or concerns.



AT Alberto Torres January 6, 2023 03:04 PM UTC

Hi Monisha,

Thanks for your answer, actually I did have the Duration field mapped in the taskFields object, but when reviewing said object, I saw that it had other additional fields that I was not using in the dataSource, I removed them and now everything works fine. Thank you very much for the observation.

export const taskFields = {

   id: "TaskID",

   name: "TaskName",

   startDate: "StartDate",

   endDate: "EndDate",

   duration: "Duration",

   progress: "Progress",

   child: "subtasks",

   dependency: "Predecessor",

   resourceInfo: "Resources",

   //durationUnit: "DurationUnit", //unused field

   //segments: "Segments",  //unused field

   //work: "Work",  //unused field


MS Monisha Sivanthilingam Syncfusion Team January 9, 2023 05:12 AM UTC

Hi Alberto,

Thank you for letting us know that your issue has been resolved. We are glad to have been able to assist you and hope that the solution provided was satisfactory.

If you have any further questions or need additional assistance, please don't hesitate to reach out to us. We are always here to help.



Live Chat Icon For mobile
Up arrow icon