Getting started

This page describes how to start with the Gantt widget in your React application.

Step 1. Install the package

SVAR Gantt is an open-source library distributed under the GPLv3 license.

Install package from NPM.

npm install wx-react-gantt

Step 2. Create and initialize the Gantt chart

Import the Gantt component to your project:

import { Gantt } from "wx-react-gantt";
import "wx-react-gantt/dist/gantt.css";

Initialize Gantt. tasks, links, scales, columns are the main Gantt elements but they are not required for the initialization stage. The example below will create an empty chart with the timescale and the area for tasks tree:

import { Gantt } from "wx-react-gantt";
import "wx-react-gantt/dist/gantt.css";

function App() {
  return <Gantt />;
}

export default App;

The next example shows how to create a simple chart with one summary task and one task in it, and two separate tasks and one dependency link between them. The minimum scales unit is "day". You do not need to add the columns array for the grid area, four columns will be displayed by default: "Task name", "Start Date", "Duration", and the action button for adding tasks.

import { Gantt } from "wx-react-gantt";
import "wx-react-gantt/dist/gantt.css";
import React, { useRef, useEffect } from "react";

const MyGanttComponent = () => {
  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",
    },
    {
      id: 21,
      text: "New Task 2",
      start: new Date(2024, 7, 10),
      end: new Date(2024, 8, 12),
      duration: 3,
      progress: 0,
      type: "task",
      lazy: false,
    },
  ];

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

  const scales = [
    { unit: "month", step: 1, format: "MMMM yyy" },
    { unit: "day", step: 1, format: "d" },
  ];

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

export default MyGanttComponent;

More instructions about loading data you can see here Loading data.

Step 3. Apply a theme

To add look and feel to the application, import one of the predefined themes, which will also make all elements display correctly:

• Willow
• WillowDark

Apply the desired theme by wrapping Gantt into the required theme tag:

import React from 'react';
import { getData } from "./common/data";
import { Gantt } from "wx-react-gantt";
import { Willow } from "wx-react-gantt";
import "wx-react-gantt/dist/gantt.css"; //import theme

const Component = () => {
  const data = getData();

  return (
    <Willow>
      <Gantt tasks={data.tasks} />
    </Willow>
  );
};

export default Component;

Troubleshooting

Missing Icons

If some icons are not displayed, add the following CSS link to your page:

<link rel="stylesheet" href="https://cdn.svar.dev/fonts/wxi/wx-icons.css" />

This stylesheet includes the icon font for the Gantt component. Although it should load automatically, there are cases where it may fail to do so.

Supported Versions of React

The wx-react-gantt package is designed for React 18. Due to backward-incompatible changes in the react-dom library, it is not compatible with React 19. We plan to release an updated version that supports React 19 in the near future. Until then, the Gantt widget is limited to React 18.

What's next

Now you can dive deeper into the Gantt API and get down to configuring it to your needs:

• Guides pages provide instructions about installation, loading data, styling, and other helpful tips to go smoothly with the Gantt configuration
• Gantt API reference gives description of the Gantt functionality
• Helpers pages describe the ready-made helpers that will make the process of working with the widget easy and enjoyable; the Gantt widget provides even a ready-to-use independent service for working with backend.