Skip to main content
The IConfig interface defines all configurable properties of the <Gantt> component. Pass these as props directly on the component.

​
TypeScript definition

export interface IConfig {
  tasks?: ITask[];
  links?: ILink[];
  taskTypes?: ITaskType[];
  selected?: TID[];
  activeTask?: TID | { id: TID; segmentIndex: number };
  scales?: IScaleConfig[];
  columns?: IGanttColumn[] | false;
  start?: Date;
  end?: Date;
  lengthUnit?: TLengthUnit;
  durationUnit?: TDurationUnit;
  cellWidth?: number;
  cellHeight?: number;
  scaleHeight?: number;
  zoom?: boolean | IZoomConfig;
  autoScale?: boolean;
  schedule?: IScheduleConfig;
  undo?: boolean;
  unscheduledTasks?: boolean;
  baselines?: boolean;
  rollups?: { type: "all" | "closest" };
  markers?: IMarker[];
  criticalPath?: ICriticalPathConfig;
  projectStart?: Date;
  projectEnd?: Date;
  calendar?: Calendar;
  splitTasks?: boolean;
  summary?: ISummaryConfig;
  slack?: boolean;
}

​
Data props

​
tasks
ITask[]
Array of task objects to display. See ITask for the full task shape.
​
links
ILink[]
Array of dependency link objects. See ILink for the full link shape.
​
taskTypes
ITaskType[]
Array of custom task type definitions. Each entry has { id: TID, label: string }. The built-in types are task, summary, and milestone.
​
selected
(string | number)[]
Array of task IDs that are initially selected. Supports multi-selection.
​
activeTask
string | number | { id: TID; segmentIndex: number }
ID of the task whose editor panel is open, or an object specifying both the task ID and a segment index for split tasks.

​
Display props

​
scales
IScaleConfig[]
Array of scale row configurations that define the time header. See IScaleConfig.
​
columns
IGanttColumn[] | false
Array of grid column definitions. Pass false to hide the grid entirely. See IGanttColumn.
​
start
Date
Explicit start date of the visible chart range. When omitted and autoScale is true, the range is derived from task dates.
​
end
Date
Explicit end date of the visible chart range.
​
cellWidth
number
default:"100"
Width in pixels of a single lengthUnit cell in the chart.
​
cellHeight
number
default:"38"
Height in pixels of each task row.
​
scaleHeight
number
default:"30"
Height in pixels of each scale header row.
​
markers
IMarker[]
Array of vertical marker lines to display on the chart. Each marker has { start: Date, text?: string, css?: string }. PRO feature.

​
Behavior props

​
lengthUnit
'minute' | 'hour' | 'day' | 'week' | 'month' | 'quarter' | 'year'
default:"day"
The time unit that one chart cell represents. Must be less than or equal to the smallest scales unit.
​
durationUnit
'day' | 'hour'
default:"day"
The unit used for task duration values and for lag in links.
​
autoScale
boolean
default:"true"
When true, the chart range is automatically calculated to fit all task dates. Overrides start and end when both are provided.
​
zoom
boolean | IZoomConfig
Enables zoom on mouse-wheel scroll. Pass true for defaults or an IZoomConfig object for custom zoom levels.
interface IZoomConfig {
  level?: number;
  minCellWidth?: number;
  maxCellWidth?: number;
  levels?: Array<{
    minCellWidth: number;
    maxCellWidth: number;
    scales: IScaleConfig[];
  }>;
}

​
PRO feature props

The following props require a PRO license. They are silently ignored in the Community edition.
​
undo
boolean
default:"false"
Enables the undo/redo history stack. Use api.exec("undo", {}) and api.exec("redo", {}) to navigate history.
​
unscheduledTasks
boolean
default:"false"
Shows a separate area for tasks without scheduled dates (unscheduled: true).
​
baselines
boolean
default:"false"
Renders baseline bars using base_start / base_end fields on tasks.
​
rollups
{ type: 'all' | 'closest' }
Displays rollup bars inside summary tasks. "all" shows all children; "closest" shows only direct children.
​
criticalPath
ICriticalPathConfig | null
Highlights the critical path on the chart. "strict" requires zero float; "flexible" allows minor slack.
​
schedule
IScheduleConfig
Auto-scheduling configuration. { type: "forward", auto: boolean }. When auto: true, tasks are rescheduled automatically on dependency changes.
​
summary
ISummaryConfig
Summary task behavior: { autoProgress: boolean, autoConvert: boolean }. When autoProgress is true, parent progress is calculated from children. When autoConvert is true, a task with children is automatically converted to a summary.
​
slack
boolean
default:"false"
Renders slack (float) bars alongside tasks to show scheduling flexibility.
​
splitTasks
boolean
default:"false"
Enables split task rendering using the segments field on tasks.
​
calendar
Calendar
A Calendar instance defining working days and hours. Used for scheduling and duration calculations.
​
projectStart
Date
Explicit project start date used as the lower bound for auto-scaling.
​
projectEnd
Date
Explicit project end date used as the upper bound for auto-scaling.

​
Component-only props

The following props are available on the <Gantt> Svelte component but are not part of IConfig.
​
init
(api: IApi) => void
Callback invoked after the component mounts. Receives the IApi instance. Use this to attach event listeners, interceptors, and data providers.
<Gantt {tasks} {links} init={(api) => {
  api.on("select-task", ({ id }) => console.log("Selected:", id));
}} />
​
readonly
boolean
default:"false"
Disables all editing interactions — dragging, resizing, and in-grid editing.
​
cellBorders
'column' | 'full'
Controls cell border rendering. "column" shows vertical borders only; "full" shows a full grid.
​
highlightTime
(date: Date, unit: 'day' | 'hour') => string
Function returning a CSS class for a given date cell — used to highlight weekends, holidays, etc.
​
taskTemplate
Component
A custom Svelte component rendered inside each task bar. Receives data (the task object) and api.

Build docs developers (and LLMs) love

Get started for freeTalk to us