Gantt

Project and manufacturing Gantt chart with task panel, timeline header, colored bars, progress indicators, milestones, today line, and dependency arrows. Designed for ERPlora production scheduling.

Full Gantt Chart

Preview

Tasks

Hydraulic Valve Assembly

Material Procurement

CNC Machining

Assembly

Quality Control

Packaging & Ship

Precision Bearing Kit

Raw Material Prep

Grinding & Polish

January 2026

February 2026

March 2026

April 2026

W10

W11

W12

W13

W14

W15

W16

Procurement

CNC Machining

Assembly - 65%

Pack & Ship

Material Prep - Delayed

Grinding - On Hold

<div class="gantt">
  <div class="gantt-toolbar">
    <div class="gantt-toolbar-start">
      <h2 class="gantt-title">ERPlora Q1 Production Schedule</h2>
    </div>
    <div class="gantt-toolbar-end">
      <button class="gantt-today-btn">Today</button>
      <div class="gantt-zoom-controls">
        <button class="gantt-zoom-btn">Day</button>
        <button class="gantt-zoom-btn gantt-zoom-btn-active">Week</button>
        <button class="gantt-zoom-btn">Month</button>
      </div>
      <button class="gantt-nav-btn" title="Previous">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 18l-6-6 6-6"/></svg>
      </button>
      <button class="gantt-nav-btn" title="Next">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6 6"/></svg>
      </button>
    </div>
  </div>
  <div class="gantt-body">
    <!-- Task Panel (Left) -->
    <div class="gantt-tasks">
      <div class="gantt-tasks-header">Tasks</div>
      <div class="gantt-tasks-body">
        <div class="gantt-task-row gantt-task-row-group">
          <button class="gantt-task-expand gantt-task-expand-expanded">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
          </button>
          <span class="gantt-task-name">Hydraulic Valve Assembly</span>
        </div>
        <div class="gantt-task-row">
          <div class="gantt-task-indent" style="width: 24px;"></div>
          <span class="gantt-task-name">Material Procurement</span>
        </div>
        <div class="gantt-task-row">
          <div class="gantt-task-indent" style="width: 24px;"></div>
          <span class="gantt-task-name">CNC Machining</span>
        </div>
        <div class="gantt-task-row gantt-task-row-selected">
          <div class="gantt-task-indent" style="width: 24px;"></div>
          <span class="gantt-task-name">Assembly</span>
        </div>
        <div class="gantt-task-row">
          <div class="gantt-task-indent" style="width: 24px;"></div>
          <span class="gantt-task-name">Quality Control</span>
        </div>
        <div class="gantt-task-row">
          <div class="gantt-task-indent" style="width: 24px;"></div>
          <span class="gantt-task-name">Packaging &amp; Ship</span>
        </div>
        <div class="gantt-task-row gantt-task-row-group">
          <button class="gantt-task-expand gantt-task-expand-expanded">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
          </button>
          <span class="gantt-task-name">Precision Bearing Kit</span>
        </div>
        <div class="gantt-task-row">
          <div class="gantt-task-indent" style="width: 24px;"></div>
          <span class="gantt-task-name">Raw Material Prep</span>
        </div>
        <div class="gantt-task-row">
          <div class="gantt-task-indent" style="width: 24px;"></div>
          <span class="gantt-task-name">Grinding &amp; Polish</span>
        </div>
      </div>
    </div>
    <!-- Chart Area (Right) -->
    <div class="gantt-chart">
      <div class="gantt-chart-scroll">
        <div class="gantt-chart-inner" style="width: 1200px;">
          <!-- Timeline Header -->
          <div class="gantt-header">
            <div class="gantt-header-row gantt-header-row-primary">
              <div class="gantt-header-cell gantt-header-cell-primary" style="width: 300px;">January 2026</div>
              <div class="gantt-header-cell gantt-header-cell-primary" style="width: 300px;">February 2026</div>
              <div class="gantt-header-cell gantt-header-cell-primary" style="width: 300px;">March 2026</div>
              <div class="gantt-header-cell gantt-header-cell-primary" style="width: 300px;">April 2026</div>
            </div>
            <div class="gantt-header-row">
              <div class="gantt-header-cell" style="width: 75px;">W1</div>
              <div class="gantt-header-cell" style="width: 75px;">W2</div>
              <div class="gantt-header-cell" style="width: 75px;">W3</div>
              <div class="gantt-header-cell" style="width: 75px;">W4</div>
              <div class="gantt-header-cell" style="width: 75px;">W5</div>
              <div class="gantt-header-cell gantt-header-cell-today" style="width: 75px;">W6</div>
              <div class="gantt-header-cell" style="width: 75px;">W7</div>
              <div class="gantt-header-cell" style="width: 75px;">W8</div>
              <div class="gantt-header-cell" style="width: 75px;">W9</div>
              <div class="gantt-header-cell" style="width: 75px;">W10</div>
              <div class="gantt-header-cell" style="width: 75px;">W11</div>
              <div class="gantt-header-cell" style="width: 75px;">W12</div>
              <div class="gantt-header-cell" style="width: 75px;">W13</div>
              <div class="gantt-header-cell" style="width: 75px;">W14</div>
              <div class="gantt-header-cell" style="width: 75px;">W15</div>
              <div class="gantt-header-cell" style="width: 75px;">W16</div>
            </div>
          </div>
          <!-- Grid Background -->
          <div class="gantt-grid">
            <div class="gantt-grid-row">
              <div class="gantt-grid-cell" style="width: 75px;"></div>
              <div class="gantt-grid-cell" style="width: 75px;"></div>
              <div class="gantt-grid-cell" style="width: 75px;"></div>
              <div class="gantt-grid-cell" style="width: 75px;"></div>
              <div class="gantt-grid-cell" style="width: 75px;"></div>
              <div class="gantt-grid-cell" style="width: 75px;"></div>
              <div class="gantt-grid-cell" style="width: 75px;"></div>
              <div class="gantt-grid-cell" style="width: 75px;"></div>
              <div class="gantt-grid-cell" style="width: 75px;"></div>
              <div class="gantt-grid-cell" style="width: 75px;"></div>
              <div class="gantt-grid-cell" style="width: 75px;"></div>
              <div class="gantt-grid-cell" style="width: 75px;"></div>
              <div class="gantt-grid-cell" style="width: 75px;"></div>
              <div class="gantt-grid-cell" style="width: 75px;"></div>
              <div class="gantt-grid-cell" style="width: 75px;"></div>
              <div class="gantt-grid-cell" style="width: 75px;"></div>
            </div>
          </div>
          <!-- Today Line -->
          <div class="gantt-today-line" style="left: 412px;"></div>
          <!-- Bars -->
          <div class="gantt-bars">
            <!-- Group bar: Hydraulic Valve Assembly -->
            <div class="gantt-bar-row">
              <div class="gantt-bar gantt-bar-group" style="left: 0; width: 600px;"></div>
            </div>
            <!-- Material Procurement (completed) -->
            <div class="gantt-bar-row">
              <div class="gantt-bar gantt-bar-completed" style="left: 0; width: 150px;">
                <div class="gantt-bar-progress" style="width: 100%;"></div>
                <span class="gantt-bar-label">Procurement</span>
              </div>
            </div>
            <!-- CNC Machining (completed) -->
            <div class="gantt-bar-row">
              <div class="gantt-bar gantt-bar-completed" style="left: 150px; width: 150px;">
                <div class="gantt-bar-progress" style="width: 100%;"></div>
                <span class="gantt-bar-label">CNC Machining</span>
              </div>
            </div>
            <!-- Assembly (in progress, selected) -->
            <div class="gantt-bar-row">
              <div class="gantt-bar gantt-bar-in-progress gantt-bar-selected" style="left: 300px; width: 150px;">
                <div class="gantt-bar-progress" style="width: 65%;"></div>
                <span class="gantt-bar-label">Assembly - 65%</span>
                <div class="gantt-bar-handle gantt-bar-handle-start"></div>
                <div class="gantt-bar-handle gantt-bar-handle-end"></div>
              </div>
            </div>
            <!-- Quality Control (not started) -->
            <div class="gantt-bar-row">
              <div class="gantt-bar gantt-bar-not-started" style="left: 450px; width: 75px;">
                <span class="gantt-bar-label">QC</span>
              </div>
            </div>
            <!-- Packaging (not started) -->
            <div class="gantt-bar-row">
              <div class="gantt-bar gantt-bar-not-started" style="left: 525px; width: 75px;">
                <span class="gantt-bar-label">Pack &amp; Ship</span>
              </div>
            </div>
            <!-- Group bar: Precision Bearing Kit -->
            <div class="gantt-bar-row">
              <div class="gantt-bar gantt-bar-group" style="left: 225px; width: 525px;"></div>
            </div>
            <!-- Raw Material Prep (delayed) -->
            <div class="gantt-bar-row">
              <div class="gantt-bar gantt-bar-delayed" style="left: 225px; width: 150px;">
                <div class="gantt-bar-progress" style="width: 80%;"></div>
                <span class="gantt-bar-label">Material Prep - Delayed</span>
              </div>
            </div>
            <!-- Grinding (on hold) -->
            <div class="gantt-bar-row">
              <div class="gantt-bar gantt-bar-on-hold" style="left: 375px; width: 225px;">
                <span class="gantt-bar-label">Grinding - On Hold</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Requires: ux.min.css

