# Gantt chart mode Set one `gantt` prop and the grid renders its rows as a **task table beside a time chart**: one bar per row, placed by its start and finish, nested into a work-breakdown tree, with arrows between linked tasks. It is the same ``, the same `data` and `columns` - only the presentation changes. Like [Kanban board mode](https://svgrid.com/docs/help/rows/kanban-board/) and the [scheduler](https://svgrid.com/docs/help/rows/scheduler/), the Gantt is a pure **view of the grid**: it renders the grid's already filtered, sorted and searched rows and writes back only through callbacks - it never mutates your data. > **Enterprise feature.** The `gantt` prop and its config types are part of the > free grid, but the *renderer* ships in `@svgrid/enterprise`. Register it once > and the view lights up: > > ```ts > import { setLicenseKey, enableGanttView } from '@svgrid/enterprise' > setLicenseKey('YOUR-KEY') // omit to evaluate, with the watermark and console message > enableGanttView() > ``` > > `installEnterprise(api)` also calls `enableGanttView()` for you. Without the > renderer registered, a grid with a `gantt` prop shows an upgrade note. > Live demo: Project plan - https://svgrid.com/demos/474-gantt-intro/ The whole of it is one prop. This is the grid above, with the columns it shows in the task table and the fields the chart reads: ```svelte r.id} {gantt} /> ``` ## Pages - [Getting started](https://svgrid.com/docs/help/gantt/start/): the one required option, how dates are read, bars and milestones, the task table, and the Gantt / Table toggle. - [Work breakdown](https://svgrid.com/docs/help/gantt/work-breakdown/): phases from a parent field, rolled-up summary bars, collapse, and what a folded phase still does. - [Dependencies](https://svgrid.com/docs/help/gantt/dependencies/): links and their four types, lag, violated and cyclic links, and auto-reschedule. - [Editing](https://svgrid.com/docs/help/gantt/editing/): drag, resize, the progress grip, drawing links, the drawer and menu, keyboard, undo. - [The axis and working time](https://svgrid.com/docs/help/gantt/axis-and-working-time/): zoom presets, the window, non-working days and holidays, the today line, folding weekends out. - [Critical path, baselines and constraints](https://svgrid.com/docs/help/gantt/critical-path/): the planning layer - slack, the ringed chain, ghost bars, pinned dates. - [Resource load](https://svgrid.com/docs/help/gantt/resources/): who is on what, the load histogram, capacity. - [Custom bars, tooltips and menus](https://svgrid.com/docs/help/gantt/customizing/): the `task` and `tooltip` snippets, the context menu, colours and the CSS hooks. - [The same rows as a grid, a scheduler and a board](https://svgrid.com/docs/help/gantt/views/): switching views over one array, and the date shape that keeps them in step. - [Config reference](https://svgrid.com/docs/help/gantt/api/): every option on `GanttConfig` and the Enterprise `GanttProConfig`, with the page that explains it. ## More examples ### One plan, four views The same rows as a table, a Gantt, a resource timeline and a Kanban board, each writing back to the one array. > Live demo: One plan, four views: Grid, Gantt, Scheduler, Kanban - https://svgrid.com/demos/478-gantt-four-views/ ### Product roadmap A year in quarters: initiatives per team with the owner and a status chip drawn inside each bar, releases as milestones, and a status filter. > Live demo: Product roadmap - a year in quarters - https://svgrid.com/demos/479-gantt-roadmap/ ### A programme of 640 tasks Forty sites of sixteen linked tasks each, opening folded to one bar per site, with the critical path across every chain and windowed rows. > Live demo: A programme of 40 sites, 640 tasks - https://svgrid.com/demos/480-gantt-program/ ### Portfolio office A project console: a rail of projects, live KPIs, and a dockable workspace with the editable plan over a risk register and a workload chart. > Live demo: Portfolio office - project console - https://svgrid.com/demos/481-gantt-portfolio-console/ ## See also - [Scheduler / calendar mode](https://svgrid.com/docs/help/rows/scheduler/) - the resource and booking view. Use it for appointments and shifts; use the Gantt for a project plan. - [Kanban board mode](https://svgrid.com/docs/help/rows/kanban-board/) - the same rows as cards in lanes. - [Tree data](https://svgrid.com/docs/help/rows/tree-data/) - hierarchy in the table itself. --- SvGrid is the Svelte 5 data grid (`npm install @svgrid/grid`, MIT). This page: https://svgrid.com/docs/help/gantt/ . All docs: https://svgrid.com/llms.txt