Gantt

A timeline of task bars over a date range.

Research

Design

Build

Launch

Jan 1Jan 28

import { BuiGantt } from 'ng-blatui';

<bui-gantt [tasks]="tasks" />

Milestones

Research

Design

Build

Launch

Kickoff

Beta

Jan 1Jan 28

<!-- diamond markers from [milestones] = [{ name, date }] -->
<bui-gantt [tasks]="tasks" [milestones]="[{ name: 'GA', date: '2026-01-28' }]" />

Prop	Type	Default	Description
`tasks`	`readonly GanttTask[]`	`[]`	Tasks to plot as horizontal bars across the date range.
`milestones`	`readonly GanttMilestone[]`	`[]`	Milestones to plot as diamond markers below the task bars.
`start`	`string`	`''`	ISO start date overriding the computed range minimum; empty derives it from tasks.
`end`	`string`	`''`	ISO end date overriding the computed range maximum; empty derives it from tasks.
`locale`	`string`	—	BCP 47 locale used for the axis bound labels. Defaults to the app's `LOCALE_ID`.
`dateFormat`	`Intl.DateTimeFormatOptions`	`DEFAULT_DATE_FORMAT`	`Intl.DateTimeFormat` options for the axis bound labels. Replaces the default wholesale, so `{ dateStyle: 'short' }` is valid (its options cannot be mixed with `month`/`day`).
`emptyLabel`	`string`	—	Text shown when there are no tasks to plot. Falls back to `provideBuiLabels`.

GanttMilestone

Field	Type	Description
`name`	`string`	Milestone label shown in the left-hand row gutter and as the marker title.
`date`	`string`	Milestone date as an ISO `YYYY-MM-DD` string; empty strings are ignored.

GanttTask

Field	Type	Description
`name`	`string`	Task label shown in the left-hand row gutter.
`start`	`string`	Task start date as an ISO `YYYY-MM-DD` string; empty strings are ignored.
`end`	`string`	Task end date as an ISO `YYYY-MM-DD` string; empty strings are ignored.
`progress`?	`number`	Completion percentage (0-100) shown as a darker overlay on the bar.
`color`?	`string`	Tailwind background class for the bar; defaults to `bg-primary`.

Every ng-blatui component also accepts a class input to merge extra Tailwind classes onto the host.