<div class="flex flex-col w-full overflow-hidden bg-base-100 border border-base-300 rounded-box">
  <!-- Toolbar -->
  <div class="flex items-center justify-between gap-4 px-4 py-2 bg-base-200 border-b border-base-300 shrink-0">
    <div class="flex items-center gap-2">
      <h2 class="text-lg font-semibold m-0">ERPlora Q1 Production Schedule</h2>
    </div>
    <div class="flex items-center gap-2">
      <button class="flex items-center gap-1 text-sm px-2 py-1 bg-base-100 border border-base-300 rounded-field hover:bg-base-200">Today</button>
      <div class="flex items-center overflow-hidden bg-base-100 border border-base-300 rounded-field">
        <button class="flex items-center justify-center min-w-8 h-8 px-2 text-sm bg-transparent text-base-content/60 border-r border-base-300 hover:bg-base-200">Day</button>
        <button class="flex items-center justify-center min-w-8 h-8 px-2 text-sm bg-primary text-white hover:brightness-90">Week</button>
        <button class="flex items-center justify-center min-w-8 h-8 px-2 text-sm bg-transparent text-base-content/60 hover:bg-base-200">Month</button>
      </div>
      <button class="flex items-center justify-center w-8 h-8 bg-base-100 border border-base-300 rounded-field text-base-content/60 hover:bg-base-200">
        <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 18l-6-6 6-6"/></svg>
      </button>
      <button class="flex items-center justify-center w-8 h-8 bg-base-100 border border-base-300 rounded-field text-base-content/60 hover:bg-base-200">
        <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
      </button>
    </div>
  </div>
  <!-- Body -->
  <div class="flex flex-1 overflow-hidden relative">
    <!-- Task Panel -->
    <div class="flex flex-col shrink-0 w-[280px] border-r border-base-300 bg-base-100 z-10">
      <div class="flex items-center text-sm font-semibold uppercase h-12 px-4 bg-base-200 border-b border-base-300 text-base-content/60 tracking-wide">Tasks</div>
      <div class="flex-1 overflow-y-auto">
        <div class="flex items-center h-10 px-4 border-b border-base-300 font-semibold bg-base-200">
          <svg class="w-3.5 h-3.5 mr-1 text-base-content/60 rotate-90" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
          <span class="flex-1 text-sm truncate">Hydraulic Valve Assembly</span>
        </div>
        <div class="flex items-center h-10 px-4 border-b border-base-300 hover:bg-primary/5">
          <div class="shrink-0 w-6"></div>
          <span class="flex-1 text-sm truncate">Material Procurement</span>
        </div>
        <div class="flex items-center h-10 px-4 border-b border-base-300 bg-primary/10">
          <div class="shrink-0 w-6"></div>
          <span class="flex-1 text-sm truncate">Assembly</span>
        </div>
      </div>
    </div>
    <!-- Chart with bars (simplified) -->
    <div class="flex-1 flex flex-col overflow-hidden relative">
      <div class="flex-1 overflow-auto relative">
        <div class="relative min-w-full" style="width: 1200px;">
          <div class="sticky top-0 z-[5] bg-base-200 border-b border-base-300">
            <div class="flex h-6">
              <div class="flex items-center justify-center text-xs font-semibold whitespace-nowrap shrink-0 border-r border-base-300" style="width: 300px;">January 2026</div>
              <div class="flex items-center justify-center text-xs font-semibold whitespace-nowrap shrink-0 border-r border-base-300" style="width: 300px;">February 2026</div>
            </div>
          </div>
          <!-- Today line -->
          <div class="absolute top-0 bottom-0 w-0.5 bg-error z-[4]" style="left: 412px;">
            <div class="absolute -top-1.5 -left-1 w-2.5 h-2.5 rounded-full bg-error"></div>
          </div>
          <!-- Bars area -->
          <div class="relative z-[3]">
            <div class="relative flex items-center h-10">
              <div class="absolute h-2 bg-base-content/60 rounded-none" style="left: 0; width: 600px;"></div>
            </div>
            <div class="relative flex items-center h-10">
              <div class="absolute flex items-center h-6 bg-success rounded overflow-hidden cursor-pointer hover:shadow-lg" style="left: 0; width: 150px;">
                <div class="absolute top-0 left-0 bottom-0 bg-black/15 rounded-l" style="width: 100%;"></div>
                <span class="relative text-xs font-medium text-white px-2 truncate z-[1]">Procurement</span>
              </div>
            </div>
            <div class="relative flex items-center h-10">
              <div class="absolute flex items-center h-6 bg-primary rounded overflow-hidden cursor-pointer hover:shadow-lg shadow-[0_0_0_2px_var(--color-base-100),0_0_0_4px_var(--color-primary)]" style="left: 300px; width: 150px;">
                <div class="absolute top-0 left-0 bottom-0 bg-black/15 rounded-l" style="width: 65%;"></div>
                <span class="relative text-xs font-medium text-white px-2 truncate z-[1]">Assembly - 65%</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Requires: tw.min.css

