Installation and initialization

SVAR Gantt is an open-source library distributed under the MIT license. The PRO Edition of SVAR React Gantt with extended feature set is available under commercial licenses.

Installing Gantt

Open-source edition (MIT)

To install the open-source version, you should run the following command:

//npm
npm install @svar-ui/react-gantt

//yarn
yarn add @svar-ui/react-gantt

PRO edition (commercial)

info

To try the full PRO edition, request a free trial here: https://svar.dev/react/gantt/pricing/#trial

If you have purchased the license, you must first configure access to the private SVAR NPM registry.

1. Add the registry:

npm config set @svar:registry https://npm.svar.dev

2. Log in to the private registry:

npm login --registry=https://npm.svar.dev --scope=@svar --auth-type=legacy

After this command, you will be prompted to enter the username and password that were provided to you after purchasing the PRO license.

3. Now you can install the package:

//npm
npm install @svar/react-gantt

//yarn
yarn add @svar/react-gantt

Initializing

Import the Gantt component.

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

Initialize Gantt. Such properties as tasks, links, scales, columns are core elements of the Gantt chart 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 "@svar-ui/react-gantt";

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

The next example shows how to create a simple chart with one summary task containing one task, two separate tasks, and one dependency link between them. The minimum scales unit is "day".

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",
    },
    {
      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} />;
}

Now you can move forward and load data. See Loading data.