SVAR Gantt: New Open Source, Interactive Gantt Chart for React

#webdev #javascript #react #reactjsdevelopment

Need to implement project management functionality in your React app? Most likely you've considered a Gantt chart as an option, since it's been an effective tool for project planning for many years.

However implementing a custom, feature-rich Gantt chart in React can be challenging and time-consuming. That's why SVAR team released SVAR React Gantt, an open-source, interactive UI component that brings powerful project visualization to your web apps.

Why Another Gantt Chart Library?

SVAR Gantt is built with React developers in mind. It's easy-to-use, highly customizable, and designed to save you hours of development time. Not only it provides the most essential Gantt diagram features, it also handles big amounts of data with lightling-fast performance.

Whether you're building a project management tool, a scheduling system, or any application that needs timeline visualization, you can have a visually appealing, interactive Gantt chart up and running with minimal effort.

So, what are the key features of SVAR React Gantt?

✅ Core Task Management

SVAR React Gantt component provides essential task management capabilities right out of the box. Let your users create, edit, and delete tasks through a simple form. The duration and start/end dates of the tasks can also be edited directly on the timeline with drag-and-drop.

The component supports three task types to work with: task, summary task (auto-calculated based on sub-tasks), and milestone. Each task bar displays progress as a percentage, which users can modify. You can also set up the summary tasks to automatically calculate the progress taking into account all the sub-tasks.

➡️ Smart Dependencies

With SVAR Gantt, you can easily handle task relationships. The component supports various dependency types: End-to-start, Start-to-start, End-to-end, and Start-to-end. All dependencies can be managed via task editing form or directly on the timeline.

🎯 Interactive UI Features

SVAR Gantt offers a modern and interactive interface to give users full control over the tasks. It supports:

Drag-and-drop task editing
User-friendly task edit form
Visual progress tracking
Task reordering in the grid
The ability to add context menu and toolbar
Zooming with scrolling

🎨 Rich Customization

While users can control the Gantt chart content and layout via UI, you as a developer have full control of the component's look and feel, including:

Customizable task bar styles (form, color, font)
Configurable timeline dimensions and borders
Configurable time scales (from hours to years)
Weekend/holiday highlighting
Custom tooltips for task bars
Light or dark themes

⚡ Performance That Scales

With SVAR Gantt you can be safe in terms of performance and responsiveness even with a large number of tasks and projects. Check this demo with 10k tasks.

As for handling the updates, we offer a special helper RestDataProvider to simplify the client-server interactions and CRUD operations.

Here's what you get for the best performance and effective data handling:

Efficient handling of large datasets
Dynamic sub-task loading
Optimized rendering
RestDataProvider for seamless backend integration
Batch updates support

Getting Started

To add SVAR Gantt to your project, install it via npm:

npm install @svar-ui/react-gantt

Then, include the component in your React file:

import { Gantt } from "@svar-ui/react-gantt";

export default function App() {
  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",
    },
    {
      id: 22,
      text: "Task",
      start: new Date(2024, 7, 11),
      end: new Date(2024, 8, 12),
      duration: 8,
      progress: 0,
      parent: 47,
      type: "task",
    },
  ];

  const links = [{ id: 1, source: 20, target: 21, type: "e2e" }];

  const scales = [
    { unit: "month", step: 1, format: "%F %Y" },
    { unit: "day", step: 1, format: "%j" },
  ];

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