// Scroll to today line
function scrollToToday(ganttEl) {
  const todayLine = ganttEl.querySelector('.gantt-today-line');
  const scrollContainer = ganttEl.querySelector('.gantt-chart-scroll');
  if (todayLine && scrollContainer) {
    const offset = parseInt(todayLine.style.left) - scrollContainer.clientWidth / 2;
    scrollContainer.scrollLeft = Math.max(0, offset);
  }
}

// Toggle task group expand/collapse
document.querySelectorAll('.gantt-task-expand').forEach(btn => {
  btn.addEventListener('click', () => {
    btn.classList.toggle('gantt-task-expand-expanded');
    // Hide/show child rows until next group
    let sibling = btn.closest('.gantt-task-row').nextElementSibling;
    while (sibling && !sibling.classList.contains('gantt-task-row-group')) {
      sibling.style.display = sibling.style.display === 'none' ? '' : 'none';
      sibling = sibling.nextElementSibling;
    }
  });
});

// Zoom controls
document.querySelectorAll('.gantt-zoom-btn').forEach(btn => {
  btn.addEventListener('click', () => {
    document.querySelectorAll('.gantt-zoom-btn').forEach(b =>
      b.classList.remove('gantt-zoom-btn-active'));
    btn.classList.add('gantt-zoom-btn-active');
    // Adjust column widths based on zoom level
  });
});

