Skip to main content
The <Gantt> component renders the full Gantt chart — timeline, grid, task bars, and dependency links. All other SVAR components (Toolbar, Editor, ContextMenu, Tooltip) connect to it through the IApi instance exposed via the init prop or a ref.

​
Import

import { Gantt } from '@svar-ui/react-gantt';
import '@svar-ui/react-gantt/all.css';

​
Basic usage

import { Gantt } from '@svar-ui/react-gantt';
import '@svar-ui/react-gantt/all.css';

const tasks = [
  {
    id: 1,
    text: 'Project planning',
    start: new Date(2024, 5, 1),
    duration: 5,
    progress: 40,
    type: 'task',
    parent: 0,
  },
];

const scales = [
  { unit: 'month', step: 1, format: '%F %Y' },
  { unit: 'day',   step: 1, format: '%j' },
];

export default function App() {
  return <Gantt tasks={tasks} scales={scales} />;
}

​
Props

​
Data

​
tasks
ITask[]
default:"[]"
Array of task objects to render. Each task requires at minimum an id, type, and either start+duration or start+end.
interface ITask {
  id: number | string;
  text?: string;
  start?: Date;
  end?: Date;
  duration?: number;
  progress?: number;
  type: 'task' | 'summary' | 'milestone';
  parent?: number | string;
  open?: boolean;
  lazy?: boolean;
  [key: string]: any;
}
​
links
ILink[]
default:"[]"
Array of dependency link objects connecting tasks.
interface ILink {
  id: number | string;
  source: number | string;
  target: number | string;
  type: 'e2s' | 's2s' | 'e2e' | 's2e';
}
Link type values: 'e2s' (end-to-start), 's2s' (start-to-start), 'e2e' (end-to-end), 's2e' (start-to-end).
​
selected
(number | string)[]
default:"[]"
Array of task IDs that are selected. Use for controlled selection.
​
activeTask
number | string | null
default:"null"
ID of the task whose editor is currently open. Use for controlled editor state.

​
Timeline

​
scales
IScaleConfig[]
Time scale rows displayed in the timeline header. Defaults to a two-row month/day scale.
interface IScaleConfig {
  unit: 'minute' | 'hour' | 'day' | 'week' | 'month' | 'quarter' | 'year';
  step: number;
  format: string; // strftime-style format string
}
Default value:
[
  { unit: 'month', step: 1, format: '%F %Y' },
  { unit: 'day',   step: 1, format: '%j' },
]
​
start
Date | null
default:"null"
Explicit start of the visible timeline range. When null and autoScale is true, the range is derived from task dates.
​
end
Date | null
default:"null"
Explicit end of the visible timeline range. When null and autoScale is true, the range is derived from task dates.
​
lengthUnit
'day' | 'hour'
default:"'day'"
The unit used to measure the timeline length — either 'day' or 'hour'.
​
durationUnit
'day' | 'hour'
default:"'day'"
The unit used to interpret the duration field on each task.
​
cellWidth
number
default:"100"
Width in pixels of each timeline cell (one lengthUnit).
​
cellHeight
number
default:"38"
Height in pixels of each task row.
​
scaleHeight
number
default:"36"
Height in pixels of each scale header row.
​
autoScale
boolean
default:"true"
When true, the timeline start and end dates are automatically derived from the task data if start and end are not provided.
​
zoom
boolean | IZoomConfig
default:"false"
Enables mouse-wheel zoom on the timeline. Pass true to use default zoom levels, or an IZoomConfig object to configure custom levels.
interface IZoomConfig {
  levels: IZoomLevel[];
}
interface IZoomLevel {
  minCellWidth?: number;
  maxCellWidth?: number;
  scales: IScaleConfig[];
}
​
markers
IMarker[]
default:"[]"
Array of vertical marker objects drawn on the timeline. PRO feature.
interface IMarker {
  id?: number | string;
  start: Date;
  end?: Date;
  css?: string;
  text?: string;
}

​
Grid

