# Gantt: custom bars, tooltips and menus
What the chart draws inside a bar, says on hover and offers on right-click are
all yours to replace: two snippets, a menu builder, and a handful of CSS
custom properties for the colours.
```svelte
```
## The bar body
`task` is a snippet that receives the row and replaces the built-in label
inside a **task** bar. It gets the bar's full width and height and clips its
own overflow, so keep it to one line: an avatar, a name, a chip.
```svelte
{#snippet bar(row: Task)}
{row.name}
{row.status}
{/snippet}
r.id} gantt={cfg} />
```
Two things the snippet does not touch. A phase's **summary bar** keeps its
plain label - the spine is a few pixels tall and has no room for a body - and a
**milestone** has no body at all. The progress fill still draws under the
snippet, so a bar with a body reads its percent the same way.
`labelPosition` is for the built-in label only: `'inside'` (the default, with
a fallback to the right of a bar too narrow for its text), always `'right'`, or
`'none'`.
## The tooltip
`tooltip: true` shows the built-in hover card: title, dates, working days and
percent, plus the resource, slack, baseline drift and constraint when those
options are on. Pass a snippet instead for your own:
```svelte
{#snippet tip(row: Task)}
{row.name}
{#if row.milestone}
Milestone on {fmt(row.start)}
{:else if row.parentId}
{row.owner} - {row.status} - {fmt(row.start)} to {fmt(row.end)}
{row.progress}% done
{/if}
{/snippet}
r.id} gantt={cfg} />
```
The card is positioned above the bar and portalled to the body, so it is never
clipped by the scroll container. `tooltipDelay` is the hover delay in ms
(default 400). Omit `tooltip` and there is none.
## The context menu
Right-click on a bar opens a menu of what the config makes possible: **Edit**
with the drawer, **Add subtask** with `onTaskAdd`, **Delete** with
`onTaskDelete`. `taskMenu` appends items of your own - return `MenuItem`s,
or `undefined` to add nothing for that row:
```svelte
Right-click a task. Last action: {last || 'none'}
r.id}
gantt={{
startField: 'start', endField: 'end', parentField: 'parentId',
progressField: 'progress', milestoneField: 'milestone', colorField: 'color',
taskMenu,
}} />
```
With `editable` and `onDependencyRemove`, right-clicking an arrow offers to
remove that link.
## Colours and the CSS hooks
A bar takes its colour from `colorField` (per task) or `color` (all of them);
the fill inside it is a darker shade of the same colour, and the summary spine
a lighter one, so one field colours a whole phase. Colour by team, by status,
by trade - the roadmap demo colours by status and keeps the team in the table:
> Live demo: Product roadmap - a year in quarters - https://svgrid.com/demos/479-gantt-roadmap/
The chrome reads the grid's `--sg-*` tokens, so a theme that restyles the
table restyles the chart. A few Gantt-specific properties sit on top, set them
on any ancestor:
| Property | Colours |
| --- | --- |
| `--sv-gantt-accent` | The default bar colour when a task has none. |
| `--sv-gantt-dep` | Dependency arrows. |
| `--sv-gantt-dep-bad` | Violated links, a broken constraint's outline and pin, the late baseline ghost. |
| `--sv-gantt-critical` | The critical path ring and its arrows. |
```css
.my-plan {
--sv-gantt-critical: #b91c1c;
--sv-gantt-dep: #64748b;
}
```
## See also
- [Editing](https://svgrid.com/docs/help/gantt/editing/) - the drawer and the gestures the menu items sit beside.
- [Theming with tokens](https://svgrid.com/docs/help/tokens/) - the `--sg-*` tokens the chrome reads.
- [SvMenu](https://svgrid.com/docs/help/ui-components/sv-menu/) - the `MenuItem` shape `taskMenu` returns.
---
SvGrid is the Svelte 5 data grid (`npm install @svgrid/grid`, MIT). This page: https://svgrid.com/docs/help/gantt/customizing/ . All docs: https://svgrid.com/llms.txt