Task Bar States

Preview

Status

Not Started

In Progress

Completed

Delayed

On Hold

Group Bar

Week 1

Week 2

Week 3

Week 4

Not Started

In Progress - 45%

Completed

Delayed - 70%

On Hold

<div class="gantt" style="max-width: 700px;">
  <div class="gantt-body">
    <div class="gantt-tasks" style="width: 180px;">
      <div class="gantt-tasks-header">Status</div>
      <div class="gantt-tasks-body">
        <div class="gantt-task-row"><span class="gantt-task-name">Not Started</span></div>
        <div class="gantt-task-row"><span class="gantt-task-name">In Progress</span></div>
        <div class="gantt-task-row"><span class="gantt-task-name">Completed</span></div>
        <div class="gantt-task-row"><span class="gantt-task-name">Delayed</span></div>
        <div class="gantt-task-row"><span class="gantt-task-name">On Hold</span></div>
        <div class="gantt-task-row"><span class="gantt-task-name">Group Bar</span></div>
      </div>
    </div>
    <div class="gantt-chart">
      <div class="gantt-chart-scroll">
        <div class="gantt-chart-inner" style="width: 520px;">
          <div class="gantt-header">
            <div class="gantt-header-row">
              <div class="gantt-header-cell" style="width: 130px;">Week 1</div>
              <div class="gantt-header-cell" style="width: 130px;">Week 2</div>
              <div class="gantt-header-cell" style="width: 130px;">Week 3</div>
              <div class="gantt-header-cell" style="width: 130px;">Week 4</div>
            </div>
          </div>
          <div class="gantt-bars">
            <div class="gantt-bar-row">
              <div class="gantt-bar gantt-bar-not-started" style="left: 20px; width: 200px;">
                <span class="gantt-bar-label">Not Started</span>
              </div>
            </div>
            <div class="gantt-bar-row">
              <div class="gantt-bar gantt-bar-in-progress" style="left: 20px; width: 250px;">
                <div class="gantt-bar-progress" style="width: 45%;"></div>
                <span class="gantt-bar-label">In Progress - 45%</span>
              </div>
            </div>
            <div class="gantt-bar-row">
              <div class="gantt-bar gantt-bar-completed" style="left: 20px; width: 200px;">
                <div class="gantt-bar-progress" style="width: 100%;"></div>
                <span class="gantt-bar-label">Completed</span>
              </div>
            </div>
            <div class="gantt-bar-row">
              <div class="gantt-bar gantt-bar-delayed" style="left: 20px; width: 300px;">
                <div class="gantt-bar-progress" style="width: 70%;"></div>
                <span class="gantt-bar-label">Delayed - 70%</span>
              </div>
            </div>
            <div class="gantt-bar-row">
              <div class="gantt-bar gantt-bar-on-hold" style="left: 20px; width: 180px;">
                <span class="gantt-bar-label">On Hold</span>
              </div>
            </div>
            <div class="gantt-bar-row">
              <div class="gantt-bar gantt-bar-group" style="left: 20px; width: 400px;"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Requires: ux.min.css

