Class UIGanttChart<T>

A pure-CSS Gantt chart component driven by an IGanttDatasource.

Renders a scrollable timeline with task bars, optional progress overlays, milestone diamonds, a "today" marker line, and dependency connector arrows.

The component is content-agnostic — all data comes from the datasource.

Example

<ui-gantt-chart
  [datasource]="ds"
  [viewMode]="'week'"
  [showToday]="true"
  (taskClicked)="onTask($event)"
/>

Type Parameters

T = unknown

Index

Constructors

constructor

new UIGanttChart<T = unknown>(): UIGanttChart<T>
Type Parameters
- T = unknown
Returns UIGanttChart<T>

Properties

`Readonly`ariaLabel

ariaLabel: InputSignal<string> = ...

Accessible label for the chart region.

`Readonly`datasource

datasource: InputSignal<IGanttDatasource<T>> = ...

Datasource providing tasks and dependency links.

`Protected` `Readonly`dateRange

dateRange: Signal<{ end: Date; start: Date }> = ...

Computed date range with padding.

`Protected` `Readonly`dependencies

dependencies: Signal<readonly GanttDependencyLink[]> = ...

All dependency links from the datasource.

`Protected` `Readonly`groupGridColumns

groupGridColumns: Signal<string> = ...

CSS grid-template-columns for the top-level group header.

`Protected` `Readonly`headerGridColumns

headerGridColumns: Signal<string> = ...

CSS grid-template-columns for the timeline header columns.

`Readonly`paddingDays

paddingDays: InputSignal<number> = ...

Number of padding days before the first and after the last task.

`Readonly`palette

palette: InputSignal<readonly string[]> = ...

Custom colour palette for task bars.

`Readonly`rowHeight

rowHeight: InputSignal<number> = ...

Row height in pixels.

`Protected` `Readonly`rows

rows: Signal<readonly GanttRow<T>[]> = ...

Processed rows for template rendering.

`Protected` `Readonly`scrollLeft

scrollLeft: WritableSignal<number> = ...

Scroll-left position for syncing the header and body.

`Readonly`showTaskList

showTaskList: InputSignal<boolean> = ...

Whether to show the task-list sidebar with task names.

`Readonly`showToday

showToday: InputSignal<boolean> = ...

Whether to show the "today" marker line.

`Readonly`taskClicked

taskClicked: OutputEmitterRef<GanttTask<T>> = ...

Emits when a task bar is clicked.

`Readonly`taskListWidth

taskListWidth: InputSignal<number> = ...

Width of the task-list sidebar in pixels.

`Protected` `Readonly`tasks

tasks: Signal<readonly GanttTask<T>[]> = ...

All tasks from the datasource.

`Protected` `Readonly`timeline

timeline: Signal<TimelineInfo> = ...

Full timeline metadata (columns, groups, total days).

`Protected` `Readonly`todayPosition

todayPosition: Signal<number | null> = ...

Percentage position of the "today" marker, or null.

`Readonly`viewMode

viewMode: InputSignal<GanttViewMode> = ...

Timeline granularity.

Methods

`Protected`onBodyScroll

onBodyScroll(event: Event): void
Sync horizontal scroll between header and body.
Parameters
- event: Event
Returns void
- Defined in packages/ui-kit/src/lib/gantt-chart/gantt-chart.component.ts:183

`Protected`onTaskClick

onTaskClick(task: GanttTask<T>): void
Handle task bar click.
Parameters
- task: GanttTask<T>
Returns void
- Defined in packages/ui-kit/src/lib/gantt-chart/gantt-chart.component.ts:178

Class UIGanttChart<T>

Example

Type Parameters

Index

Constructors

Properties

Methods

Constructors

constructor

Type Parameters

Returns UIGanttChart<T>

Properties

`Readonly`ariaLabel

`Readonly`datasource

`Protected` `Readonly`dateRange

`Protected` `Readonly`dependencies

`Protected` `Readonly`groupGridColumns

`Protected` `Readonly`headerGridColumns

`Readonly`paddingDays

`Readonly`palette

`Readonly`rowHeight

`Protected` `Readonly`rows

`Protected` `Readonly`scrollLeft

`Readonly`showTaskList

`Readonly`showToday

`Readonly`taskClicked

`Readonly`taskListWidth

`Protected` `Readonly`tasks

`Protected` `Readonly`timeline

`Protected` `Readonly`todayPosition

`Readonly`viewMode

Methods

`Protected`onBodyScroll

Parameters

Returns void

`Protected`onTaskClick

Parameters

Returns void

Settings

On This Page

Class UIGanttChart<T>

Example

Type Parameters

Index

Constructors

Properties

Methods

Constructors

constructor

Type Parameters

Returns UIGanttChart<T>

Properties

ReadonlyariaLabel

Readonlydatasource

Protected ReadonlydateRange

Protected Readonlydependencies

Protected ReadonlygroupGridColumns

Protected ReadonlyheaderGridColumns

ReadonlypaddingDays

Readonlypalette

ReadonlyrowHeight

Protected Readonlyrows

Protected ReadonlyscrollLeft

ReadonlyshowTaskList

ReadonlyshowToday

ReadonlytaskClicked

ReadonlytaskListWidth

Protected Readonlytasks

Protected Readonlytimeline

Protected ReadonlytodayPosition

ReadonlyviewMode

Methods

ProtectedonBodyScroll

Parameters

Returns void

ProtectedonTaskClick

Parameters

Returns void

Settings

On This Page

`Readonly`ariaLabel

`Readonly`datasource

`Protected` `Readonly`dateRange

`Protected` `Readonly`dependencies

`Protected` `Readonly`groupGridColumns

`Protected` `Readonly`headerGridColumns

`Readonly`paddingDays

`Readonly`palette

`Readonly`rowHeight

`Protected` `Readonly`rows

`Protected` `Readonly`scrollLeft

`Readonly`showTaskList

`Readonly`showToday

`Readonly`taskClicked

`Readonly`taskListWidth

`Protected` `Readonly`tasks

`Protected` `Readonly`timeline

`Protected` `Readonly`todayPosition

`Readonly`viewMode

`Protected`onBodyScroll

`Protected`onTaskClick