🚀 AroGantt V3 - Enterprise JavaScript Gantt Chart

Version: 3.4.1 | Architecture: Zero-Dependencies, Virtual Rendering Engine

AroGantt V3 is a heavy-duty project scheduling solution designed specifically for Enterprise systems. Powered by a Virtual Rendering Engine and PMI-standard (Project Management Institute) logic, AroGantt smoothly handles massive projects with up to 100,000+ tasks at 60 FPS without crashing the browser.

🛠️ 1. INTERACTIVE UI & USER EXPERIENCE (Desktop & Mobile)

AroGantt is built to provide a seamless, native-app-like experience across all devices.

📅 A. Timeline Operations (Right Panel)

• Infinity Drag & Drop: Drag a task bar to change its start date. If you drag it to the edge of the screen, the timeline automatically expands and scrolls into the future or past.

• Smart Resize: Drag the left or right handles of a task to precisely adjust its duration.

• Progress Slider: Drag the bottom handle of any task to intuitively update its completion percentage (% Progress).

• Draw Dependencies (Add Links): Click and drag from the connection points of one task to another to create relationships (Finish-to-Start, Start-to-Start, etc.). The engine automatically blocks invalid links (e.g., circular loops, parent-to-child).

• Date Range Selection: * On Desktop: Click and drag on the empty grid to select a date range.

  • On Mobile: Touch & Hold (Long Press) for 0.5s, then drag to select a range. A popup will trigger to let you add a new task perfectly fitted to those dates.

• Scroll to Today: One-click button to smoothly scroll the timeline back to the current date.

📋 B. Grid & Data Management (Left Panel)

• Column Resizing: Drag the header dividers to resize columns. Layout automatically adjusts dynamically.

• Reorder & Sort: Drag and drop rows to reorder tasks. Click on column headers to sort data alphabetically, numerically, or by date, while strictly preserving the Parent-Child hierarchy.

• WBS Hierarchy Management: Easily change the task level (Indent/Outdent) to group tasks under a Project/Summary task. The system auto-generates standard WBS numbers (e.g., 1.1, 1.2.1).

🧠 C. Project Management Logic (PMI Standard)

• Auto-Schedule (Domino Effect): When enabled, moving a task or changing its duration will automatically push or pull all dependent tasks in the chain.

• Time Constraints: Right-click a task to set strict rules:

  • 🚀 ASAP (As Soon As Possible)

  • 📌 SNET (Start No Earlier Than)

  • ⚓ MSO (Must Start On)

• Milestones: Tasks with 0 duration automatically render as diamond-shaped Milestones.

• Holidays & Day-offs: Configure non-working days. The timeline will render them with striped red backgrounds.

👥 D. Resource & Workload Management

• Dual-View Sync: Split the screen to view the Gantt Chart on top and the Resource Workload on the bottom. Horizontal scrolling is perfectly synchronized.

• Workload Heatmap: Automatically calculates the working hours of each assignee per day. Displays visual warnings for OVERLOAD (e.g., > 8 hours/day).

• Smart Navigation (Jump to Task): Click on any user's badge in the Resource panel. The system will auto-scroll the timeline to precisely locate their tasks, opening a mini-navigation menu to jump between their assignments.

• Virtual Grouping (Group by Assignee): Group the entire project view by Assignees with a single click, without destroying your original WBS database structure.

📱 E. Native Mobile Experience

• Inertia Scrolling: Swipe the grid or timeline, and it glides smoothly with physical momentum (friction-based deceleration) just like native iOS/Android apps.

• Touch Raycast: When connecting links on mobile, the engine acts as an "aim-assist", automatically snapping your finger's path to the nearest task.

⌨️ F. Keyboard Shortcuts (Power User)

• Ctrl + Z / Ctrl + Y: Undo / Redo (Time Machine engine).

• Ctrl + Mouse Wheel: Zoom in/out seamlessly from Hour ↔ Day ↔ Week ↔ Month ↔ Year.

• Arrow Up / Down: Navigate through rows.

• Ctrl + Arrow Left / Right: Indent / Outdent task hierarchy (Change WBS).

• Delete: Remove the selected task.

🚀 AroGantt Developer Documentation

Welcome to AroGantt, the most capable enterprise Gantt chart component for JavaScript. Built for developers who won't compromise on performance. AroGantt renders 100,000+ tasks at a steady 60fps with zero jank, featuring built-in Auto-Scheduling, Critical Path, and Resource Management.

✨ Core Features

• Blazing Fast Virtual Rendering: Only mounts what's visible on the screen. Handles 100,000+ tasks and dependencies flawlessly.

• Smart Auto-Scheduling: Full PMI constraint suite (SNET, MSO, FNLT). Changes cascade instantly through dependencies.

• Critical Path Engine: Instantly calculates and highlights the longest chain of dependent tasks to project completion.

• Resource Management: Workload heatmap at a glance. Auto-alerts fire at 100%+ capacity so nobody burns out.

• Excel-like Editing: Drag & drop tasks, inline-edit cells, Undo/Redo history stack, and keyboard shortcuts.