<div class="flex flex-col gap-3 p-4">
  <div class="flex items-center gap-3">
    <span class="text-sm w-24 shrink-0">Not Started</span>
    <div class="h-6 rounded bg-base-content/30 flex items-center px-2" style="width: 200px;">
      <span class="text-xs font-medium text-white">Not Started</span>
    </div>
  </div>
  <div class="flex items-center gap-3">
    <span class="text-sm w-24 shrink-0">In Progress</span>
    <div class="h-6 rounded bg-primary flex items-center px-2 relative overflow-hidden" style="width: 250px;">
      <div class="absolute top-0 left-0 bottom-0 bg-black/15 rounded-l" style="width: 45%;"></div>
      <span class="relative text-xs font-medium text-white z-[1]">In Progress - 45%</span>
    </div>
  </div>
  <div class="flex items-center gap-3">
    <span class="text-sm w-24 shrink-0">Completed</span>
    <div class="h-6 rounded bg-success flex items-center px-2 relative overflow-hidden" style="width: 200px;">
      <div class="absolute top-0 left-0 bottom-0 bg-black/15 rounded-l" style="width: 100%;"></div>
      <span class="relative text-xs font-medium text-white z-[1]">Completed</span>
    </div>
  </div>
  <div class="flex items-center gap-3">
    <span class="text-sm w-24 shrink-0">Delayed</span>
    <div class="h-6 rounded bg-error flex items-center px-2 relative overflow-hidden" style="width: 300px;">
      <div class="absolute top-0 left-0 bottom-0 bg-black/15 rounded-l" style="width: 70%;"></div>
      <span class="relative text-xs font-medium text-white z-[1]">Delayed - 70%</span>
    </div>
  </div>
  <div class="flex items-center gap-3">
    <span class="text-sm w-24 shrink-0">On Hold</span>
    <div class="h-6 rounded bg-warning flex items-center px-2" style="width: 180px;">
      <span class="text-xs font-medium text-white">On Hold</span>
    </div>
  </div>
  <div class="flex items-center gap-3">
    <span class="text-sm w-24 shrink-0">Group</span>
    <div class="h-2 bg-base-content/60" style="width: 400px;"></div>
  </div>
</div>

Requires: tw.min.css

// No JS needed — bar states are CSS-only classes

Milestones and Today Line

Preview

Milestones

Design Review

Prototype Approved

Production Start

Final Delivery

Jan

Feb

Mar

Apr

<div class="gantt" style="max-width: 700px;">
  <div class="gantt-body">
    <div class="gantt-tasks" style="width: 180px;">
      <div class="gantt-tasks-header">Milestones</div>
      <div class="gantt-tasks-body">
        <div class="gantt-task-row"><span class="gantt-task-name">Design Review</span></div>
        <div class="gantt-task-row"><span class="gantt-task-name">Prototype Approved</span></div>
        <div class="gantt-task-row"><span class="gantt-task-name">Production Start</span></div>
        <div class="gantt-task-row"><span class="gantt-task-name">Final Delivery</span></div>
      </div>
    </div>
    <div class="gantt-chart">
      <div class="gantt-chart-scroll">
        <div class="gantt-chart-inner" style="width: 520px;">
          <div class="gantt-header">
            <div class="gantt-header-row">
              <div class="gantt-header-cell" style="width: 130px;">Jan</div>
              <div class="gantt-header-cell gantt-header-cell-today" style="width: 130px;">Feb</div>
              <div class="gantt-header-cell" style="width: 130px;">Mar</div>
              <div class="gantt-header-cell" style="width: 130px;">Apr</div>
            </div>
          </div>
          <!-- Today Line -->
          <div class="gantt-today-line" style="left: 165px;"></div>
          <div class="gantt-bars">
            <!-- Design Review (completed milestone) -->
            <div class="gantt-bar-row">
              <div class="gantt-milestone gantt-milestone-completed" style="left: 65px; top: 12px;"></div>
            </div>
            <!-- Prototype Approved (completed milestone) -->
            <div class="gantt-bar-row">
              <div class="gantt-milestone gantt-milestone-completed" style="left: 130px; top: 12px;"></div>
            </div>
            <!-- Production Start (upcoming milestone) -->
            <div class="gantt-bar-row">
              <div class="gantt-milestone" style="left: 195px; top: 12px;"></div>
            </div>
            <!-- Final Delivery (upcoming milestone) -->
            <div class="gantt-bar-row">
              <div class="gantt-milestone gantt-milestone-delayed" style="left: 390px; top: 12px;"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Requires: ux.min.css

