@matsu1321/react-gantt-chart

v1.0.2

Published

13 days ago

Highly performant, interactive Gantt Chart component for React with virtual scrolling support.

Downloads

461

0High
0Medium
0Low

matsu1321

react gantt gantt-chart react-gantt timeline virtual-scrolling performance typescript

@matsu1321/react-gantt-chart

demo

English | 日本語

🚀 @matsu1321/react-gantt-chart

The ultimate high-performance, flexible Gantt chart component for modern React.

A zero-dependency, ultra-lightweight Gantt chart library that runs smoothly at 60fps even with large-scale projects of over 10,000 tasks.

Built with a custom Zero Dependency architecture, it incorporates vertical virtual scrolling (Virtualization) and jitter-free horizontal scroll synchronization, eliminating all performance degradation regardless of task count.

🌟 Features

⚡ Groundbreaking Performance (Virtualization): Automatically removes off-screen elements from the DOM. Even with 10,000+ tasks, only the visible rows are rendered — zero latency.
🔄 Jitter-free Horizontal Scroll: Uses a single scroll container with position: sticky on the calendar header, completely eliminating the 2-frame delay caused by state-based sync. Smooth even with massive data.
↕️ Perfect Bidirectional Scroll Sync: Left task-name table and right timeline scroll in perfect pixel-level sync with no desync or delay.
📐 High-precision Linear Interpolation: Pixel-perfect coordinate calculation that is unaffected by column-width or month-day differences, with full Daylight Saving Time (DST) support.
🎮 Intuitive Drag & Drop: Modify task duration (slide), resize, and update progress rates with natural mouse operations.
📅 Rich View Modes: Switch between Hour / QuarterDay / HalfDay / Day / Week / Month / Year views.
🌍 Localization Support: Calendar headers and tooltips can be displayed in any locale such as ja-JP.
🔒 Type-Safe (TypeScript): Fully written in TypeScript with bundled type definitions (.d.ts).

📦 Installation

npm install @matsu1321/react-gantt-chart

yarn add @matsu1321/react-gantt-chart

🔌 Quick Start

import React, { useState } from 'react';
import { Gantt, ViewMode, Task } from '@matsu1321/react-gantt-chart';
import '@matsu1321/react-gantt-chart/dist/style.css';

const initialTasks: Task[] = [
  {
    id: 'project-1',
    name: 'Product Development Project',
    start: new Date(2026, 4, 1),
    end: new Date(2026, 4, 15),
    type: 'project',
    progress: 45,
    displayOrder: 1,
    hideChildren: false,
  },
  {
    id: 'task-1-1',
    name: 'Requirement Definition & Design',
    start: new Date(2026, 4, 1),
    end: new Date(2026, 4, 5),
    type: 'task',
    progress: 80,
    project: 'project-1',
    displayOrder: 2,
  },
  {
    id: 'task-1-2',
    name: 'Frontend Development',
    start: new Date(2026, 4, 6),
    end: new Date(2026, 4, 12),
    type: 'task',
    progress: 30,
    project: 'project-1',
    dependencies: ['task-1-1'],
    displayOrder: 3,
  },
  {
    id: 'milestone-1',
    name: 'Alpha Release',
    start: new Date(2026, 4, 15),
    end: new Date(2026, 4, 15),
    type: 'milestone',
    progress: 0,
    project: 'project-1',
    dependencies: ['task-1-2'],
    displayOrder: 4,
  },
];

export const MyGanttChart = () => {
  const [tasks, setTasks] = useState<Task[]>(initialTasks);
  const [view, setView] = useState<ViewMode>(ViewMode.Day);

  const handleDateChange = (updatedTask: Task, _children: Task[]) => {
    setTasks((prev) =>
      prev.map((t) => (t.id === updatedTask.id ? updatedTask : t)),
    );
  };

  const handleProgressChange = (updatedTask: Task, _children: Task[]) => {
    setTasks((prev) =>
      prev.map((t) => (t.id === updatedTask.id ? updatedTask : t)),
    );
  };

  const handleExpanderClick = (task: Task) => {
    setTasks((prev) =>
      prev.map((t) =>
        t.id === task.id ? { ...t, hideChildren: !t.hideChildren } : t,
      ),
    );
  };

  return (
    <div style={{ width: '100%', height: '600px' }}>
      <Gantt
        tasks={tasks}
        viewMode={view}
        locale='en-US'
        ganttHeight={500}
        onDateChange={handleDateChange}
        onProgressChange={handleProgressChange}
        onExpanderClick={handleExpanderClick}
      />
    </div>
  );
};

🛠️ API Reference

`Task` Interface

`ViewMode` Enum

