VikCraft Pro — Interactive Gantt Chart v2.0

Feature Toggle Panel

Zoom Controls View Modes (D/W/M) Column Resize Today Line Critical Path Export (PDF/Excel/CSV) Fullscreen Status Bar AI Assistant Theme:

Live Demo

Component Details

Dual View: Task & UserSwitch between task-based hierarchy and user/resource-based grouping with a single click.
Multi-Level HierarchyDeep parent-child nesting with expand/collapse controls at every level.
Critical Path AnalysisAutomatic forward/backward pass algorithm highlights zero-float tasks in red.
Today Line & Auto-ScrollRed line marks the current date with automatic scroll-to-today on load.
Predecessor/Successor ManagementFull dependency management with visual bezier curve connectors.
Lag ManagementDefine lag (delay) days between predecessor and successor tasks.
Export: PDF, Excel, CSV, PNGExport the full Gantt chart including visual timeline to PDF, or data to Excel/CSV.
AI AssistantBuilt-in AI chat that analyzes your project data - supports direct API key or backend proxy.
Drag & ResizeMove and resize task bars interactively with left/right resize handles.
6 ThemesLight, Dark, Midnight, Blue, Green, and Narrow compact themes.
Zoom & View ModesDay, Week, Month views with zoom in/out and zoom-to-fit.
Fullscreen ModeToggle fullscreen for focused project planning.
Task Click & ScrollClick any task in grid or chart to highlight and auto-scroll to it.
Keyboard NavigationDelete key removes selected task, Escape deselects.
Status BarReal-time project statistics: total tasks, completion, progress, critical count.
Column ResizingDrag column headers to resize grid columns dynamically.
Bar TooltipsHover over task bars to see details including dates, progress, and critical status.
Configurable ColumnsDefine any task fields as columns with custom types and formatting.
Progress VisualizationMini progress bars in grid cells and filled task bars on the timeline.
Event CallbacksHooks for onTaskAdd, onTaskUpdate, onTaskDelete for backend sync.

VikCraft Gantt v2.0 - Complete Rewrite

Dual-Tab View - Switch between Task View (hierarchical) and User View (grouped by resource)
Multi-Level Deep Hierarchy - Unlimited nesting with expand/collapse toggles
Critical Path Algorithm - Forward/backward pass with zero-float detection
Today Line - Red vertical line marking current date with auto-scroll
Lag Management - Define delay days between predecessor and successor tasks
PDF Export - Print-friendly export including the visual Gantt chart timeline
Excel Export - Download task data as .xls with project statistics
CSV Export - Clean CSV download of all task data
PNG Export - Screenshot export (requires html2canvas)
AI Chat Assistant - Analyze project data with AI (Anthropic API or backend proxy)
6 Themes - Added Midnight, Blue, and Green themes
Fullscreen Mode - Toggle for distraction-free planning
Status Bar - Live task counts, completion rates, critical path count
Bar Tooltips - Hover tooltips showing task details
Task Click/Select - Click to highlight and auto-scroll both grid and chart
Keyboard Shortcuts - Delete to remove, Escape to deselect
Left Resize Handle - Resize task start date by dragging left edge
Progress Mini-Bars - Visual progress indicators in grid cells
Feature Toggle Panel - Turn features on/off for testing
Complete Architecture Rewrite - Cleaner code, better performance, modular design

1. Include Files

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

2. Create Container

<div id="my-gantt"></div>

3. Initialize

const tasks = [
  { id: 1, name: 'Kick-off', start: '2025-07-05', end: '2025-07-06',
    progress: 100, assignedUser: ['alice'], status: 'Completed' },
  { id: 2, name: 'Research Phase', start: '2025-07-07', end: '2025-07-19',
    progress: 75, assignedUser: ['bob'], dependencies: [1], lag: 1 },
  { id: 3, name: 'User Interviews', start: '2025-07-08', end: '2025-07-12',
    progress: 90, parent: 2, assignedUser: ['bob'] }
];

const gantt = new VikCraftGantt('my-gantt', tasks, {
  theme: 'dark',
  resources: [
    { id: 'alice', name: 'Alice Smith' },
    { id: 'bob', name: 'Bob Johnson' }
  ],
  features: {
    zoom: true, viewModes: true, todayLine: true,
    criticalPath: true, export: true, fullscreen: true
  },
  enableAI: true,
  aiConfig: { apiKey: 'your-key-here' },
  onTaskUpdate: (task) => console.log('Updated:', task)
});