<div class="flex flex-col w-full overflow-hidden bg-base-100 border border-base-300 rounded-box" style="max-width: 700px;">
  <div class="flex flex-1 overflow-hidden relative">
    <div class="flex flex-col shrink-0 w-[180px] border-r border-base-300 bg-base-100">
      <div class="flex items-center text-sm font-semibold uppercase h-6 px-4 bg-base-200 border-b border-base-300 text-base-content/60 tracking-wide">Milestones</div>
      <div class="flex items-center h-10 px-4 border-b border-base-300 text-sm">Design Review</div>
      <div class="flex items-center h-10 px-4 border-b border-base-300 text-sm">Prototype Approved</div>
      <div class="flex items-center h-10 px-4 border-b border-base-300 text-sm">Production Start</div>
      <div class="flex items-center h-10 px-4 border-b border-base-300 text-sm">Final Delivery</div>
    </div>
    <div class="flex-1 flex flex-col overflow-hidden relative">
      <div class="flex-1 overflow-auto relative">
        <div class="relative" style="width: 520px;">
          <div class="sticky top-0 z-[5] bg-base-200 border-b border-base-300">
            <div class="flex h-6">
              <div class="flex items-center justify-center text-xs font-medium whitespace-nowrap shrink-0 border-r border-base-300" style="width: 130px;">Jan</div>
              <div class="flex items-center justify-center text-xs font-medium whitespace-nowrap shrink-0 border-r border-base-300 bg-error/10 text-error" style="width: 130px;">Feb</div>
              <div class="flex items-center justify-center text-xs font-medium whitespace-nowrap shrink-0 border-r border-base-300" style="width: 130px;">Mar</div>
              <div class="flex items-center justify-center text-xs font-medium whitespace-nowrap shrink-0 border-r border-base-300" style="width: 130px;">Apr</div>
            </div>
          </div>
          <!-- Today line -->
          <div class="absolute top-0 bottom-0 w-0.5 bg-error z-[4]" style="left: 165px;">
            <div class="absolute -top-1.5 -left-1 w-2.5 h-2.5 rounded-full bg-error"></div>
          </div>
          <!-- Milestones -->
          <div class="relative z-[3]">
            <div class="relative flex items-center h-10">
              <div class="absolute w-4 h-4 bg-success rotate-45 cursor-pointer hover:shadow-lg hover:scale-120" style="left: 65px;"></div>
            </div>
            <div class="relative flex items-center h-10">
              <div class="absolute w-4 h-4 bg-success rotate-45 cursor-pointer hover:shadow-lg hover:scale-120" style="left: 130px;"></div>
            </div>
            <div class="relative flex items-center h-10">
              <div class="absolute w-4 h-4 bg-warning rotate-45 cursor-pointer hover:shadow-lg hover:scale-120" style="left: 195px;"></div>
            </div>
            <div class="relative flex items-center h-10">
              <div class="absolute w-4 h-4 bg-error rotate-45 cursor-pointer hover:shadow-lg hover:scale-120" style="left: 390px;"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Requires: tw.min.css

// Show tooltip on milestone hover
document.querySelectorAll('.gantt-milestone').forEach(ms => {
  ms.addEventListener('mouseenter', (e) => {
    const tooltip = document.querySelector('.gantt-tooltip');
    if (!tooltip) return;
    tooltip.classList.add('gantt-tooltip-visible');
    tooltip.style.left = e.pageX + 'px';
    tooltip.style.top = (e.pageY - 40) + 'px';
  });
  ms.addEventListener('mouseleave', () => {
    const tooltip = document.querySelector('.gantt-tooltip');
    if (tooltip) tooltip.classList.remove('gantt-tooltip-visible');
  });
});

Compact Gantt

Preview

Tasks

Design specs

Prototype build

Testing

Documentation

Release

Mon

Tue

Wed

Thu

Fri

Design

Prototype

Testing

Docs

<div class="gantt gantt-compact" style="max-width: 700px;">
  <div class="gantt-toolbar">
    <div class="gantt-toolbar-start">
      <h2 class="gantt-title">ERPlora Sprint Overview</h2>
    </div>
    <div class="gantt-toolbar-end">
      <button class="gantt-today-btn">Today</button>
    </div>
  </div>
  <div class="gantt-body">
    <div class="gantt-tasks" style="width: 160px;">
      <div class="gantt-tasks-header">Tasks</div>
      <div class="gantt-tasks-body">
        <div class="gantt-task-row"><span class="gantt-task-name">Design specs</span></div>
        <div class="gantt-task-row"><span class="gantt-task-name">Prototype build</span></div>
        <div class="gantt-task-row"><span class="gantt-task-name">Testing</span></div>
        <div class="gantt-task-row"><span class="gantt-task-name">Documentation</span></div>
        <div class="gantt-task-row"><span class="gantt-task-name">Release</span></div>
      </div>
    </div>
    <div class="gantt-chart">
      <div class="gantt-chart-scroll">
        <div class="gantt-chart-inner" style="width: 540px;">
          <div class="gantt-header">
            <div class="gantt-header-row">
              <div class="gantt-header-cell" style="width: 108px;">Mon</div>
              <div class="gantt-header-cell" style="width: 108px;">Tue</div>
              <div class="gantt-header-cell gantt-header-cell-today" style="width: 108px;">Wed</div>
              <div class="gantt-header-cell" style="width: 108px;">Thu</div>
              <div class="gantt-header-cell" style="width: 108px;">Fri</div>
            </div>
          </div>
          <div class="gantt-today-line" style="left: 270px;"></div>
          <div class="gantt-bars">
            <div class="gantt-bar-row">
              <div class="gantt-bar gantt-bar-completed" style="left: 10px; width: 200px;">
                <div class="gantt-bar-progress" style="width: 100%;"></div>
                <span class="gantt-bar-label">Design</span>
              </div>
            </div>
            <div class="gantt-bar-row">
              <div class="gantt-bar gantt-bar-in-progress" style="left: 108px; width: 216px;">
                <div class="gantt-bar-progress" style="width: 60%;"></div>
                <span class="gantt-bar-label">Prototype</span>
              </div>
            </div>
            <div class="gantt-bar-row">
              <div class="gantt-bar gantt-bar-not-started" style="left: 216px; width: 216px;">
                <span class="gantt-bar-label">Testing</span>
              </div>
            </div>
            <div class="gantt-bar-row">
              <div class="gantt-bar gantt-bar-not-started" style="left: 324px; width: 108px;">
                <span class="gantt-bar-label">Docs</span>
              </div>
            </div>
            <div class="gantt-bar-row">
              <div class="gantt-milestone" style="left: 430px; top: 7px;"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Requires: ux.min.css

