# Gantt: getting started The one option a Gantt needs, how it reads your dates, what a bar, a milestone and a summary look like, and the task table beside the chart. The other Gantt pages assume this one. The examples on this page share one setup. The renderer ships in `@svgrid/enterprise` and is registered once; the rows are anchored on the current week so the today line is always in view. ```svelte ``` ## The minimum Point `gantt.startField` at the field holding each task's start. That is the only required option. With an `endField` too, bars get their real length. The title defaults to the first column's field. ```svelte r.id} gantt={{ startField: 'start', endField: 'end' }} /> ``` `getRowId` matters more here than in a table: a dependency's `from` and `to`, a parent field and the `collapsed` list all name rows by that id. Without it the view makes up a key per row object, which keeps the chart stable but gives your links nothing to point at. ## How dates are read Three rules, worth knowing before you shape your data: - **Days are local calendar days.** A date-only string is parsed as local midnight, never UTC. (`new Date('2026-09-14')` is UTC midnight, which west of Greenwich is the 13th - a bar a day early on every task.) - **`end` is exclusive, except a date-only string is inclusive of its day.** So `{ start: '2026-09-14', end: '2026-09-16' }` is the **three-day** task a person typing those dates means. A value carrying a time (a `Date`, epoch-ms, or an ISO string with `T`) is taken literally. - **A task with a start but no end and no duration is a milestone** - it renders as a diamond. Instead of an end you can give a length in **working days** with `durationField`. A three-day task starting Thursday ends Tuesday, because the weekend is skipped: ```svelte r.id} gantt={{ startField: 'start', durationField: 'days', nonWorkingDays: [0, 6] }} /> ``` If the same rows also feed the [scheduler](https://svgrid.com/docs/help/rows/scheduler/), store timestamps rather than date-only strings - [the views page](https://svgrid.com/docs/help/gantt/views/#one-date-shape-for-every-view) explains why. ## Bars, progress and milestones | Option | What it draws | | --- | --- | | `progressField` | A 0-100 fill inside the bar, and the rollup on parents. | | `milestoneField` | A diamond instead of a bar. A zero-length task is one anyway. | | `colorField` / `color` | The bar's accent, per task or for all of them. | | `summaryBars` | `false` draws parents as ordinary bars instead of a rolled-up spine. | | `labelPosition` | `'inside'` (default, falling back to the right when the bar is too narrow), `'right'`, or `'none'`. | | `rowHeight` | Height of one task row, default 32. | ```svelte r.id} gantt={{ startField: 'start', endField: 'end', parentField: 'parentId', progressField: 'progress', milestoneField: 'milestone', colorField: 'color', labelPosition: 'right', }} /> ``` A bar's label sits inside it when it fits and to the right of it when it does not, so a two-day task at a coarse zoom is still named. A summary bar's label is always outside: the spine is too thin to carry text. ## The task table The left pane lists the same rows. By default it shows every column that has a `field`; name and order them with `tableColumns`, which also accepts three built-ins that need no column definition: - **`__duration`** - the task's length in working days. - **`__progress`** - a small meter plus the percent. - **`__slack`** - days of room before the task would move the project finish. Needs `criticalPath` (see [the planning layer](https://svgrid.com/docs/help/gantt/critical-path/)); blank without it. ```svelte r.id} gantt={{ startField: 'start', endField: 'end', parentField: 'parentId', progressField: 'progress', tableColumns: ['name', 'owner', '__duration', '__progress'], tableWidth: 340, rowHeight: 34, }} /> ``` Drag the divider to resize the pane. The table and the chart share one scroll container, so their rows can never drift apart. The pane is a compact list, not a second grid: it has no inline editing or per-column menus. Sorting and filtering happen on the grid itself, which is why the usual pattern is a **Gantt / Table toggle** over the same rows - flip the `gantt` prop off and the full table is back, with every column feature. > Live demo: Project plan - https://svgrid.com/demos/474-gantt-intro/ ## Search, filter and sort flow through The Gantt draws the rows the grid hands it, after filtering and sorting. So the search box above the chart, any column filters, and the sort order all apply without the view knowing about them. Sorting reorders tasks **within each phase**; children stay under their parent. The search box is the grid's global filter, shown by default; `searchable: false` hides it and `searchPlaceholder` renames it. ## The chart fills its pane A short plan at a coarse zoom is narrower than the space beside the task table. Rather than stop two thirds of the way across and leave the rest blank, the ticks stretch to fill the pane; a plan wider than the pane scrolls at the preset's natural tick width. The chart opens with today a third of the way in, so most of what is on screen is what comes next. ## See also - [Work breakdown](https://svgrid.com/docs/help/gantt/work-breakdown/) - phases, rolled-up summary bars and collapse. - [Dependencies](https://svgrid.com/docs/help/gantt/dependencies/) - links, arrows and auto-reschedule. - [Config reference](https://svgrid.com/docs/help/gantt/api/) - every option in one table. --- SvGrid is the Svelte 5 data grid (`npm install @svgrid/grid`, MIT). This page: https://svgrid.com/docs/help/gantt/start/ . All docs: https://svgrid.com/llms.txt