Option	Type	Default	Description
`theme`	String	`'light'`	Theme: 'light', 'dark', 'midnight', 'blue', 'green', 'narrow'
`resources`	Array	`[]`	Resource/user objects with `id` and `name`
`columns`	Array	(defaults)	Column definitions for the grid panel
`features.zoom`	Boolean	`true`	Enable zoom controls
`features.viewModes`	Boolean	`true`	Enable Day/Week/Month view switching
`features.todayLine`	Boolean	`true`	Show red "today" line on timeline
`features.criticalPath`	Boolean	`true`	Calculate and highlight critical path
`features.export`	Boolean	`true`	Enable export dropdown (PDF/Excel/CSV/PNG)
`features.fullscreen`	Boolean	`true`	Enable fullscreen toggle
`features.statusBar`	Boolean	`true`	Show status bar with project stats
`features.columnResize`	Boolean	`true`	Allow column width dragging
`enableAI`	Boolean	`false`	Enable AI assistant panel
`aiConfig.apiKey`	String	`''`	Anthropic API key for direct browser calls
`aiConfig.backendUrl`	String	`''`	Backend proxy URL for AI requests
`onTaskAdd`	Function	`null`	Callback after task creation
`onTaskUpdate`	Function	`null`	Callback after task update
`onTaskDelete`	Function	`null`	Callback after task deletion

Property	Type	Description
`id`	Number	Required. Unique task ID.
`name`	String	Required. Task name.
`start`	String	Required. Start date (YYYY-MM-DD).
`end`	String	Required. End date (YYYY-MM-DD).
`progress`	Number	Completion percentage (0-100).
`parent`	Number\|null	Parent task ID for hierarchy. null = top-level.
`dependencies`	Array<Number>	Predecessor task IDs.
`lag`	Number	Lag days after predecessor completion.
`assignedUser`	Array<String>	Assigned resource IDs.
`status`	String	Task status label.
`notes`	String	Additional notes.

6 Built-in Themes

'light' - Clean white theme
'dark' - Dark navy theme
'midnight' - Deep indigo/purple dark theme
'blue' - Light blue-tinted theme
'green' - Light green-tinted theme
'narrow' - Compact theme with smaller rows

// Set theme on init
const gantt = new VikCraftGantt('container', tasks, { theme: 'midnight' });

// Change theme dynamically
gantt.setTheme('dark');

CSS Custom Properties

Override CSS variables to create custom themes:

.gantt-wrapper.theme-custom {
  --gantt-primary: #your-color;
  --gantt-task-bar: #your-bar-color;
  --gantt-bg: #your-background;
  /* ... see vikcraft-gantt-styles.css for all variables */
}

Methods

Method	Description
`getTasks()`	Returns deep copy of all tasks
`getTask(id)`	Get a single task by ID
`addTask(data)`	Add a new task programmatically
`updateTask(id, data)`	Update a task by ID
`deleteTask(id)`	Delete a task and its children
`getCriticalPath()`	Returns array of critical path task IDs
`setTheme(name)`	Switch theme dynamically
`changeView(mode)`	Switch view: 'day', 'week', 'month'
`zoomIn() / zoomOut()`	Adjust zoom level
`zoomToFit()`	Auto-fit timeline to container
`scrollToTask(id)`	Scroll to a task in both grid and chart
`scrollToToday()`	Scroll chart to today's date
`toggleFullscreen()`	Toggle fullscreen mode
`setAIApiKey(key)`	Set AI API key at runtime
`destroy()`	Clean up and remove the Gantt chart

AI Assistant

VikCraft Gantt v2.0 includes a built-in AI assistant that can analyze your project data and answer questions about scheduling, resources, and risks.

Direct API Mode

const gantt = new VikCraftGantt('container', tasks, {
  enableAI: true,
  aiConfig: {
    apiKey: 'sk-ant-...', // Anthropic API key
    model: 'claude-sonnet-4-20250514',
    maxTokens: 1024,
    quickActions: [
      { label: 'Summary', prompt: 'Summarize the project status' },
      { label: 'Risks', prompt: 'Identify scheduling risks' }
    ]
  }
});

Backend Proxy Mode

const gantt = new VikCraftGantt('container', tasks, {
  enableAI: true,
  aiConfig: {
    backendUrl: '/api/ai/chat',
    backendHeaders: { 'Authorization': 'Bearer your-token' }
  }
});

The backend receives a POST with { messages, system, model, max_tokens, projectContext }. Return { content: [{ text: "..." }] } or { response: "..." }.

VikCraft Interactive Gantt Chart v2.0