<div class="flex flex-col w-full overflow-hidden bg-base-100 border border-base-300 rounded-box" style="max-width: 700px;">
  <!-- Toolbar -->
  <div class="flex items-center justify-between gap-4 px-4 py-2 bg-base-200 border-b border-base-300 shrink-0">
    <div class="flex items-center gap-2">
      <h2 class="text-base font-semibold m-0">ERPlora Sprint Overview</h2>
    </div>
    <div class="flex items-center gap-2">
      <button class="flex items-center gap-1 text-xs px-2 py-1 bg-base-100 border border-base-300 rounded-field hover:bg-base-200">Today</button>
    </div>
  </div>
  <!-- Body -->
  <div class="flex flex-1 overflow-hidden relative">
    <!-- Task Panel -->
    <div class="flex flex-col shrink-0 w-40 border-r border-base-300 bg-base-100 z-10">
      <div class="flex items-center text-xs font-semibold uppercase h-10 px-3 bg-base-200 border-b border-base-300 text-base-content/60 tracking-wide">Tasks</div>
      <div class="flex-1 overflow-y-auto">
        <div class="flex items-center h-8 px-3 border-b border-base-300 hover:bg-primary/5">
          <span class="flex-1 text-xs truncate">Design specs</span>
        </div>
        <div class="flex items-center h-8 px-3 border-b border-base-300 hover:bg-primary/5">
          <span class="flex-1 text-xs truncate">Prototype build</span>
        </div>
        <div class="flex items-center h-8 px-3 border-b border-base-300 hover:bg-primary/5">
          <span class="flex-1 text-xs truncate">Testing</span>
        </div>
        <div class="flex items-center h-8 px-3 border-b border-base-300 hover:bg-primary/5">
          <span class="flex-1 text-xs truncate">Documentation</span>
        </div>
        <div class="flex items-center h-8 px-3 border-b border-base-300 hover:bg-primary/5">
          <span class="flex-1 text-xs truncate">Release</span>
        </div>
      </div>
    </div>
    <!-- Chart Area -->
    <div class="flex-1 flex flex-col overflow-hidden relative">
      <div class="flex-1 overflow-auto relative">
        <div class="relative min-w-full" style="width: 540px;">
          <!-- Header -->
          <div class="sticky top-0 z-5 bg-base-200 border-b border-base-300">
            <div class="flex h-10">
              <div class="flex items-center justify-center text-xs font-medium whitespace-nowrap shrink-0 border-r border-base-300 text-base-content/60" style="width: 108px;">Mon</div>
              <div class="flex items-center justify-center text-xs font-medium whitespace-nowrap shrink-0 border-r border-base-300 text-base-content/60" style="width: 108px;">Tue</div>
              <div class="flex items-center justify-center text-xs font-medium whitespace-nowrap shrink-0 border-r border-base-300 bg-error/10 text-error" style="width: 108px;">Wed</div>
              <div class="flex items-center justify-center text-xs font-medium whitespace-nowrap shrink-0 border-r border-base-300 text-base-content/60" style="width: 108px;">Thu</div>
              <div class="flex items-center justify-center text-xs font-medium whitespace-nowrap shrink-0 border-r border-base-300 text-base-content/60" style="width: 108px;">Fri</div>
            </div>
          </div>
          <!-- Today line -->
          <div class="absolute top-0 bottom-0 w-0.5 bg-error z-4" style="left: 270px;">
            <div class="absolute -top-1.5 -left-1 w-2.5 h-2.5 rounded-full bg-error"></div>
          </div>
          <!-- Bars -->
          <div class="relative z-3">
            <!-- Design specs (completed) -->
            <div class="relative flex items-center h-8">
              <div class="absolute flex items-center rounded overflow-hidden cursor-pointer bg-success hover:shadow-lg" style="left: 10px; width: 200px; height: 18px;">
                <div class="absolute top-0 left-0 bottom-0 bg-black/15 rounded-l" style="width: 100%;"></div>
                <span class="relative text-white px-1.5 truncate z-1" style="font-size: 10px;">Design</span>
              </div>
            </div>
            <!-- Prototype build (in progress) -->
            <div class="relative flex items-center h-8">
              <div class="absolute flex items-center rounded overflow-hidden cursor-pointer bg-primary hover:shadow-lg" style="left: 108px; width: 216px; height: 18px;">
                <div class="absolute top-0 left-0 bottom-0 bg-black/15 rounded-l" style="width: 60%;"></div>
                <span class="relative text-white px-1.5 truncate z-1" style="font-size: 10px;">Prototype</span>
              </div>
            </div>
            <!-- Testing (not started) -->
            <div class="relative flex items-center h-8">
              <div class="absolute flex items-center rounded overflow-hidden cursor-pointer bg-base-content/30 hover:shadow-lg" style="left: 216px; width: 216px; height: 18px;">
                <span class="relative text-white px-1.5 truncate z-1" style="font-size: 10px;">Testing</span>
              </div>
            </div>
            <!-- Documentation (not started) -->
            <div class="relative flex items-center h-8">
              <div class="absolute flex items-center rounded overflow-hidden cursor-pointer bg-base-content/30 hover:shadow-lg" style="left: 324px; width: 108px; height: 18px;">
                <span class="relative text-white px-1.5 truncate z-1" style="font-size: 10px;">Docs</span>
              </div>
            </div>
            <!-- Release (milestone) -->
            <div class="relative flex items-center h-8">
              <div class="absolute w-3 h-3 bg-warning rotate-45 cursor-pointer hover:shadow-lg hover:scale-120" style="left: 430px;"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Requires: tw.min.css

