# XWUIGanttChart

A horizontal timeline/Gantt chart that renders each `tasks[]` entry as an SVG bar positioned by its `startDate`/`endDate`, with a progress overlay driven by `task.progress`, status-colored bars (`completed`/`in-progress`/`blocked`/`not-started`), and dashed dependency lines drawn from each task's `dependencies[]`. A `zoomLevel` segmented control switches the date header between Day/Week/Month/Year, an optional task-name `showSidebar`, and `showDependencies`/`showCriticalPath` toggles. Use it to visualize project schedules where tasks span dates and block one another; if `data.startDate`/`endDate` are omitted the range is auto-computed from the tasks.

## Basic Usage

Three tasks (Design → Build → QA + launch) chained by `dependencies` across a two-week span (2026-03-01 to 2026-03-15), each carrying a `status` that colors its bar.

```example
file: examples/BasicUsage.ts
html: examples/BasicUsage.html
title: Basic Usage
description: A three-task Gantt with sequential dependencies and per-task status colors over a two-week window.
```

## Task Dependencies

A six-week mobile-release Gantt whose dashed dependency lines fan out from Discovery into parallel Sync-API and Offline-UI tracks, then fan back in so Closed beta waits on both before the final Store release.

```example
file: examples/Dependencies.ts
html: examples/Dependencies.html
title: Task Dependencies
description: Dashed dependency lines fan in and out - research feeds two parallel build tracks that both converge on a single release task.
```

## Milestone Markers

A one-quarter plan (month zoom) that interleaves work phases with four zero-duration milestone tasks - Kickoff, Design approved, Code freeze, GA launch - each collapsing to a fixed timeline marker that the following phase depends on.

```example
file: examples/Milestones.ts
html: examples/Milestones.html
title: Milestone Markers
description: Zero-duration tasks (startDate === endDate) render as fixed milestone markers that gate the work phases depending on them.
```

## Critical Path

A two-month data-platform build rendered with `showCriticalPath` enabled, where the unbroken Ingestion → Model → Pipeline → Validation → Cutover chain is the longest path that drives the launch date, while Runbook docs and BI dashboards branch off with schedule slack.

```example
file: examples/CriticalPath.ts
html: examples/CriticalPath.html
title: Critical Path
description: showCriticalPath highlights an unbroken dependency chain as the longest path, while two short side tasks carry slack off the critical line.
```

```api
```