Split Tasks

A task can be split into several worked segments separated by gaps on a single row: work Monday to Wednesday, pause, resume Friday. The segments render as separate bar pieces joined by a thin connector, while the task keeps one row and one identity.

Defining segments in data

Add a segments array to a task. Each TaskSegment has a start and an end, parsed with inputDateFormat:

const gantt = new ApexGantt(el, {
  series: [
    {
      id: 't1',
      name: 'Build',
      segments: [
        { start: '2026-06-01', end: '2026-06-04' },
        { start: '2026-06-08', end: '2026-06-12' },
      ],
    },
  ],
})

The task's own startTime / endTime are the envelope (first segment start to last segment end) and are derived automatically. Summary rollups, dependencies, the timeline header, and the Duration column all keep working against that envelope.

How split bars behave

  • The bar draws one filled piece per segment, joined by a thin connector.
  • Progress fills the worked spans left to right.
  • Dragging the bar moves all segments together.
  • Resizing a handle adjusts the outer segment.

Splitting at runtime

splitTask(id, at, options?) cuts the segment containing at so its first piece ends at at and the rest resumes at options.resumeAt (default: the next day; pass a later date to open a wider gap). A task with no segments yet is treated as a single span.

gantt.splitTask('t1', '2026-06-08', { resumeAt: '2026-06-12' })

splitTask() routes through updateTask, so it is validated, undoable, and emits a taskUpdate event. It is a no-op on milestones, summary bars, or when at does not fall strictly inside a worked span.

Merge a task back into one contiguous bar by clearing its segments:

gantt.updateTask('t1', { segments: [] })

Query whether a task is currently split:

if (gantt.isSplit('t1')) { /* ... */ }

React example

import { ApexGanttChart } from 'react-apexgantt'
import type { TaskInput } from 'react-apexgantt'

const tasks: TaskInput[] = [
  {
    id: 'build',
    name: 'Build',
    segments: [
      { start: '2026-06-01', end: '2026-06-04' },
      { start: '2026-06-08', end: '2026-06-12' },
    ],
  },
]

export default function SplitTaskGantt() {
  return <ApexGanttChart tasks={tasks} height="400px" />
}