// No JS needed — compact is a CSS-only size variant

Classes Reference

Class	Description
`.gantt`	Root container with CSS variables
`.gantt-compact`	Compact variant (32px rows, 18px bars)
`.gantt-readonly`	Disables bar dragging and resize handles
`.gantt-toolbar`	Top toolbar with title and controls
`.gantt-toolbar-start`	Left section of toolbar
`.gantt-toolbar-end`	Right section of toolbar
`.gantt-title`	Chart title text
`.gantt-zoom-controls`	Segmented zoom level buttons
`.gantt-zoom-btn`	Individual zoom button
`.gantt-zoom-btn-active`	Active zoom level (primary bg)
`.gantt-nav-btn`	Previous/next navigation button
`.gantt-today-btn`	Scroll-to-today button
`.gantt-body`	Main body (flexbox: tasks + chart)
`.gantt-tasks`	Left task panel (fixed width)
`.gantt-tasks-header`	Task panel column header
`.gantt-tasks-body`	Scrollable task list area
`.gantt-task-row`	Single task row in panel
`.gantt-task-row-selected`	Selected row highlight
`.gantt-task-row-group`	Group/parent row (bold, bg)
`.gantt-task-indent`	Indentation spacer for child tasks
`.gantt-task-expand`	Expand/collapse toggle button
`.gantt-task-expand-expanded`	Rotated chevron (expanded state)
`.gantt-task-name`	Task name text (truncated)
`.gantt-chart`	Right chart area container
`.gantt-chart-scroll`	Scrollable chart viewport
`.gantt-chart-inner`	Inner content (set width for total timeline)
`.gantt-header`	Sticky timeline header
`.gantt-header-row`	Header row (primary or secondary)
`.gantt-header-row-primary`	Top-level row with border-bottom
`.gantt-header-cell`	Individual time period cell
`.gantt-header-cell-primary`	Bold cell text
`.gantt-header-cell-today`	Highlighted cell for today
`.gantt-header-cell-weekend`	Weekend background tint
`.gantt-grid`	Background grid overlay
`.gantt-grid-row`	Grid row with bottom border
`.gantt-grid-cell`	Grid column cell
`.gantt-grid-cell-weekend`	Weekend column background
`.gantt-today-line`	Vertical red line marking today
`.gantt-bars`	Container for all task bars
`.gantt-bar-row`	Row wrapper for a bar
`.gantt-bar`	Task bar (absolute positioned)
`.gantt-bar-not-started`	Gray bar for not-started tasks
`.gantt-bar-in-progress`	Primary color bar
`.gantt-bar-completed`	Green bar for completed tasks
`.gantt-bar-delayed`	Red bar for delayed tasks
`.gantt-bar-on-hold`	Warning/yellow bar for on-hold tasks
`.gantt-bar-group`	Thin group/summary bar with arrow ends
`.gantt-bar-selected`	Selected bar with ring outline
`.gantt-bar-dragging`	Semi-transparent during drag
`.gantt-bar-progress`	Dark overlay showing progress %
`.gantt-bar-label`	White text label inside bar
`.gantt-bar-handle`	Resize handle (visible on hover)
`.gantt-bar-handle-start`	Left resize handle
`.gantt-bar-handle-end`	Right resize handle
`.gantt-milestone`	Diamond-shaped milestone marker
`.gantt-milestone-completed`	Green completed milestone
`.gantt-milestone-delayed`	Red delayed milestone
`.gantt-resizer`	Draggable column resizer between panels
`.gantt-tooltip`	Hover tooltip container
`.gantt-tooltip-visible`	Shows the tooltip
`.gantt-dependencies`	SVG container for dependency arrows
`.gantt-dependency`	SVG path for dependency line
`.gantt-dependency-arrow`	SVG arrowhead for dependency
`.gantt-empty`	Empty state container