Dependencies

When one task depends on another, connect their bars with an arrow. People can see the relationship and add or remove links directly on the timeline.

Dependencies describe the plan; they do not reschedule it. Connecting Design to Build does not move Build's start date.

Add a dependency to your dataCopy Anchor Link

Store the dependency on the task that waits. If Build waits for Design, put the entry on Build and set targetId to Design's id.

const tasks: Task[] = [
  {
    id: 'design',
    name: 'Design',
    startDate: '2026-03-02',
    endDate: '2026-03-06',
    parentId: null,
    sequence: '1',
  },
  {
    id: 'build',
    name: 'Build',
    startDate: '2026-03-06',
    endDate: '2026-03-13',
    parentId: null,
    sequence: '2',
    dependencies: [{ targetId: 'design', type: 'FS' }],
  },
];

This draws an arrow from Design to Build. Import Task from @jaeungkim/gantt-chart; see task types for the complete data shape.

The name targetId can be surprising: it identifies the predecessor, not the task at the arrowhead. Each entry also requires a link type.

Choose the relationshipCopy Anchor Link

The first letter names the predecessor's edge; the second names the successor's edge. S is start and F is finish.

These are scheduling meanings, not date constraints enforced by the chart. Your app decides whether the dates satisfy the relationship.

Draw a linkCopy Anchor Link

1. Hover or select the predecessor bar to reveal its connector dots.
2. Drag from its start or finish dot to the successor's row.
3. Release near the successor's start or finish. The preview shows the link type before you release.

The whole destination row accepts the drop. Its finish zone is near the bar's right edge and extends to the right; the rest counts as start. In a lane containing several bars, the nearest bar receives the link.

The timeline scrolls when you drag near its edges. Press Escape to cancel. On touch devices without hover, the connector dots remain visible.

Drawing rejects self-links, duplicate links between the same ordered pair, and circular dependencies. A rejected target shows a reason and does not change the data. Those checks apply to drawing only; validate imported dependencies in your app.

Save or reject changesCopy Anchor Link

Keep onTasksChange connected to your state to retain created and deleted links. Add a synchronous guard when your app permits only certain relationships. This example accepts finish-to-start links only:

<ReactGanttChart
  tasks={tasks}
  onTasksChange={setTasks}
  onDependencyCreate={({ type }) => {
    if (type !== 'FS') return false;
  }}
/>

Returning exactly false from onDependencyCreate cancels the change. onDependencyDelete works the same way. These guards do not await promises; perform server validation in your application's save flow.

Use allowLinkCreate and allowLinkDelete to control whether links can be edited. Disabling creation on a task blocks both incoming and outgoing links. Deletion permission belongs to the successor, which owns the entry.

See props for callback signatures and interaction configuration for permission precedence.

Remove or change a linkCopy Anchor Link

Click an arrow, then click its delete button. You can also press Delete or Backspace after selecting it; Escape clears the selection.

If a task bar still has keyboard focus, the delete key can also delete that task. Use the arrow's delete button to avoid that overlap. See keyboard controls.

To change a link's type, update its entry in your tasks array. There is no built-in type editor. Keep one entry per predecessor and successor pair: deletion removes all entries for that pair, even if their types differ.

When an arrow is missingCopy Anchor Link

Both tasks must be visible for their arrow to render. Filtering out a task or collapsing its parent hides the arrow without removing the dependency. An entry referring to an unknown task id is also skipped.

Link creation requires a pointer. There is no keyboard flow for creating a link or selecting an arrow, and arrows cannot be selected as a group. Routes are automatic and may cross other bars.