IConfig

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

ITask[]

Array of task objects to display. See ITask for the full task shape.

ILink[]

Array of dependency link objects. See ILink for the full link shape.

ITaskType[]

Array of custom task type definitions. Each entry has { id: TID, label: string }. The built-in types are task, summary, and milestone.

(string | number)[]

Array of task IDs that are initially selected. Supports multi-selection.

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

IScaleConfig[]

Array of scale row configurations that define the time header. See IScaleConfig.

IGanttColumn[] | false

Array of grid column definitions. Pass false to hide the grid entirely. See IGanttColumn.

Date

Explicit start date of the visible chart range. When omitted and autoScale is true, the range is derived from task dates.

Date

Explicit end date of the visible chart range.

number

default:"100"

Width in pixels of a single lengthUnit cell in the chart.

number

default:"38"

Height in pixels of each task row.

number

default:"30"

Height in pixels of each scale header row.

IMarker[]

Array of vertical marker lines to display on the chart. Each marker has { start: Date, text?: string, css?: string }. PRO feature.

Behavior props

default:"day"

The time unit that one chart cell represents. Must be less than or equal to the smallest scales unit.

'day' | 'hour'

default:"day"

The unit used for task duration values and for lag in links.

boolean

default:"true"

When true, the chart range is automatically calculated to fit all task dates. Overrides start and end when both are provided.

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.

boolean

default:"false"

Enables the undo/redo history stack. Use api.exec("undo", {}) and api.exec("redo", {}) to navigate history.

boolean

default:"false"

Shows a separate area for tasks without scheduled dates (unscheduled: true).

boolean

default:"false"

Renders baseline bars using base_start / base_end fields on tasks.

{ type: 'all' | 'closest' }

Displays rollup bars inside summary tasks. "all" shows all children; "closest" shows only direct children.

ICriticalPathConfig | null

Highlights the critical path on the chart. "strict" requires zero float; "flexible" allows minor slack.

IScheduleConfig

Auto-scheduling configuration. { type: "forward", auto: boolean }. When auto: true, tasks are rescheduled automatically on dependency changes.

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.

boolean

default:"false"

Renders slack (float) bars alongside tasks to show scheduling flexibility.

boolean

default:"false"

Enables split task rendering using the segments field on tasks.

Calendar

A Calendar instance defining working days and hours. Used for scheduling and duration calculations.

Date

Explicit project start date used as the lower bound for auto-scaling.

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.

(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));
}} />

boolean

default:"false"

Disables all editing interactions — dragging, resizing, and in-grid editing.

'column' | 'full'

Controls cell border rendering. "column" shows vertical borders only; "full" shows a full grid.

(date: Date, unit: 'day' | 'hour') => string

Function returning a CSS class for a given date cell — used to highlight weekends, holidays, etc.

Component

A custom Svelte component rendered inside each task bar. Receives data (the task object) and api.

Components

Data Types

API Object

Data Provider

TypeScript definition

Data props

Display props

Behavior props

PRO feature props

Component-only props

​TypeScript definition

​Data props

​Display props

​Behavior props

​PRO feature props

​Component-only props

TypeScript definition

Data props

Display props

Behavior props

PRO feature props

Component-only props