@jaeungkim/gantt-chart

Lightweight, high-performance Gantt chart component for React applications. Designed for fast rendering with virtualization and clean, minimal aesthetics.

🎯 Motivation

I originally wanted to use Microsoft Project's Gantt Chart for personal project management, but it required a subscription 😔. Thus, I decided to build my own Gantt chart, referencing various open-source projects and examples, including MS Project, DHTMLX, Frappe Gantt Chart, and etc.

Since there aren't many open-source Gantt chart solutions available, I hope this project will be useful for others as well. I am very open to feedback, feature requests, and contributions to make this Gantt chart as robust and versatile as possible.

Currently, this project is built specifically for React due to my development background, but in the future, I may explore making it available for other frameworks as well. Since this is my first open-source project, I look forward to learning and improving it with the community!

✨ Features

• 📆 Multiple timeline scales: Day, Week, Month, Year
• 🔄 Drag-and-drop support:
  • Move entire task bars
  • Resize from left/right edges
  • Snap to configured intervals
• 🧲 Smart dependency arrows (FS, SS, FF, SF)
• ⚡ Virtualized rendering for performance
• 🌙 Light/Dark/System theme support
• 📍 Today marker indicator
• 💬 Drag tooltip showing date changes
• 📦 Lightweight with minimal dependencies

📺 Demo

🚀 Getting Started

Installation

npm install @jaeungkim/gantt-chart
# or
yarn add @jaeungkim/gantt-chart

Basic Usage

import { ReactGanttChart } from '@jaeungkim/gantt-chart';
import type { Task } from '@jaeungkim/gantt-chart';

const tasks: Task[] = [
  {
    id: '1',
    name: 'Project Kickoff',
    startDate: '2024-06-01T09:00:00Z',
    endDate: '2024-06-03T17:00:00Z',
    parentId: null,
    sequence: '1',
    dependencies: [],
  },
  {
    id: '2',
    name: 'Requirements Gathering',
    startDate: '2024-06-04T09:00:00Z',
    endDate: '2024-06-10T17:00:00Z',
    parentId: null,
    sequence: '2',
    dependencies: [{ targetId: '1', type: 'FS' }],
  },
];

export default function App() {
  return (
    <ReactGanttChart
      tasks={tasks}
      height="100vh"
      width="100%"
      theme="system"
      defaultScale="month"
      onTasksChange={(updated) => console.log('Tasks updated:', updated)}
    />
  );
}

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | tasks | Task[] | [] | Array of task objects to render | | onTasksChange | (tasks: Task[]) => void | - | Callback when tasks are moved or resized | | height | number \| string | 600 | Chart height (px or CSS value) | | width | number \| string | "100%" | Chart width (px or CSS value) | | theme | "light" \| "dark" \| "system" | - | Theme mode | | defaultScale | "day" \| "week" \| "month" \| "year" | "month" | Initial timeline scale | | className | string | - | Additional CSS class for the container |

Task Format

All dates must be in UTC ISO string format: "2024-06-01T09:00:00Z"

interface Task {
  id: string;
  name: string;
  startDate: string;    // UTC ISO string
  endDate: string;      // UTC ISO string
  parentId: string | null;
  sequence: string;
  dependencies?: TaskDependency[];
}

interface TaskDependency {
  targetId: string;
  type: DependencyType;
}

type DependencyType = 'FS' | 'SS' | 'FF' | 'SF';
// FS = Finish-to-Start
// SS = Start-to-Start
// FF = Finish-to-Finish
// SF = Start-to-Finish

Timeline Scales

| Scale | Header Label | Tick Unit | Drag Step | |-------|-------------|-----------|-----------| | day | Day | Hour | 1 hour | | week | Week | Day | 6 hours | | month | Month | Day | 1 day | | year | Year | Month | 7 days |

Switch scales using the dropdown at the top-right of the chart.

Theming

The chart supports three theme modes:

• light - Light background with dark text
• dark - Dark background with light text
• system - Follows system preference (uses prefers-color-scheme)

<ReactGanttChart theme="dark" ... />

Roadmap

• [ ] Left sidebar for task names
• [ ] Right sidebar for task details
• [ ] Collapsible parent-child rows
• [ ] Inline editing for task names
• [ ] Export to PNG/SVG
• [ ] Custom bar colors

🤝 Contributing

Pull requests are welcome!
If you find bugs or have suggestions, feel free to open an issue or contribute directly.

📄 License

MIT © jaeungkim