tasks do not render well, appear as compressed to width

[Alberto Torres]

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

 

[Monisha Sivanthilingam]

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.

Index.js

 

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.

Regards,

Monisha.

[Alberto Torres]

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

}

[Monisha Sivanthilingam]

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.

Regards,

Monisha.