React Gantt Chart

A powerful, customizable Gantt chart component for React applications with TypeScript support. Perfect for project management, scheduling, and timeline visualization with interactive features and extensive customization options.

Installation

npm install @aniruddha1806/gantt-chart

Features

• 📅 Interactive Gantt charts with task bars and timelines
• 🎯 Milestone support with different types (normal, critical, completed)
• 🔗 Task dependencies with visual connection lines
• 📊 Progress tracking with visual indicators
• 🖱️ Interactive tooltips and click handlers
• 📱 Responsive design with horizontal/vertical scrolling
• 🎨 Extensive customization (colors, dimensions, styling)
• 📍 Today marker and weekend highlighting
• 🔄 Virtualization support for large datasets
• 📏 Flexible date ranges and custom date formatting
• 📝 TypeScript support with full type definitions
• ♿ Accessibility-friendly structure
• 🪶 Zero dependencies for chart rendering

Quick Start

Basic Gantt Chart

import { GanttChart } from '@aniruddha1806/gantt-chart';

function App() {
  const tasks = [
    {
      id: 1,
      label: 'Project Planning',
      startDate: new Date('2024-01-01'),
      endDate: new Date('2024-01-15'),
      color: '#3b82f6',
      progress: 100
    },
    {
      id: 2,
      label: 'Development Phase',
      startDate: new Date('2024-01-10'),
      endDate: new Date('2024-02-28'),
      color: '#10b981',
      progress: 60,
      dependencies: [1]
    },
    {
      id: 3,
      label: 'Testing & QA',
      startDate: new Date('2024-02-15'),
      endDate: new Date('2024-03-15'),
      color: '#f59e0b',
      progress: 30,
      dependencies: [2]
    }
  ];

  const milestones = [
    {
      id: 'milestone-1',
      label: 'Project Kickoff',
      date: new Date('2024-01-01'),
      type: 'normal'
    },
    {
      id: 'milestone-2',
      label: 'Beta Release',
      date: new Date('2024-02-28'),
      type: 'critical'
    }
  ];

  return (
    <GanttChart
      tasks={tasks}
      milestones={milestones}
      width="100%"
      height={400}
      showToday={true}
      showDependencies={true}
    />
  );
}

Advanced Configuration

import { GanttChart } from '@aniruddha1806/gantt-chart';

function AdvancedExample() {
  const tasks = [
    // ... your tasks
  ];

  const milestones = [
    // ... your milestones
  ];

  return (
    <GanttChart
      tasks={tasks}
      milestones={milestones}
      width="100%"
      height={600}
      rowHeight={50}
      columnWidth={80}
      showToday={true}
      showGrid={true}
      showDependencies={true}
      highlightWeekends={true}
      separateMilestoneRow={true}
      showMilestoneLabels={true}
      virtualized={true}
      onTaskClick={(task) => console.log('Task clicked:', task)}
      onMilestoneClick={(milestone) => console.log('Milestone clicked:', milestone)}
    />
  );
}

Props

Core Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | tasks | GanttTask[] | required | Array of tasks to display | | milestones | GanttMilestone[] | [] | Array of milestones | | width | string \| number | "100%" | Chart width | | height | string \| number | 500 | Chart height |

Layout Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | headerHeight | number | 40 | Height of date header | | rowHeight | number | 40 | Height of each task row | | columnWidth | number | 60 | Width of date columns | | barCornerRadius | number | 0 | Border radius of task bars |

Display Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | showToday | boolean | true | Show today marker line | | showGrid | boolean | true | Show grid lines | | showDependencies | boolean | false | Show dependency connections | | highlightWeekends | boolean | false | Highlight weekend columns | | showMilestoneLabels | boolean | false | Show milestone labels | | separateMilestoneRow | boolean | true | Separate row for milestones |

Performance Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | virtualized | boolean | false | Enable virtualization for large datasets |

