vikcraft-gantt

A feature-rich vanilla JavaScript Gantt Chart library — no dependencies.

Features

• Dual-tab view: Task timeline & User/resource view
• Multi-level task hierarchy (unlimited depth)
• Drag-and-drop task resizing and moving
• Critical path highlighting
• Predecessor / successor / lag dependencies
• Today line & milestone markers
• PDF and Excel export
• AI chat assistant (requires Anthropic API key)
• Fullscreen mode
• 6 built-in themes
• Keyboard navigation
• Sticky header with date scales (day / week / month / quarter / year)

Install

npm install vikcraft-gantt

Quick Start

Via <script> tag (browser)

<link rel="stylesheet" href="node_modules/vikcraft-gantt/vikcraft-gantt-styles.css">
<script src="node_modules/vikcraft-gantt/vikcraft-gantt-script.js"></script>

<div id="my-gantt" style="height:600px;"></div>

<script>
  const tasks = [
    { id: 1, name: 'Design Phase',    start: '2025-01-01', end: '2025-01-15', progress: 100 },
    { id: 2, name: 'Development',     start: '2025-01-16', end: '2025-02-28', progress: 60, depends: [1] },
    { id: 3, name: 'Testing',         start: '2025-03-01', end: '2025-03-15', progress: 0,  depends: [2] },
  ];

  const gantt = new VikCraftGantt('my-gantt', tasks, {
    theme: 'dark',
    scale: 'week',
  });
</script>

Via bundler (Vite / Webpack)

import VikCraftGantt from 'vikcraft-gantt';
import 'vikcraft-gantt/vikcraft-gantt-styles.css';

const gantt = new VikCraftGantt('my-gantt', tasks, options);

Task Object

{
  id:          1,
  name:        'Task Name',
  start:       '2025-01-01',   // YYYY-MM-DD
  end:         '2025-01-15',   // YYYY-MM-DD
  progress:    50,             // 0–100
  depends:     [1, 2],        // IDs of predecessor tasks
  assignee:    'Alice',
  milestone:   false,
  color:       '#3b82f6',     // optional override
}

Configuration Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | theme | string | 'dark' | dark / light / blue / green / carbon / ocean | | scale | string | 'week' | day / week / month / quarter / year | | showCriticalPath | boolean | true | Highlight critical path | | showToday | boolean | true | Show today vertical line | | ai | object | null | { apiKey: 'sk-ant-...' } for AI chat |

API

gantt.setTasks(newTasks)       // Replace all tasks
gantt.setTheme('ocean')        // Change theme
gantt.setScale('month')        // Change time scale
gantt.exportPDF()              // Download PDF
gantt.exportExcel()            // Download Excel
gantt.scrollToToday()          // Scroll to current date
gantt.destroy()                // Remove from DOM

CDN

<link  rel="stylesheet" href="https://unpkg.com/vikcraft-gantt/vikcraft-gantt-styles.css">
<script src="https://unpkg.com/vikcraft-gantt/vikcraft-gantt-script.js"></script>

License

MIT © VikCraft Pro