​
columns
false | IColumnConfig[]
Grid column definitions. Pass false to hide the grid entirely. Defaults to the built-in defaultColumns (task name + add button).
interface IColumnConfig {
  id: string;
  header?: string | { text: string; [key: string]: any };
  width?: number;
  flexGrow?: number;
  align?: 'left' | 'center' | 'right';
  cell?: FC<{ data: ITask; [key: string]: any }>;
  editor?: { comp: string; config?: object };
}

​
Task types

​
taskTypes
ITaskType[]
Definitions for the available task types (task, summary, milestone). Defaults to defaultTaskTypes.
interface ITaskType {
  id: string;
  label: string;
}

​
Display

​
cellBorders
'column' | 'full'
default:"'full'"
Controls the grid lines drawn in the timeline. 'column' draws only vertical column borders; 'full' draws both horizontal and vertical borders.
​
taskTemplate
FC<{ data: ITask; api: IApi; onaction: (ev: { action: string; data: Record<string, any> }) => void }>
Custom React component rendered inside each task bar. Receives the task data, the IApi instance, and an onaction callback for dispatching custom actions.
​
highlightTime
(date: Date, unit: 'day' | 'hour') => string
Function called for each cell in the timeline. Return a CSS class string to apply custom background styling (for example to highlight weekends). When a calendar prop is set, this is overridden by calendar-based highlighting.

​
Editing

​
readonly
boolean
default:"false"
When true, disables all user interaction — drag-and-drop, inline editing, and dependency drawing.
​
undo
boolean
default:"false"
Enables undo/redo history. PRO feature.

​
PRO features

​
baselines
boolean
default:"false"
Enables baseline bars drawn below each task bar, showing the originally planned dates. PRO feature.
​
unscheduledTasks
boolean
default:"false"
When true, tasks without a start date are shown as unscheduled in a dedicated row. PRO feature.
​
criticalPath
object | null
default:"null"
Critical path configuration object. When set, tasks on the critical path are highlighted. PRO feature.
​
schedule
{ type?: 'forward'; auto?: boolean }
default:"{ type: 'forward' }"
Auto-scheduling mode. { type: 'forward' } enables basic forward scheduling. { auto: true } enables full auto-scheduling where all task dates are recalculated from dependencies. PRO feature.
​
projectStart
Date | null
default:"null"
Project start date used by the auto-scheduler. PRO feature.
​
projectEnd
Date | null
default:"null"
Project end date used by the auto-scheduler. PRO feature.
​
calendar
object | null
default:"null"
Work calendar instance (created via the PRO calendar API) that defines working days and hours. When set, overrides highlightTime. PRO feature.
​
splitTasks
boolean
default:"false"
Enables split-task segments so a single task can have non-contiguous date ranges. PRO feature.
​
summary
object | null
default:"null"
Summary task automation configuration. PRO feature.

​
Lifecycle

​
init
(api: IApi) => void
Callback invoked once after the component mounts with the IApi instance. This is the primary way to access the API and wire up companion components.
const [api, setApi] = useState();

<Gantt init={setApi} tasks={tasks} />

​
Event callbacks

Gantt actions are surfaced as on-prefixed callback props derived from the internal TMethodsConfig action map. Each callback receives the action payload as its argument.
​
onSelectTask
(ev: { id: number | string }) => void
Fires when a task is selected.
​
onUpdateTask
(ev: { id: number | string; task: Partial<ITask>; inProgress?: boolean }) => void
Fires when a task’s data is updated (move, resize, inline edit, or editor save).
​
onAddTask
(ev: { task: Partial<ITask>; target?: number | string; mode?: 'before' | 'after' | 'child' }) => void
Fires when a new task is added.
​
onDeleteTask
(ev: { id: number | string }) => void
Fires when a task is deleted.
​
onMoveTask
(ev: { id: number | string; mode: 'up' | 'down' | string }) => void
Fires when a task is moved in the tree order.
​
onCopyTask
(ev: { id: number | string }) => void
Fires when a task is copied.
​
onCutTask
(ev: { id: number | string }) => void
Fires when a task is cut.
​
onPasteTask
(ev: { id?: number | string }) => void
Fires when a task is pasted.
​
onIndentTask
(ev: { id: number | string }) => void
Fires when a task is indented (nested under the task above).
​
onUnindentTask
(ev: { id: number | string }) => void
Fires when a task is unindented (moved up one level in the tree).
​
onAddLink
(ev: { link: ILink }) => void
Fires when a dependency link is created.
​
onDeleteLink
(ev: { id: number | string }) => void
Fires when a dependency link is deleted.
​
onShowEditor
(ev: { id: number | string | null }) => void
Fires when the task editor is opened or closed (id is null on close).
​
onScrollChart
(ev: { left: number; top: number }) => void
Fires when the timeline is scrolled.
​
onUndo
(ev?: any) => void
Fires when an undo action is performed. PRO feature.
​
onRedo
(ev?: any) => void
Fires when a redo action is performed. PRO feature.