enum ViewMode {
  Hour = 'Hour',
  QuarterDay = 'Quarter Day',
  HalfDay = 'Half Day',
  Day = 'Day',
  Week = 'Week',
  Month = 'Month',
  Year = 'Year',
}

`Gantt` Component Props

Display Options

Styling Options

Event Handlers

Custom Render Props

| Property | Type | Description | | :--------------------------- | :------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------------------- | | calendarTopHeaderFormat | (date: Date, viewMode: ViewMode) => string | Custom formatter for the top row of the calendar header | | calendarBottomHeaderFormat | (date: Date, viewMode: ViewMode) => string | Custom formatter for the bottom row of the calendar header | | TooltipContent | React.FC<{ task, fontSize, fontFamily }> | Custom tooltip component shown on task hover | | TaskListHeader | React.FC<{ headerHeight, rowWidth, fontFamily, fontSize }> | Custom component for the task list header | | TaskListTable | React.FC<{ rowHeight, rowWidth, fontFamily, fontSize, locale, tasks, selectedTaskId, setSelectedTask, onExpanderClick }> | Custom component for the task list rows |

🎨 Styling Customization

Per-Task Styles

Each Task object accepts a styles property for individual color overrides:

const myTask: Task = {
  id: 'task-1',
  name: 'Custom Styled Task',
  start: new Date(2026, 4, 1),
  end: new Date(2026, 4, 10),
  type: 'task',
  progress: 60,
  styles: {
    backgroundColor: '#4f46e5',
    backgroundSelectedColor: '#6366f1',
    progressColor: '#a5b4fc',
    progressSelectedColor: '#c7d2fe',
  },
};

Custom CSS

Import the base stylesheet and override CSS custom properties or class names as needed:

import '@matsu1321/react-gantt-chart/dist/style.css';

📄 License

MIT

🚀 @matsu1321/react-gantt-chart（日本語）

10,000件以上の大規模タスクを登録しても 60fps で快適かつ滑らかに動作する、React 向け超軽量・高性能ガントチャートコンポーネントライブラリ です。

ゼロ依存・完全独自実装のコアアーキテクチャに、垂直仮想スクロール（Virtualization） と ガタつきのない横スクロール同期 を組み込み、膨大なタスクが登録されても一切のパフォーマンス劣化がありません。

🌟 主な特徴

⚡ 圧倒的なパフォーマンス (Virtualization): 画面外の要素を DOM から自動排除し、常に表示領域内の数十行のみを描画。10,000件以上のタスクでも遅延ゼロ。
🔄 ガタつきのない横スクロール: カレンダーヘッダーに position: sticky を採用した単一スクロールコンテナ構造により、state 経由の2フレーム遅延を完全排除。大量データでも滑らか。
↕️ 滑らかな双方向スクロール同期: 左側のタスク名テーブルと右側のタイムラインの縦スクロールをピクセル単位で完全に同期連動。
📐 高精度な線形補間配置: 日付列幅・月日数の違いに左右されないピクセルパーフェクトな座標計算（サマータイム対応）。
🎮 ドラッグ＆ドロップインタラクション: 期間の移動（スライド）、伸縮（リサイズ）、進捗率の変更をマウス操作で直感的に操作可能。
📅 豊富なビューモード: 時間 / 6時間 / 半日 / 日 / 週 / 月 / 年の切り替えに対応。
🌍 ローカライズ対応: カレンダー日付ヘッダーやツールチップを ja-JP など任意のロケールで表示可能。
🔒 型安全な設計 (TypeScript): TypeScript で完全記述されており、型定義ファイル（.d.ts）を同梱。

📦 インストール

npm install @matsu1321/react-gantt-chart

または

yarn add @matsu1321/react-gantt-chart

🔌 クイックスタート

import React, { useState } from 'react';
import { Gantt, ViewMode, Task } from '@matsu1321/react-gantt-chart';
import '@matsu1321/react-gantt-chart/dist/style.css';

const initialTasks: Task[] = [
  {
    id: 'project-1',
    name: '製品開発プロジェクト',
    start: new Date(2026, 4, 1),
    end: new Date(2026, 4, 15),
    type: 'project',
    progress: 45,
    displayOrder: 1,
    hideChildren: false,
  },
  {
    id: 'task-1-1',
    name: '要件定義・設計',
    start: new Date(2026, 4, 1),
    end: new Date(2026, 4, 5),
    type: 'task',
    progress: 80,
    project: 'project-1',
    displayOrder: 2,
  },
  {
    id: 'task-1-2',
    name: 'フロントエンド開発',
    start: new Date(2026, 4, 6),
    end: new Date(2026, 4, 12),
    type: 'task',
    progress: 30,
    project: 'project-1',
    dependencies: ['task-1-1'],
    displayOrder: 3,
  },
  {
    id: 'milestone-1',
    name: 'アルファ版リリース',
    start: new Date(2026, 4, 15),
    end: new Date(2026, 4, 15),
    type: 'milestone',
    progress: 0,
    project: 'project-1',
    dependencies: ['task-1-2'],
    displayOrder: 4,
  },
];

