javascriptgantt

A modern, feature-rich JavaScript Gantt chart library for project management. Build interactive, responsive Gantt charts with zero dependencies, featuring drag-and-drop functionality, task dependencies, auto-scheduling, and extensive customization options.

✨ Key Highlights

• 🚀 Zero Dependencies - Lightweight and fast
• 📱 Responsive Design - Works seamlessly on all devices
• 🎨 Fully Customizable - Themes, colors, and layouts
• 🔗 Task Dependencies - Four types of task linking
• 📊 Multiple Views - Hour, day, week, month, quarter, year
• 🌍 i18n Support - Multilingual ready
• 📤 Export Options - PDF, PNG, Excel
• 🎯 Auto-Scheduling - Intelligent task scheduling

📚 Table of Contents

• Installation
• Getting Started
• Features
• Documentation
• Development
• Contributing
• License
• Support

📦 Installation

Using npm (Recommended)

npm install javascriptgantt

Or using yarn:

yarn add javascriptgantt

Via CDN

Add these lines to your HTML file:

<link
  rel="stylesheet"
  href="https://unpkg.com/javascriptgantt@latest/src/gantt.css"
/>
<script src="https://unpkg.com/javascriptgantt@latest/src/gantt.js"></script>

Manual Download

1. Download the latest release from our GitHub repository
2. Extract and copy gantt.js and gantt.css to your project
3. Link the files in your HTML:

   <link rel="stylesheet" href="path/to/gantt.css" />
   <script src="path/to/gantt.js"></script>

🚀 Getting Started

Quick Start Guide

Step 1: Include the library files in your HTML

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

Step 2: Create a container element

<div id="gantt_here" style="width: 100%; height: 100vh;"></div>

Step 3: Initialize the Gantt chart with your data

const element = document.getElementById("gantt_here");
const gantt = new javascriptgantt(element);

// Configure columns
gantt.options.columns = [
  {
    name: "text",
    width: 245,
    min_width: 80,
    max_width: 300,
    tree: true,
    label: "Name",
    resize: true,
    template: (task) => {
      return `<span>${task.parent == 0 ? task.text : task.subject}</span>`;
    },
  },
  // ...more columns
];

// Add your tasks
gantt.options.data = [
  { id: 1, text: "Project 1", parent: 0, progress: 50 },
  {
    id: 2,
    text: "Task #1",
    start_date: "05-05-2023",
    end_date: "05-05-2023",
    parent: 1,
    progress: 60,
  },
  // ...more tasks
];

// Configure time scales
gantt.options.scales = [
  {
    unit: "week",
    step: 1,
    format: (t) => {
      return "%d %F";
    },
  },
  {
    unit: "day",
    step: 1,
    format: "%d %D",
  },
];

// Define task dependencies
gantt.options.links = [
  { id: 1, source: 1, target: 2, type: 0 }, // Finish-to-Start
  { id: 2, source: 2, target: 3, type: 1 }, // Start-to-Start
  { id: 3, source: 3, target: 4, type: 2 }, // Finish-to-Finish
  { id: 4, source: 12, target: 15, type: 3 }, // Start-to-Finish
];

// Render the chart
gantt.render();

💡 Tip: Call gantt.render() whenever you need to update the chart with new data.

📖 Resources

• Live Demo

• Interactive Tutorial on StackBlitz

• Complete Documentation

  ---

✨ Features

Core Functionality

🔗 Task Linking

Four types of task dependencies:

• Finish-to-Start (FS) - Task B starts when Task A finishes
• Start-to-Start (SS) - Task B starts when Task A starts
• Finish-to-Finish (FF) - Task B finishes when Task A finishes
• Start-to-Finish (SF) - Task B finishes when Task A starts

🎯 Interactive Controls

• Drag and Drop: Move tasks horizontally (reschedule) and vertically (reorder)
• Task Progress: Update progress by dragging or set percentage manually
• Date Selection: Select start and end dates via drag and drop
• Mouse Scroll: Navigate timeline with mouse click and drag

🎨 Customization & Theming

• Task Colors: Customize task appearance with color picker
• Themes: Built-in dark mode support
• Grid Columns: Fully customizable column layout
• Time Scale: Configurable time scale and formats

Advanced Features

📊 Views & Display

• Multiple Zoom Levels: Hour, day, week, month, quarter, and year views
• Full Screen Mode: Immersive full-screen experience
• Tooltips: Detailed task information on hover
• Filtering: Advanced task filtering capabilities
• Expand/Collapse: Hierarchical task management

⚡ Productivity

• Auto-Scheduling: Automatic task scheduling based on dependencies
• Task Management: Add, modify, or delete tasks easily
• Markers: Add visual markers to important dates
• Progress Tracking: Visual progress indicators

📤 Export & Integration

• PDF Export: Generate professional PDF reports
• PNG Export: Export charts as images
• Excel Export: Export data to spreadsheet format
• Localization: Multi-language support (i18n ready)

🔍 Learn More

For a complete list of features and detailed usage instructions, see our Full Documentation.

Try it yourself:

• Live Demo
• Interactive Examples on StackBlitz

  ---

📖 Documentation

Complete Documentation: javascriptgantt Documentation

Quick Links

• 📘 Full Documentation PDF - Comprehensive guide with all features
• 🎮 Live Demo - See it in action
• 💻 StackBlitz Tutorial - Interactive examples

🔧 Development

This project uses modern development tools to maintain code quality and consistency.

Development Tools

• Prettier - Automatic code formatting
• ESLint - Code linting and quality checks
• Commitlint - Conventional commit message validation
• Husky - Git hooks automation
• Lint-Staged - Run linters on staged files
• Standard-Version - Automated versioning and changelog generation

Quick Start for Contributors

# Install dependencies
npm install

# Format code
npm run format

# Lint code
npm run lint

# Run tests (lint + format check)
npm run test

# Create a release with automatic changelog
npm run release

Commit Message Convention

This project follows Conventional Commits:

<type>(<scope>): <subject>

Types:

• feat: New feature
• fix: Bug fix
• docs: Documentation changes
• style: Code style changes (formatting)
• refactor: Code refactoring
• perf: Performance improvements
• test: Adding or updating tests
• build: Build system changes
• ci: CI/CD changes
• chore: Maintenance tasks

Example:

git commit -m "feat: add export to Excel functionality"
git commit -m "fix: resolve drag and drop issue on mobile"

For detailed development guidelines, see DEVELOPMENT.md.

🤝 Contributing

We welcome contributions from the community! Please read our Contributing Guidelines to get started.

How to Contribute

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

Please ensure your code follows our coding standards and includes appropriate tests.

Code of Conduct

Please read our Code of Conduct before contributing.

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

💬 Support

Get Help

• 📖 Documentation: Full Documentation
• 🐛 Bug Reports: GitHub Issues
• 💡 Feature Requests: Feature Request Template
• 💬 Discussions: GitHub Discussions

Reporting Issues

Found a bug? Please report it using our Bug Report Template.

Include:

• Clear description of the issue
• Steps to reproduce
• Expected vs actual behavior
• Browser/environment information
• Code samples or screenshots

🌟 Show Your Support

If you find this project useful, please consider:

• ⭐ Star this repository
• 🐛 Report bugs to help improve it
• 💡 Suggest features you'd like to see
• 🤝 Contribute to the codebase
• 📢 Share with others who might find it useful

Made with ❤️ by Sunil Solanki

⬆ Back to Top