​
Ref API

You can attach a ref to <Gantt> to access the IApi object imperatively. The ref exposes the same object as the init callback. 
import { useRef } from 'react';
import { Gantt } from '@svar-ui/react-gantt';

export default function App() {
  const ganttRef = useRef(null);

  function addTask() {
    ganttRef.current?.exec('add-task', {
      task: { text: 'New task', type: 'task' },
    });
  }

  return (
    <>
      <button onClick={addTask}>Add task</button>
      <Gantt ref={ganttRef} tasks={[]} />
    </>
  );
}

​
IApi methods

​
exec
(action: string, data: object) => void
Dispatches a named action to the Gantt store. Common actions: 'add-task', 'update-task', 'delete-task', 'select-task', 'show-editor', 'move-task', 'undo', 'redo'.
​
on
(event: string, handler: (payload: any) => void) => void
Subscribes to a named action event. The handler is called after the action completes.
​
intercept
(event: string, handler: (payload: any) => boolean | void) => void
Subscribes to an action before it is processed. Return false from the handler to cancel the action.
​
detach
(handler: Function) => void
Removes an event or intercept subscription.
​
getState
() => IConfig
Returns a snapshot of the current Gantt state (tasks, links, scales, etc.).
​
getReactiveState
() => Record<string, any>
Returns the reactive (observable) state object.
​
getTask
(id: number | string) => ITask | null
Returns a single task by ID, or null if not found.
​
serialize
() => { tasks: ITask[]; links: ILink[] }
Returns a plain serialisable snapshot of all tasks and links.
​
getHistory
() => object
Returns the current undo/redo history state. PRO feature.
​
getTable
(waitRender?: boolean) => Promise<object> | object
Returns the internal grid table API. Pass true to wait one tick for the DOM to finish rendering.
​
getStores
() => { data: DataStore }
Returns the internal data store(s) for low-level access.
​
setNext
(bus: EventBus) => EventBus
Chains an additional event bus at the end of the action pipeline.

​
Usage with Toolbar and Editor

import { useState } from 'react';
import { Gantt, Toolbar, Editor } from '@svar-ui/react-gantt';
import '@svar-ui/react-gantt/all.css';

export default function App() {
  const [api, setApi] = useState();

  return (
    <>
      <Toolbar api={api} />
      <div style={{ display: 'flex', flex: 1 }}>
        <Gantt
          init={setApi}
          tasks={tasks}
          links={links}
          scales={scales}
        />
        {api && <Editor api={api} />}
      </div>
    </>
  );
}

​
Handling events

<Gantt
  tasks={tasks}
  onSelectTask={({ id }) => console.log('selected', id)}
  onUpdateTask={({ id, task }) => {
    // persist changes to your backend
    saveTask(id, task);
  }}
  onAddTask={({ task }) => {
    // generate a real ID and push to server
    saveNewTask(task);
  }}
/>
Alternatively, use api.on() inside the init callback: 
<Gantt
  init={(api) => {
    api.on('update-task', ({ id, task }) => saveTask(id, task));
    api.on('add-task',    ({ id }) => api.exec('show-editor', { id }));
  }}
  tasks={tasks}
/>

Build docs developers (and LLMs) love

Get started for freeTalk to us