Customize links of gantt

Gantt
#1

Hello,

Currently, there are 4 types of dependencies. FF, FS, SF,SS. Can this be customized to display the dependencies in between of any task?
Say for example- there are 2 task. Task 1(start - 1/1/2021 end 31/12/2021) and Task 2(start - 1/1/2020 end 31/12/2020) And there is a dependency exists from 3/4/2020- 8/10/2020.

So the links are not starting from the end or starting of any task. In this case, how will be the links drawn? Can they be created straight line? How can I acheive drawing or updating of these links by dragging the existing the link?

Please provide some sample.

Thanks,
Surbhi

#2

Hello,

Unfortunately, there is no built-in way to achieve this, which is why you need a custom solution. If you want to display custom HTML elements inside the timeline, you can use the addTaskLayer method to draw custom links.

Here’s an example of how it might be implemented:

  1. Here we store dependencies separately in an array:
const customDependencies = [
  {
    id: 1,
    from: { task: 1, start_date: '03-01-2020' },
    to: { task: 1, end_date: '03-06-2020' },
  }
];
  1. Then we use gantt.addTaskLayer to render custom dependencies. Each dependency is drawn as an SVG path with vertical + horizontal segments, so it looks closer to a regular Gantt link:
const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
const d = [
  `M ${fromX} ${fromY}`,  // start point
  `V ${midY}`,            // vertical down
  `H ${toX}`,             // horizontal line
  `V ${toY}`              // vertical up to the target
].join(' ');
path.setAttribute('d', d);
  1. To make these links interactive, we add draggable handles (circle elements) at the start and end of the line:
const fromHandle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
fromHandle.setAttribute('cx', fromX);
fromHandle.setAttribute('cy', fromY);
fromHandle.setAttribute('r', 4);
fromHandle.setAttribute('fill', 'var(--dhx-gantt-link-background)');
fromHandle.style.cursor = 'ew-resize';
fromHandle.addEventListener('mousedown', (e) => {
  e.stopPropagation();
  dragContext = { depId: dep.id, end: 'from' };
});
svg.appendChild(fromHandle);
const toHandle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
toHandle.setAttribute('cx', toX);
toHandle.setAttribute('cy', toY);
toHandle.setAttribute('r', 4);
toHandle.setAttribute('fill', 'var(--dhx-gantt-link-background)');
toHandle.style.cursor = 'ew-resize';
toHandle.addEventListener('mousedown', (e) => {
  e.stopPropagation();
  dragContext = { depId: dep.id, end: 'to' };
});
svg.appendChild(toHandle);
});
  1. On mouse move, we recalculate the date from the current cursor position and update the dependency data. Finally, we re-render the Gantt chart so the link redraws at the new position:
document.addEventListener('mousemove', (e) => {
  if (!dragContext) return;
  const posX = e.clientX - gantt.$task_data.getBoundingClientRect().left;
  const date = gantt.dateFromPos(posX);

  const dep = customDependencies.find(d => d.id === dragContext.depId);
  if (dragContext.end === 'from') {
    dep.from.start_date = dateToStr(date);
  } else {
    dep.to.end_date = dateToStr(date);
  }

  gantt.render();
});

Please check the full example: DHTMLX Snippet Tool.

This allows you to define dependencies between arbitrary dates inside the timeline, render them visually as custom SVG paths, and update these dependencies by dragging the handles at the start or end of the link.

Best regards,
Valeria Ivashkevich
DHTMLX Support Engineer

1 Like