Lanes

When a timeline has many short tasks, one row per task can make it hard to scan. Give related tasks the same lane value to share rows wherever their dates allow.

Put tasks in a laneCopy Anchor Link

Add lane to each task you want to group. No chart prop is needed.

import { useState } from 'react';
import { ReactGanttChart, type Task } from '@jaeungkim/gantt-chart';
import '@jaeungkim/gantt-chart/style.css';

const initialTasks: Task[] = [
  { id: 'spec', name: 'Spec', lane: 'design', parentId: null, sequence: '1',
    startDate: '2026-09-01', endDate: '2026-09-04' },
  { id: 'review', name: 'Review', lane: 'design', parentId: null, sequence: '2',
    startDate: '2026-09-02', endDate: '2026-09-03' },
  { id: 'handoff', name: 'Handoff', lane: 'design', parentId: null, sequence: '3',
    startDate: '2026-09-07', endDate: '2026-09-09' },
];

export function LaneChart() {
  const [tasks, setTasks] = useState(initialTasks);

  return (
    <ReactGanttChart
      tasks={tasks}
      onTasksChange={setTasks}
      showTaskList
      height={360}
    />
  );
}

This example renders two rows:

Tasks without a lane, or with an empty string, keep their own rows.

Understand the layoutCopy Anchor Link

Within a lane, tasks are placed by start date into the first available row. Tasks can touch at their endpoints and still share a row. Overlaps create additional rows; they do not change task dates.

The lane's rows appear at its first member's position in sequence order. Lane values match exactly, so design and Design are separate lanes.

Lanes group tasks across the list, regardless of parentId. Use a distinct lane value for each group that should stay separate.

Select tasks on a shared rowCopy Anchor Link

The task list shows the first task by start date, followed by a +N badge for the other tasks. Clicking that list entry selects the first task. Click an individual bar to select another member, or use keyboard navigation.

Dependencies still connect individual tasks. See Dependencies for creating and editing links.

Before you integrateCopy Anchor Link

• A lane is a layout grouping, not a labeled resource section. The lane string is not shown, and there is no API for empty lanes or lane headers.
• Rows containing multiple tasks cannot be dragged to reorder them or used as reorder targets. See Reordering rows.
• Avoid combining summary tasks into shared rows. Hierarchy collapse works with task ids, while a shared row represents several tasks.
• Validate dates before rendering. Invalid dates can prevent tasks from sharing a row as expected.

For the task field definition, see Task. For row data passed through the chart, see GanttRow.