Color Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | todayColor | string | "#4338CA" | Today marker color | | gridColor | string | "#E5E7EB" | Grid line color | | barFillColor | string | "#4F46E5" | Default task bar color | | barStrokeColor | string | "#4338CA" | Task bar border color | | weekendColor | string | "#F3F4F6" | Weekend highlight color | | milestoneColor | string | "#EF4444" | Default milestone color |

Styling Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | className | string | undefined | CSS class for container | | headerClassName | string | undefined | CSS class for header | | rowClassName | string | undefined | CSS class for rows | | barClassName | string | undefined | CSS class for task bars | | tooltipClassName | string | undefined | CSS class for tooltips |

Event Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | onTaskClick | (task: GanttTask) => void | undefined | Task click handler | | onMilestoneClick | (milestone: GanttMilestone) => void | undefined | Milestone click handler |

Data Types

type GanttTask = {
  id: string | number;
  label: string;
  startDate: Date;
  endDate: Date;
  color?: string;
  progress?: number;
  dependencies?: (string | number)[];
};

type GanttMilestone = {
  id: string | number;
  label: string;
  date: Date;
  color?: string;
  description?: string;
  type?: "normal" | "critical" | "completed";
};

Examples

Project Management Dashboard

Complete project timeline with dependencies:

import { GanttChart } from '@aniruddha1806/gantt-chart';

function ProjectDashboard() {
  const tasks = [
    {
      id: 'planning',
      label: 'Project Planning',
      startDate: new Date('2024-01-01'),
      endDate: new Date('2024-01-15'),
      color: '#3b82f6',
      progress: 100
    },
    {
      id: 'design',
      label: 'UI/UX Design',
      startDate: new Date('2024-01-10'),
      endDate: new Date('2024-02-05'),
      color: '#8b5cf6',
      progress: 85,
      dependencies: ['planning']
    },
    {
      id: 'frontend',
      label: 'Frontend Development',
      startDate: new Date('2024-01-25'),
      endDate: new Date('2024-03-15'),
      color: '#10b981',
      progress: 60,
      dependencies: ['design']
    },
    {
      id: 'backend',
      label: 'Backend Development',
      startDate: new Date('2024-02-01'),
      endDate: new Date('2024-03-20'),
      color: '#f59e0b',
      progress: 45,
      dependencies: ['planning']
    },
    {
      id: 'testing',
      label: 'Testing & QA',
      startDate: new Date('2024-03-10'),
      endDate: new Date('2024-04-05'),
      color: '#ef4444',
      progress: 20,
      dependencies: ['frontend', 'backend']
    },
    {
      id: 'deployment',
      label: 'Deployment',
      startDate: new Date('2024-04-01'),
      endDate: new Date('2024-04-10'),
      color: '#06b6d4',
      progress: 0,
      dependencies: ['testing']
    }
  ];

  const milestones = [
    {
      id: 'kickoff',
      label: 'Project Kickoff',
      date: new Date('2024-01-01'),
      type: 'normal',
      description: 'Official project start'
    },
    {
      id: 'design-complete',
      label: 'Design Complete',
      date: new Date('2024-02-05'),
      type: 'normal',
      description: 'All designs approved'
    },
    {
      id: 'beta-release',
      label: 'Beta Release',
      date: new Date('2024-03-20'),
      type: 'critical',
      description: 'Beta version ready for testing'
    },
    {
      id: 'launch',
      label: 'Product Launch',
      date: new Date('2024-04-10'),
      type: 'critical',
      description: 'Official product launch'
    }
  ];

  const handleTaskClick = (task) => {
    console.log('Task clicked:', task.label);
    // Open task details modal, etc.
  };

  const handleMilestoneClick = (milestone) => {
    console.log('Milestone clicked:', milestone.label);
    // Show milestone details, etc.
  };

  return (
    <div style={{ padding: '20px' }}>
      <h2>Project Timeline</h2>
      <p>Web Application Development - Q1 2024</p>
      
      <GanttChart
        tasks={tasks}
        milestones={milestones}
        width="100%"
        height={500}
        showToday={true}
        showGrid={true}
        showDependencies={true}
        highlightWeekends={true}
        separateMilestoneRow={true}
        showMilestoneLabels={true}
        onTaskClick={handleTaskClick}
        onMilestoneClick={handleMilestoneClick}
      />
      
      <div style={{ 
        marginTop: '20px',
        display: 'grid',
        gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))',
        gap: '16px'
      }}>
        <div style={{ 
          padding: '16px', 
          backgroundColor: '#f8fafc', 
          borderRadius: '8px',
          border: '1px solid #e2e8f0'
        }}>
          <h4>Project Progress</h4>
          <p>Overall: {Math.round(tasks.reduce((sum, task) => sum + (task.progress || 0), 0) / tasks.length)}%</p>
        </div>
        
        <div style={{ 
          padding: '16px', 
          backgroundColor: '#f8fafc', 
          borderRadius: '8px',
          border: '1px solid #e2e8f0'
        }}>
          <h4>Upcoming Milestones</h4>
          <p>{milestones.filter(m => m.date > new Date()).length} remaining</p>
        </div>
      </div>
    </div>
  );
}

