Task Links (Dependencies)

Links in the JavaScript Gantt chart display dependencies between tasks. Each link identifies its source and target task and the relationship between their start or finish dates.

Use the interactive Gantt links demo to compare right-angled and curved shapes, change the line and arrow sizes, and adjust the hover target width. Hover over a link to highlight it, or right-click to open its context menu.

Create Task Dependencies

Add links to the links array using task IDs. This example connects the finish of Design to the start of Implementation:

JavaScript

const dp = new DayPilot.Gantt("dp", {
  startDate: "2026-10-01",
  days: 31,
  tasks: [
    {id: "design", text: "Design", start: "2026-10-02", end: "2026-10-06"},
    {id: "build", text: "Implementation", start: "2026-10-07", end: "2026-10-12"}
  ],
  links: [
    {id: "design-build", from: "design", to: "build", type: "FinishToStart"}
  ],
  linkShape: "RightAngled",
  linkWidth: 2,
  linkArrowSize: 8,
  linkHitAreaMinWidth: 12
});
dp.init();

The example assumes that the DayPilot library is loaded and a <div id="dp"></div> element is present. The dependency describes the relationship; adding a link does not automatically move either task.

Angular

Set the options and data in a typed DayPilot.GanttConfig object and bind it to the Angular component.

import {Component} from '@angular/core';
import {DayPilot, DayPilotModule} from 'daypilot-pro-angular';

@Component({
  selector: 'app-gantt-example',
  standalone: true,
  imports: [DayPilotModule],
  template: `<daypilot-gantt [config]="config"></daypilot-gantt>`
})
export class GanttExampleComponent {
  config: DayPilot.GanttConfig = {
    startDate: "2026-10-01",
    days: 31,
    linkShape: "RightAngled",
    linkWidth: 2,
    linkArrowSize: 8,
    linkHitAreaMinWidth: 12,
    tasks: [
      {id: "design", text: "Design", start: "2026-10-02", end: "2026-10-06"},
      {id: "build", text: "Implementation", start: "2026-10-07", end: "2026-10-12"}
    ],
    links: [{id: "design-build", from: "design", to: "build", type: "FinishToStart"}]
  };
}

React

Pass the display options and data as individual props to DayPilotGantt.

import {DayPilotGantt} from 'daypilot-pro-react';

const tasks = [
  {id: "design", text: "Design", start: "2026-10-02", end: "2026-10-06"},
  {id: "build", text: "Implementation", start: "2026-10-07", end: "2026-10-12"}
];

const links = [{id: "design-build", from: "design", to: "build", type: "FinishToStart"}];

export default function GanttExample() {
  return (
    <DayPilotGantt
      startDate="2026-10-01"
      days={31}
      linkShape="RightAngled"
      linkWidth={2}
      linkArrowSize={8}
      linkHitAreaMinWidth={12}
      tasks={tasks}
      links={links}
    />
  );
}

Vue

This Vue single-file component binds the options and data directly to DayPilotGantt.

<script setup>
import {DayPilotGantt} from 'daypilot-pro-vue';

const tasks = [
  {id: "design", text: "Design", start: "2026-10-02", end: "2026-10-06"},
  {id: "build", text: "Implementation", start: "2026-10-07", end: "2026-10-12"}
];

const links = [{id: "design-build", from: "design", to: "build", type: "FinishToStart"}];
</script>

<template>
  <DayPilotGantt
    startDate="2026-10-01"
    :days="31"
    linkShape="RightAngled"
    :linkWidth="2"
    :linkArrowSize="8"
    :linkHitAreaMinWidth="12"
    :tasks="tasks"
    :links="links"
  />
</template>

Adjust Link Appearance

Choose "RightAngled" or "Curved" using linkShape. Set linkWidth and linkArrowSize to pixel values, or use "Auto" for sizing from the theme.

The linkHitAreaMinWidth property sets the minimum width of the pointer target without making the visible line thicker. Use it to make thin links easier to hover over or select.

Link Configuration and Interaction

• Link Context Menu
• Link Creating
• Link Customization
• Link Loading
• Link Types