• Framework Agnostic: Works seamlessly with React, Vue, Angular, TypeScript, or Vanilla JS. No heavy dependencies.

• Infinite Theming: Built-in Light/Dark modes, and fully customizable CSS variables for your brand.

📦 1. Installation & Quick Start

AroGantt is distributed as a lightweight, bundle-ready ES Module.

HTML / Vanilla JS

Simply import the module and initialize it on a DOM element.

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="/dist/arogantt.css">
</head>
<body>
    <div id="gantt-container" style="width: 100%; height: 100vh;"></div>
    
    <script type="module">
        import AroGantt from './dist/arogantt.min.js';

        const gantt = new AroGantt(document.getElementById('gantt-container'), {
            theme: 'light',
            autoSchedule: true,
            criticalPath: false
        });

        // Load your data
        gantt.loadData([
            { id: 1, name: "Phase 1 - Foundation", start_date: "2026-03-01", duration: 5, progress: 100 },
            { id: 2, name: "Design System", start_date: "2026-03-01", duration: 3, parent: 1, assignee: "Alex T." }
        ]);
    </script>
</body>
</html>

React / Vue / Angular

If you are using a bundler (Webpack, Vite, Rollup), you can import it directly into your component lifecycle (e.g., useEffect in React or onMounted in Vue).

import AroGantt from 'arogantt'; 

import 'arogantt/dist/arogantt.css'; 

// Inside your component mount logic: 
const ganttInstance = new AroGantt(containerRef.current, configOptions);

⚙️ 2. Configuration Options

Pass an options object as the second parameter when creating a new AroGantt instance.

📊 3. Data Structure

AroGantt expects an array of task objects and (optionally) an array of links.

Task Object

{
    id: "T100",                 // Required: Unique identifier
    name: "API Integration",    // Required: Task name
    start_date: "2026-04-15",   // Required: YYYY-MM-DD format
    duration: 5,                // Required: Duration in days
    end_date: "2026-04-20",     // Optional: Overrides duration if provided
    parent: "P1",               // Optional: ID of the parent summary task
    progress: 45,               // Optional: 0 to 100
    assignee: "Sara K.",        // Optional: Name or ID for Resource View
    status: "status-inprogress" // Optional: CSS class suffix for modern gradient colors
}

Link Object (Dependencies)

{
    id: "L1",
    source: "T100", // ID of the predecessor task
    target: "T101", // ID of the successor task
    type: "FS"      // Finish-to-Start (FS), Start-to-Start (SS), Finish-to-Finish (FF), Start-to-Finish (SF)
}

🛠️ 4. API Methods

Interact with the Gantt chart programmatically after initialization.

• gantt.loadData(tasks: Array, links?: Array)

  Clears current data and loads the new dataset. Optimized for huge payloads (up to 100k+ items).

• gantt.updateTask(taskId: string, updates: Object)

  Partially updates a specific task and triggers a re-render.

  Example: gantt.updateTask(1, { progress: 100, status: 'status-done' })

• gantt.toggleAutoSchedule(state?: boolean)

  Turns the Auto-Scheduling engine on or off.

• gantt.toggleCriticalPath(state?: boolean)

  Highlights or hides the critical path.

• gantt.setTheme(themeName: string)

  Switches the UI theme dynamically ('light' or 'dark').

• gantt.exportToExcel(fileName?: string)

  Exports the current grid view to an XLSX file.

• gantt.exportToPDF(options?: Object)

  Generates a high-quality PDF of the Gantt chart.

• gantt.destroy()

  Properly unbinds all DOM events (click, mousedown, scroll) and clears memory. Crucial for Single Page Applications (SPAs) to prevent memory leaks before the component unmounts.

🎧 5. Event Listeners (Webhooks)

Listen to user interactions to sync data back to your backend/database.

// Triggered when a task is moved, resized, or edited inline
gantt.on('onTaskUpdated', (task, changes) => {
    console.log(`Task ${task.id} updated!`, changes);
    // Call your API: fetch('/api/tasks/' + task.id, { method: 'PUT', body: ... })
});

// Triggered when a new link (dependency) is drawn
gantt.on('onLinkCreated', (link) => {
    console.log(`New dependency: Task ${link.source} -> Task ${link.target}`);
});

// Triggered when Auto-Schedule modifies multiple tasks automatically
gantt.on('onAutoScheduleApplied', (updatedTasksArray) => {
    console.log(`${updatedTasksArray.length} tasks were auto-rescheduled.`);
});

🎨 6. Customizing Task Colors (Silicon Valley Style)

AroGantt uses CSS variables and status classes for elegant, gradient-based task bars. You don't need to pass hex codes in JS. Just return the status property in your data, and define it in your CSS:

/* Your custom stylesheet */
.js-gantt-bar-task.status-open       { background: linear-gradient(90deg, #94a3b8, #64748b); }
.js-gantt-bar-task.status-inprogress { background: linear-gradient(90deg, #6366f1, #4f46e5); color: #fff; }
.js-gantt-bar-task.status-done       { background: linear-gradient(90deg, #2dd4bf, #0d9488); }