# Visual Configuration
URL: https://pro.rv-grid.com/guides/gantt/customization/visuals/
Source: src/content/docs/guides/gantt/customization/visuals.mdx
Description: Timeline overlays, labels, baseline, critical path, and marker hooks.
`gantt.visuals` controls overlays and rendering hooks:

- `showBaseline`, `baselineId`
- `showCriticalPath`
- `showTaskLabels`
- `projectLineDate`, `showTodayLine`, `milestoneLines`
- `timeRanges`, `shadeNonWorkingTime`
- `taskMarkerHook`, `taskBarColorHook`, `taskBarContentHook`
- `taskTooltipFields`, `taskTooltipHook`

Use `taskTooltipFields` when you only need to choose which built-in fields appear in task-bar tooltips:

```ts
grid.gantt = {
  ...project,
  visuals: {
    taskTooltipFields: [
      'name',
      'startDate',
      'endDate',
      { field: 'percentDone', label: 'Complete' },
      'assignees',
    ],
  },
};
```

## Task tooltip API

`taskTooltipFields` is an ordered array. Each entry can be a field id string or an object with a `field` and optional `label`:

```ts
type GanttTaskTooltipField =
  | GanttTaskTooltipFieldId
  | { field: GanttTaskTooltipFieldId; label?: string };
```

Object entries let you rename a built-in line. Set `label: ''` to render only the value without a `Label: ` prefix.

```ts
visuals: {
  taskTooltipFields: [
    { field: 'name', label: '' },
    { field: 'percentDone', label: 'Done' },
  ],
}
```

Supported built-in fields:

| Field | Tooltip output |
|---|---|
| `summary` | Task name and completion percent, for example `Design - 50%`. |
| `name` | Task name. |
| `percentDone` | Completion percent. |
| `taskType` | Human-readable task type. |
| `status` | Human-readable task status. |
| `startDate` | Scheduled start date, formatted with `gantt.dateFormats.tooltip`. |
| `endDate` | Scheduled end date, formatted with `gantt.dateFormats.tooltip`. |
| `duration` | Duration in days. |
| `taskMode` | `Auto Scheduled` or `Manually Scheduled`. |
| `schedulingWarnings` | Scheduling warnings joined into one line; skipped when empty. |
| `cost` | Formatted task cost; skipped when empty. |
| `assignees` | Comma-separated assignee names; skipped when empty. |

When `taskTooltipFields` is omitted, Gantt keeps the default tooltip: `summary`, `taskType`, `status`, `startDate`, `endDate`, `duration`, `taskMode`, `schedulingWarnings`, `cost`, and `assignees`. An empty array intentionally renders an empty tooltip.

`taskTooltipHook` has priority over `taskTooltipFields` and can replace the whole tooltip string:

```ts
visuals: {
  taskTooltipFields: ['name'],
  taskTooltipHook: ({ row }) => `${row.name}\n${row.status}`,
}
```

Return `null` or `undefined` from `taskTooltipHook` to fall back to `taskTooltipFields` or the default tooltip. Use the hook for custom row metadata that is not part of the built-in field list.

Type source: `packages/enterprise/plugins/gantt/grid/gantt-plugin.types.ts`.
Rendering sources: `features/timeline-background/*`, `grid/gantt-column-type.ts`.
