Skip to main content

links

Description​

Optional. Defines links between tasks in Gantt

An array of objects containing the links data

Usage​

links?:
  {
    id?: string | number,
    source: string | number,
    target: string | number,
    type: "e2s" | "s2s" | "e2e" | "s2e",
    lag?: number
  }[];

Parameters​

  • id - (optional) the link ID

  • source - (required) the source task ID

  • target - (required) the target task ID

  • type - (required) the link type; possible link type values:

    • e2s - "End-to-start": the successor starts no earlier than the predecessor ends
    • s2s - "Start-to-start": the successor starts no earlier than the predecessor starts
    • e2e - "End-to-end": the successor ends no earlier than the predecessor ends
    • s2e - "Start-to-end": the successor ends no earlier than the predecessor starts

  • lag - (optional) the minimum gap (in days) between predecessor and successor tasks, for links of any type in auto scheduling mode. Can be negative | PRO feature

    • Default: 0 — the successor task is placed no earlier than the date the link requires

    lag also affects critical path calculations when auto scheduling is enabled.

Example​

<script setup>
  import { getData } from "./common/data";
  import { Gantt } from "@svar-ui/vue-gantt";
  
  const {tasks, scales, columns} = getData();
  
  const links = [
    { id: 1, source: 3, target: 4, type: "e2s" },
    { id: 2, source: 1, target: 2, type: "e2s" },
    { id: 21, source: 8, target: 1, type: "s2s" },
    { id: 22, source: 1, target: 6, type: "s2s" },
];
</script>

<template>
  <Gantt :tasks="tasks" :scales="scales" :columns="columns" :links="links" />
</template>

Related articles: