Gantt chart - issues with length of lines connecting task with relationship

[Merrique]

I have encountered a strange issue regarding the length of the connector line that joins tasks with relationship. The problem is that the first horizontal line sometimes is too long, while the rest of the connector lines look correctly. This issue seems to be grid dependent, i.e. it is not persistent for all timelines units. However I was not able to figure out the reason for it's presence.

The object with issue (visible after loading the page)

After zooming in:

Some gantt component settings:

  <ejs-gantt
    id="GanttContainer"
    ref="gantt"
    :dataSource="dataSource"
    :taskFields="taskFields"
    :rowDataBound="rowDataBound"
    :timelineSettings="timelineSettings"
    :columns="columns"
    :rowHeight="rowHeight"
    :gridLines="gridLines"
    :milestoneTemplate="'taskbarTemplate'"
    :taskbarTemplate="'taskbarTemplate'"
    :parentTaskbarTemplate="'parentTaskbarTemplate'"
    :allowFiltering="true"
    :allowSelection="true"
    :selectionSettings="selectionSettings"
    :searchSettings="searchSettings"
    :showColumnMenu="false"
    :taskMode="taskMode"
    :tooltipSettings="tooltipSettings"
    :renderBaseline="showBaseline"
    :collapseAllParentTasks="true"
    baselineColor="#9aa5ad"
    connectorLineBackground="#0e76ba"
    connectorLineWidth="2"
    :dayWorkingTime="dayWorkingTime"
  >

   taskFields: {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        endDate: 'EndDate',
        duration: 'Duration',
        durationUnit: 'DurationUnit',
        progress: 'Progress',
        dependency: 'Predecessor',
        priority: 'priority',
        owner: 'owner',
        tags: 'tags',
        manual: 'isManual',
        baselineStartDate: 'BaselineStartDate',
        baselineEndDate: 'BaselineEndDate',
        child: 'plannedActions',
      },

 timelineSettings: {
        timelineViewMode: 'Day',
        timelineUnitSize: 100,
        topTier: {
          unit: 'Day',
          format: 'MMM EEEE d'
        },
        bottomTier: {
          count: 2,
          unit: 'Hour',
          format: 'h:mm a'
        }
      },

The dataSource used for the example:

  [
    {
        "TaskID": 1,
        "TaskName": "ch1",
        "StartDate": "2023-01-03T10:00:00.000Z",
        "EndDate": "2023-01-03T13:30:00.000Z",
        "Duration": 210,
        "DurationUnit": "minute",
        "priority": "low",
        "BaselineStartDate": "2023-01-03T10:00:00.000Z",
        "BaselineEndDate": "2023-01-03T13:30:00.000Z",
        "plannedActions": [
            {
                "TaskID": 2,
                "TaskName": "ch1 - w1",
                "StartDate": "2023-01-03T10:00:00.000Z",
                "EndDate": "2023-01-03T11:00:00.000Z",
                "Duration": 60,
                "DurationUnit": "minute",
                "BaselineStartDate": "2023-01-03T10:00:00.000Z",
                "BaselineEndDate": "2023-01-03T11:00:00.000Z",
                "Predecessor": null,
                "transitionDuration": 0,
                "Progress": 0,
                "isManual": true
            },
            {
                "TaskID": 3,
                "TaskName": "ch1 - w1 2",
                "StartDate": "2023-01-03T12:30:00.000Z",
                "EndDate": "2023-01-03T13:30:00.000Z",
                "Duration": 60,
                "DurationUnit": "minute",
                "BaselineStartDate": "2023-01-03T12:30:00.000Z",
                "BaselineEndDate": "2023-01-03T13:30:00.000Z",
                "Predecessor": "2FS+1.5 hours",
                "transitionDuration": 90,
                "Progress": 0,
                "isManual": true
            }
        ],
        "Progress": 0,
        "Predecessor": null,
        "isManual": true
    }
]

Is there any way to avoid this issue? It does not seems to be data related as the problem is not constant. Any solutions, ideas will be highly appreciated.

[Gopinath33M]

We were able to replicate the reported issue. We have considered this as a bug and have logged a bug report for it.

The fix will be provided in the patch release scheduled for January 25, 2023.

[Merrique]

Thank you for looking into the problem. I will be waiting for the bugfix than :)

[syncsiva]

@Merrique Closing for housekeeping purposes. Further, the reported bug can be tracked through below feedback link further, https://www.syncfusion.com/feedback/40197/connector-lines-are-not-rendered-properly-when-using-the-connectorlinewidth

[Gopinath33M]

It is a sample-level issue that arises because the connectorLineWidth property is not properly declared in your sample. We have modified the sample and attached code snippets for your reference. Please check the sample and documentation links below for more details. Code Snippets: <ejs-gantt id="Gantt" :connectorLineWidth="2"> Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/VueGantt_ConnectorLine-427301424.zip UG Documentation: https://ej2.syncfusion.com/vue/documentation/api/gantt#connectorlinewidth