TypeScript Usage

The component provides full TypeScript support:

import { GanttChart, GanttTask, GanttMilestone, GanttChartProps } from '@aniruddha1806/gantt-chart';
import { useState, useCallback } from 'react';

interface ProjectData {
  tasks: GanttTask[];
  milestones: GanttMilestone[];
  settings: {
    showDependencies: boolean;
    highlightWeekends: boolean;
  };
}

interface TaskUpdateData {
  taskId: string | number;
  progress: number;
  endDate?: Date;
}

const ProjectManager: React.FC = () => {
  const [projectData, setProjectData] = useState<ProjectData>({
    tasks: [
      {
        id: 'task-1',
        label: 'Development',
        startDate: new Date('2024-01-01'),
        endDate: new Date('2024-02-01'),
        color: '#3b82f6',
        progress: 60,
        dependencies: []
      }
    ],
    milestones: [
      {
        id: 'milestone-1',
        label: 'Release',
        date: new Date('2024-02-01'),
        type: 'critical',
        description: 'Product release milestone'
      }
    ],
    settings: {
      showDependencies: true,
      highlightWeekends: true
    }
  });

  const handleTaskClick = useCallback((task: GanttTask): void => {
    console.log('Task clicked:', task);
    // Handle task click logic
  }, []);

  const handleMilestoneClick = useCallback((milestone: GanttMilestone): void => {
    console.log('Milestone clicked:', milestone);
    // Handle milestone click logic
  }, []);

  const updateTaskProgress = useCallback((updateData: TaskUpdateData): void => {
    setProjectData(prev => ({
      ...prev,
      tasks: prev.tasks.map(task => 
        task.id === updateData.taskId 
          ? { 
              ...task, 
              progress: updateData.progress,
              ...(updateData.endDate && { endDate: updateData.endDate })
            }
          : task
      )
    }));
  }, []);

  const ganttProps: GanttChartProps = {
    tasks: projectData.tasks,
    milestones: projectData.milestones,
    width: '100%',
    height: 500,
    showToday: true,
    showDependencies: projectData.settings.showDependencies,
    highlightWeekends: projectData.settings.highlightWeekends,
    onTaskClick: handleTaskClick,
    onMilestoneClick: handleMilestoneClick
  };

  return (
    <div>
      <h2>Project Timeline</h2>
      <GanttChart {...ganttProps} />
      
      <div>
        <h3>Project Statistics:</h3>
        <p>Total Tasks: {projectData.tasks.length}</p>
        <p>Completed Tasks: {projectData.tasks.filter(t => t.progress === 100).length}</p>
        <p>Milestones: {projectData.milestones.length}</p>
      </div>
    </div>
  );
};