export const MyGanttChart = () => {
  const [tasks, setTasks] = useState<Task[]>(initialTasks);
  const [view, setView] = useState<ViewMode>(ViewMode.Day);

  const handleDateChange = (updatedTask: Task, _children: Task[]) => {
    setTasks((prev) =>
      prev.map((t) => (t.id === updatedTask.id ? updatedTask : t)),
    );
  };

  const handleProgressChange = (updatedTask: Task, _children: Task[]) => {
    setTasks((prev) =>
      prev.map((t) => (t.id === updatedTask.id ? updatedTask : t)),
    );
  };

  const handleExpanderClick = (task: Task) => {
    setTasks((prev) =>
      prev.map((t) =>
        t.id === task.id ? { ...t, hideChildren: !t.hideChildren } : t,
      ),
    );
  };

  return (
    <div style={{ width: '100%', height: '600px' }}>
      <Gantt
        tasks={tasks}
        viewMode={view}
        locale='ja-JP'
        ganttHeight={500}
        onDateChange={handleDateChange}
        onProgressChange={handleProgressChange}
        onExpanderClick={handleExpanderClick}
      />
    </div>
  );
};

🛠️ API リファレンス

`Task` インターフェース

`ViewMode` 列挙型

enum ViewMode {
  Hour = 'Hour', // 時間
  QuarterDay = 'Quarter Day', // 6時間
  HalfDay = 'Half Day', // 半日
  Day = 'Day', // 日
  Week = 'Week', // 週
  Month = 'Month', // 月
  Year = 'Year', // 年
}

`Gantt` コンポーネント Props

表示設定

スタイリング設定

イベントハンドラー

カスタムレンダリング Props

| プロパティ名 | 型 | 説明 | | :--------------------------- | :------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------- | | calendarTopHeaderFormat | (date: Date, viewMode: ViewMode) => string | カレンダーヘッダー上段の日付表示をカスタムするフォーマッター | | calendarBottomHeaderFormat | (date: Date, viewMode: ViewMode) => string | カレンダーヘッダー下段の日付表示をカスタムするフォーマッター | | TooltipContent | React.FC<{ task, fontSize, fontFamily }> | タスクホバー時に表示されるカスタムツールチップコンポーネント | | TaskListHeader | React.FC<{ headerHeight, rowWidth, fontFamily, fontSize }> | タスクリストのヘッダーをカスタムするコンポーネント | | TaskListTable | React.FC<{ rowHeight, rowWidth, fontFamily, fontSize, locale, tasks, selectedTaskId, setSelectedTask, onExpanderClick }> | タスクリストの行をカスタムするコンポーネント |

🎨 スタイリングのカスタマイズ

タスクごとのスタイル設定

各タスクオブジェクト（Task）には styles プロパティを設定でき、タスクごとに個別のカラーデザインを定義できます。

const myTask: Task = {
  id: 'task-1',
  name: 'カスタムスタイルタスク',
  start: new Date(2026, 4, 1),
  end: new Date(2026, 4, 10),
  type: 'task',
  progress: 60,
  styles: {
    backgroundColor: '#4f46e5',
    backgroundSelectedColor: '#6366f1',
    progressColor: '#a5b4fc',
    progressSelectedColor: '#c7d2fe',
  },
};

カスタム CSS

ベーススタイルシートをインポートした上で、CSS カスタムプロパティやクラス名をオーバーライドしてください。

import '@matsu1321/react-gantt-chart/dist/style.css';

📄 ライセンス

MIT

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

@matsu1321/react-gantt-chart

🚀 @matsu1321/react-gantt-chart

🌟 Features

📦 Installation

🔌 Quick Start

🛠️ API Reference

Task Interface

ViewMode Enum

Gantt Component Props

🎨 Styling Customization

Per-Task Styles

Custom CSS

📄 License

🚀 @matsu1321/react-gantt-chart（日本語）

🌟 主な特徴

📦 インストール

🔌 クイックスタート

🛠️ API リファレンス

Task インターフェース

ViewMode 列挙型

Gantt コンポーネント Props

🎨 スタイリングのカスタマイズ

タスクごとのスタイル設定

カスタム CSS

📄 ライセンス

`Task` Interface

`ViewMode` Enum

`Gantt` Component Props

`Task` インターフェース

`ViewMode` 列挙型

`Gantt` コンポーネント Props