React Gantt Chart Overview

19 May 20263 minutes to read

The React Gantt Chart is a project management component that provides a Microsoft Project-like interface for scheduling and managing projects. It enables you to visually manage tasks, task relationships, and resources with an intuitive and interactive timeline view.

Quick start

• Getting Started - Install and render your first Gantt Chart
• Live Demos - Explore interactive examples
• API Reference - Complete API documentation

Ready to streamline your Syncfusion^® React development? Try the Syncfusion^® AI Coding Assistant for faster setup, smart suggestions, and seamless integration in IDEs like VS Code and Cursor. Explore now

Data binding and performance

• Data sources - Bind local arrays, JSON objects, or remote data using DataManager
• Load on demand - Load parent tasks initially and render child tasks on expansion for large datasets
• Virtual scrolling - Handle thousands of tasks with optimized rendering

Task management

• Task editing - Edit tasks inline, through dialogs, or by dragging taskbars
• Task dependencies - Define relationships using finish-to-start, start-to-finish, start-to-start, and finish-to-finish types
• Undo and redo - Revert or reapply recent actions in the Gantt Chart
• Task scheduling - Configure automatic or manual task scheduling modes
• Splitting tasks - Split tasks into multiple segments and merge them back

Timeline and visualization

• Customizable timeline - Configure timeline tiers from minutes to decades with custom text
• Zooming - Zoom in and out to view tasks at different time scales
• Taskbars - Customize taskbar appearance and display baselines for planned vs actual progress
• Critical path - Identify task sequences that determine project completion dates
• Timezone support - Schedule projects across different timezones

Columns and layout

• Columns - Configure, customize, and add columns to display task information
• Column templates - Use custom templates to format column content
• Frozen columns - Lock columns to keep them visible during horizontal scrolling
• Column reordering - Reorder columns by dragging and dropping
• Column resizing - Adjust column widths interactively

Data operations

• Filtering - Filter tasks using menu, Excel-like, and toolbar search options
• Sorting - Sort tasks by one or multiple columns
• Selection - Select single or multiple rows and cells
• Context menu - Access common operations through right-click menus

Resources and indicators

• Resource allocation - Assign and manage staff, equipment, and materials across tasks
• Resource view - Display tasks grouped by assigned resources
• Data markers - Display custom indicators and flags on taskbars
• Event markers - Highlight important dates or milestones in the timeline
• Holidays - Define non-working days in project schedules

User interface

• Toolbar - Add built-in or custom toolbar actions for common operations
• Row customization - Customize row appearance and height
• Drag and drop - Reorder tasks by dragging rows
• Indent and outdent - Change task hierarchy levels

Export

• PDF export - Export Gantt Charts to PDF with customization options
• Excel export - Export task data to Excel format

Additional features

• Immutable mode - Optimize performance for frequent data updates
• State persistence - Save and restore user preferences
• Accessibility - Built-in keyboard navigation and screen reader support
• Globalization - Localize dates, numbers, and text for different cultures