# Gantt: config reference Every option on the `gantt` prop, with the page that explains it. The base config (`GanttConfig`) ships in `@svgrid/grid`; the Enterprise superset (`GanttProConfig`) and the renderer ship in `@svgrid/enterprise`. ```ts import { SvGrid, type GanttConfig, type GanttDependency } from '@svgrid/grid' import { enableGanttView, type GanttProConfig } from '@svgrid/enterprise' enableGanttView() const cfg: GanttProConfig = { startField: 'start', endField: 'end' } ``` Every example on this page runs against one setup: ```svelte ``` ## Fields | Option | Purpose | Page | | --- | --- | --- | | `startField` *(required)* | Field holding each task's start. | [Getting started](https://svgrid.com/docs/help/gantt/start/#how-dates-are-read) | | `endField` | Field holding the finish. A date-only string is inclusive of its day. | [Getting started](https://svgrid.com/docs/help/gantt/start/#how-dates-are-read) | | `durationField` | Length in **working** days, used when `endField` is absent. | [Getting started](https://svgrid.com/docs/help/gantt/start/#how-dates-are-read) | | `titleField` | The task name. Defaults to the first column's field. | [Getting started](https://svgrid.com/docs/help/gantt/start/) | | `progressField` | Percent complete (0-100); drives the fill and the rollup. | [Bars, progress and milestones](https://svgrid.com/docs/help/gantt/start/#bars-progress-and-milestones) | | `parentField` | Parent task id - nests the rows into a work-breakdown tree. | [Work breakdown](https://svgrid.com/docs/help/gantt/work-breakdown/) | | `milestoneField` | Boolean marking a milestone. A zero-length task is one anyway. | [Bars, progress and milestones](https://svgrid.com/docs/help/gantt/start/#bars-progress-and-milestones) | | `colorField` / `color` | Per-task accent, or one for every bar. | [Colours](https://svgrid.com/docs/help/gantt/customizing/#colours-and-the-css-hooks) | ```svelte r.id} gantt={{ startField: 'start', endField: 'end', titleField: 'name', progressField: 'progress', parentField: 'parentId', milestoneField: 'milestone', colorField: 'color', }} /> ``` ## Dependencies | Option | Purpose | Page | | --- | --- | --- | | `dependencies` | Links as a flat list of `{ id, from, to, type?, lag? }`. `lag` is in days. | [Dependencies](https://svgrid.com/docs/help/gantt/dependencies/) | | `dependencyField` | Per-row links on the predecessor: objects, or successor ids. | [Where the links come from](https://svgrid.com/docs/help/gantt/dependencies/#where-the-links-come-from) | | `autoReschedule` | Cascade successors forward on an edit. Defaults to on with any link. | [Auto-reschedule](https://svgrid.com/docs/help/gantt/dependencies/#auto-reschedule) | | `respectWorkingTime` | Schedule in working time: moves and cascades land on working days and keep working lengths, slack is in working days. Default `true`. | [Auto-reschedule](https://svgrid.com/docs/help/gantt/dependencies/#auto-reschedule) | | `onDependenciesChange` | The cascaded shifts, `{ id, start, end }[]`. | [Auto-reschedule](https://svgrid.com/docs/help/gantt/dependencies/#auto-reschedule) | | `onDependencyAdd` | A link drawn by hand, as a `GanttDependency`. | [Drawing and removing links](https://svgrid.com/docs/help/gantt/dependencies/#drawing-and-removing-links) | | `onDependencyRemove` | A link removed from the arrow's menu, by id. | [Drawing and removing links](https://svgrid.com/docs/help/gantt/dependencies/#drawing-and-removing-links) | ```svelte r.id} gantt={{ startField: 'start', endField: 'end', parentField: 'parentId', dependencies, autoReschedule: false, }} /> ``` ## The axis | Option | Purpose | Page | | --- | --- | --- | | `zoom` | The preset the chart opens on: `day`, `week` (default), `month`, `quarter`, `year`. | [Zoom presets](https://svgrid.com/docs/help/gantt/axis-and-working-time/#zoom-presets) | | `zoomLevels` | The presets the stepper and Ctrl+wheel move between. | [Zoom presets](https://svgrid.com/docs/help/gantt/axis-and-working-time/#zoom-presets) | | `onZoomChange` | Fired with the new preset. | [Zoom presets](https://svgrid.com/docs/help/gantt/axis-and-working-time/#zoom-presets) | | `weekStartsOn` | First day of the week, 0-6 (default 0). | [Non-working days](https://svgrid.com/docs/help/gantt/axis-and-working-time/#non-working-days-and-holidays) | | `nonWorkingDays` / `holidays` / `showNonWorking` | Which days are off, and whether to shade them. | [Non-working days](https://svgrid.com/docs/help/gantt/axis-and-working-time/#non-working-days-and-holidays) | | `todayLine` | The dashed today line. On by default. | [The window](https://svgrid.com/docs/help/gantt/axis-and-working-time/#the-window) | | `minDate` / `maxDate` / `rangePaddingDays` | The axis window and its slack. | [The window](https://svgrid.com/docs/help/gantt/axis-and-working-time/#the-window) | ```svelte r.id} gantt={{ startField: 'start', endField: 'end', parentField: 'parentId', zoom: 'day', zoomLevels: ['day', 'week'], weekStartsOn: 1, rangePaddingDays: 3, }} /> ``` ## Layout and collapse | Option | Purpose | Page | | --- | --- | --- | | `tableColumns` | The task pane's columns, incl. `__duration`, `__progress`, `__slack`. | [The task table](https://svgrid.com/docs/help/gantt/start/#the-task-table) | | `tableWidth` | The pane's width in px (default 360); the splitter resizes it. | [The task table](https://svgrid.com/docs/help/gantt/start/#the-task-table) | | `rowHeight` | Height of one task row (default 32). | [Bars, progress and milestones](https://svgrid.com/docs/help/gantt/start/#bars-progress-and-milestones) | | `summaryBars` | Parents draw a rolled-up spine (default) or an ordinary bar. | [How a summary rolls up](https://svgrid.com/docs/help/gantt/work-breakdown/#how-a-summary-rolls-up) | | `labelPosition` | `'inside'`, `'right'` or `'none'` for the built-in label. | [The bar body](https://svgrid.com/docs/help/gantt/customizing/#the-bar-body) | | `collapsed` / `onCollapseChange` | Controlled work-breakdown collapse. | [Collapse](https://svgrid.com/docs/help/gantt/work-breakdown/#collapse) | | `searchable` / `searchPlaceholder` | The toolbar search box. | [Search, filter and sort](https://svgrid.com/docs/help/gantt/start/#search-filter-and-sort-flow-through) | ## Editing | Option | Purpose | Page | | --- | --- | --- | | `editable` | Drag to move, resize, set progress and draw links. | [Editing](https://svgrid.com/docs/help/gantt/editing/) | | `history` | Undo / redo with `Ctrl/Cmd+Z` and `Ctrl/Cmd+Shift+Z`. | [Undo and redo](https://svgrid.com/docs/help/gantt/editing/#undo-and-redo) | | `onTaskMove` / `onTaskResize` / `onProgressChange` | Fired with the new values; write them to your rows. | [What each gesture reports](https://svgrid.com/docs/help/gantt/editing/#what-each-gesture-reports) | | `onTaskAdd` / `onTaskDelete` | Create on a double-click or from the menu; delete from the menu, drawer or Delete key. | [Adding and deleting tasks](https://svgrid.com/docs/help/gantt/editing/#adding-and-deleting-tasks) | | `drawer` / `onTaskCommit` | The built-in detail drawer and its save callback. | [The drawer](https://svgrid.com/docs/help/gantt/editing/#the-drawer) | ```svelte r.id} gantt={{ startField: 'start', endField: 'end', parentField: 'parentId', progressField: 'progress', editable: true, history: true, drawer: true, onTaskMove: (e) => writeSpan(e.row, e.start, e.end), onTaskResize: (e) => writeSpan(e.row, e.start, e.end), onProgressChange: (e) => { e.row.progress = e.progress }, onTaskCommit: (e) => Object.assign(e.row, e.values), }} /> ``` ## Chrome | Option | Purpose | Page | | --- | --- | --- | | `task` | A snippet for a custom task-bar body. | [The bar body](https://svgrid.com/docs/help/gantt/customizing/#the-bar-body) | | `tooltip` / `tooltipDelay` | `true` for the built-in hover card, a snippet for your own, and its delay. | [The tooltip](https://svgrid.com/docs/help/gantt/customizing/#the-tooltip) | | `taskMenu` | Extra right-click items for a bar. | [The context menu](https://svgrid.com/docs/help/gantt/customizing/#the-context-menu) | ## Gantt Pro The Enterprise options, on `GanttProConfig`: | Option | Purpose | Page | | --- | --- | --- | | `criticalPath` / `onCriticalPathChange` | Ring the chain with no slack, and report its task ids. | [The critical path](https://svgrid.com/docs/help/gantt/critical-path/#the-critical-path) | | `baselineStartField` / `baselineEndField` | The agreed dates, drawn as a ghost bar under each task. | [Baselines](https://svgrid.com/docs/help/gantt/critical-path/#baselines) | | `constraintField` / `constraintDateField` | Pin a task's dates; the cascade stops at the constraint. | [Constraints](https://svgrid.com/docs/help/gantt/critical-path/#constraints) | | `resourceField` / `resources` | Who is on each task, and the ordered resource list. | [Resource load](https://svgrid.com/docs/help/gantt/resources/) | | `resourceHistogram` | The load strip: `true`, or `{ capacityField, height }`. | [The load strip](https://svgrid.com/docs/help/gantt/resources/#the-load-strip) | | `collapseWeekends` / `collapsedGapPx` | Fold non-working days out of the axis, and the marker's width. | [Folding weekends out](https://svgrid.com/docs/help/gantt/axis-and-working-time/#folding-weekends-out-of-the-axis) | ```svelte r.id} gantt={pro({ startField: 'start', endField: 'end', parentField: 'parentId', dependencies, criticalPath: true, tableColumns: ['name', '__slack'], collapseWeekends: true, })} /> ``` ## Event types All in `@svgrid/grid`: | Type | Fields | | --- | --- | | `GanttDependency` | `id`, `from`, `to`, `type?` (`'FS' \| 'SS' \| 'FF' \| 'SF'`), `lag?` in days. | | `GanttTaskMoveEvent` | `row`, `start`, `end`, and `subtree?` - the descendants moved with a phase, each `{ row, start, end }`. | | `GanttTaskResizeEvent` | `row`, `start`, `end`, `edge` (`'start' \| 'end'`). | | `GanttProgressChangeEvent` | `row`, `progress` (0-100). | | `GanttTaskCommitEvent` | `row`, `values` - the fields the drawer changed. | | `GanttZoom` | `'day' \| 'week' \| 'month' \| 'quarter' \| 'year'`. | | `GanttDrawerConfig` | `fields`, `title`, `side`, `size`, `submitLabel`, `columns` - the same shape as the scheduler's drawer. | `GanttConstraint` (`'ASAP' \| 'ALAP' \| 'MSO' \| 'MFO' \| 'SNET' \| 'SNLT' \| 'FNET' \| 'FNLT'`) is in `@svgrid/enterprise`. ## The helpers `@svgrid/enterprise` (and its `/gantt` entry point) also exports the pure functions the renderer is built from, for reports, tests and your own views: | Export | Does | | --- | --- | | `criticalPath(times, deps, cal?)`, `slackDays(result, id)` | The planning passes, in working time with a calendar. | | `resourceLoad(assignments, columns, opts)`, `overallocations(rows)` | The load strip's numbers. | | `resolveTasks`, `ganttTree`, `projectRange`, `ganttAxis`, `ganttScale` | Rows to bars, the tree, the window, the axis, the date-to-pixel scale. | | `makeCalendar`, `isWorkingDay`, `workingDays`, `addWorkingDays`, `startForWorkingDays`, `moveWorkingSpan`, `snapToWorkingDay` | Working-time arithmetic. | | `dependencyArrows`, `elbowPath` | The arrow geometry, shared with the scheduler's timeline. | ## See also - [Gantt chart mode](https://svgrid.com/docs/help/gantt/) - the hub, with every demo. - [Scheduler / calendar mode](https://svgrid.com/docs/help/rows/scheduler/) - the `scheduler` prop, whose drawer and resource types the Gantt shares. --- SvGrid is the Svelte 5 data grid (`npm install @svgrid/grid`, MIT). This page: https://svgrid.com/docs/help/gantt/api/ . All docs: https://svgrid.com/llms.txt