SVAR React Gantt Chart

Website • Getting Started • Live Demos

SVAR React Gantt is a customizable, high-performance Gantt chart component written in React. It offers a developer-friendly API, full TypeScript support, React 19 compatibility, and flexible CSS styling.

The component supports multiple task types, dependencies, custom time scales, and light/dark themes. It is designed to handle thousands of tasks efficiently (see demo with 10k tasks).

Interactive, drag-and-drop interface allows users to add, edit, and organize tasks and dependencies directly on the timeline or through a simple task edit form.

✨ Core Features

Interactive timeline with drag-and-drop
Customizable task edit form
Task dependencies
Task progress visualization
Hierarchical view of sub tasks
Configurable time scale (hours, days, weeks, sprints or stages)
Flexible time units: support for hours and minutes
Customizable grid columns
Sorting tasks in grid
Toolbar and context menu
Tooltips for taskbars
Zooming with scroll
Hotkey support for common actions
Fast performance with large data sets
Localization
Full TypeScript support

🚀 PRO Edition

In addition to free, open-source core, SVAR React Gantt offers the PRO Edition with additional features and automation logic:

Work days calendar (non-linear calendar)
Auto-scheduling (forward mode and Finish-to-Start dependencies)
Critical path
Baselines
Split tasks
Vertical markers
Undo/redo
Summary task automation
Export to PNG, PDF, Excel, and MS Project (export/import)

Visit the pricing page for full feature comparison and free trial.

Check out the demos to see all SVAR React Gantt features in action.

🛠️ How to Use

To start using SVAR React Gantt, simply import the package and include the desired component in your React file:

import { Gantt } from '@svar-ui/react-gantt';
import '@svar-ui/react-gantt/all.css';

export default function MyComponent() {
  const tasks = [
    {
      id: 20,
      text: 'New Task',
      start: new Date(2024, 5, 11),
      end: new Date(2024, 6, 12),
      duration: 1,
      progress: 2,
      type: 'task',
      lazy: false,
    },
    {
      id: 47,
      text: '[1] Master project',
      start: new Date(2024, 5, 12),
      end: new Date(2024, 7, 12),
      duration: 8,
      progress: 0,
      parent: 0,
      type: 'summary',
    },
  ];

  return <Gantt tasks={tasks} />;
}

See the getting started guide to learn how to configure data sources, customize columns, and enable editing.

⭐ Show Your Support

If SVAR React Gantt helps your project, consider giving us a star! It helps other developers discover this library and motivates us to keep improving.

💬 Need Help?

Post an Issue or use our community forum.