Skip to main content
SVAR React Gantt is a high-performance, customizable Gantt chart component. This guide walks you from installation to a fully interactive chart with tasks, links, and API access.

​
Prerequisites

  • React >=18 and react-dom >=18
  • A bundler that supports ES modules (Vite, webpack 5+, Next.js 13+)

​
Steps

1

Install the package

npm install @svar-ui/react-gantt
2

Import the CSS

Import styles once at the top of your app entry point or in your root layout.
index.js
import '@svar-ui/react-gantt/all.css';
Use all.css — it includes both the component styles and all dependency styles in one file. Use style.css only if you are managing dependency styles yourself.
3

Render a basic chart

Import Gantt and pass an array of tasks. Each task requires at minimum an id, text, type, and either a start+duration or a start+end pair.
GanttChart.jsx
import { Gantt } from '@svar-ui/react-gantt';
import '@svar-ui/react-gantt/all.css';

const tasks = [
  {
    id: 1,
    text: 'Project planning',
    progress: 40,
    parent: 0,
    type: 'summary',
    open: true,
  },
  {
    id: 10,
    start: new Date(2026, 3, 2),
    duration: 3,
    text: 'Marketing analysis',
    progress: 100,
    parent: 1,
    type: 'task',
  },
  {
    id: 11,
    start: new Date(2026, 3, 5),
    duration: 2,
    text: 'Discussions',
    progress: 72,
    parent: 1,
    type: 'task',
  },
  {
    id: 12,
    start: new Date(2026, 3, 8),
    text: 'Approval of strategy',
    progress: 100,
    parent: 1,
    type: 'milestone',
  },
];

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

export default function GanttChart() {
  return <Gantt tasks={tasks} scales={scales} />;
}
The chart renders immediately with drag-and-drop and inline editing enabled by default.
4

Add task links (dependencies)

Pass a links array to connect tasks. Each link requires an id, a source task id, a target task id, and a type.
GanttChart.jsx
import { Gantt } from '@svar-ui/react-gantt';
import '@svar-ui/react-gantt/all.css';

const tasks = [
  {
    id: 10,
    start: new Date(2026, 3, 2),
    duration: 3,
    text: 'Marketing analysis',
    progress: 100,
    parent: 0,
    type: 'task',
  },
  {
    id: 11,
    start: new Date(2026, 3, 5),
    duration: 2,
    text: 'Discussions',
    progress: 72,
    parent: 0,
    type: 'task',
  },
  {
    id: 12,
    start: new Date(2026, 3, 8),
    text: 'Approval of strategy',
    progress: 100,
    parent: 0,
    type: 'milestone',
  },
];

const links = [
  { id: 1, source: 10, target: 11, type: 'e2s' },
  { id: 2, source: 11, target: 12, type: 'e2s' },
];

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

export default function GanttChart() {
  return <Gantt tasks={tasks} links={links} scales={scales} />;
}
The e2s link type means end-to-start (finish-to-start dependency).
5

Access the API via the init prop

Use the init prop to receive the Gantt API instance. This unlocks programmatic control: adding tasks, updating data, handling events, and integrating companion components like Toolbar and Editor.
GanttWithToolbar.jsx
import { useState, useMemo } from 'react';
import { Gantt, Toolbar, Editor } from '@svar-ui/react-gantt';
import '@svar-ui/react-gantt/all.css';

const tasks = [
  {
    id: 1,
    start: new Date(2026, 3, 2),
    duration: 4,
    text: 'Resource planning',
    progress: 10,
    parent: 0,
    type: 'task',
  },
  {
    id: 2,
    start: new Date(2026, 3, 6),
    duration: 2,
    text: 'Getting approval',
    progress: 10,
    parent: 0,
    type: 'task',
  },
];

const links = [
  { id: 1, source: 1, target: 2, type: 'e2s' },
];

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

export default function GanttWithToolbar() {
  const [api, setApi] = useState();

  return (
    <>
      <Toolbar api={api} />
      <div style={{ flex: 1 }}>
        <Gantt
          init={setApi}
          tasks={tasks}
          links={links}
          scales={scales}
        />
        {api && <Editor api={api} />}
      </div>
    </>
  );
}
init is called once with the IApi instance after the component mounts. Store it in state with useState so companion components like Toolbar and Editor re-render once the API is available.

​
Task data reference

The table below summarises the fields you can set on each task object.
FieldTypeDescription
idnumberUnique task identifier.
textstringDisplay label shown in the grid and on the task bar.
startDateStart date/time of the task.
endDateEnd date/time. Use instead of duration, or omit when duration is set.
durationnumberDuration in days (or hours when using an hour-scale). Mutually exclusive with end.
progressnumberCompletion percentage, 0–100.
typestringTask type: 'task', 'summary', or 'milestone'.
parentnumberID of the parent task. Use 0 for top-level tasks.
openbooleanWhether a summary task is expanded on first render.
lazybooleanIf true, children are loaded on demand.

​
Next steps

Installation

Full installation details, CSS options, TypeScript setup, and framework-specific notes.

Configuration

Customise columns, scales, task types, themes, and more.

API reference

Explore every prop, event, and method exposed by the Gantt API.

Live demos

Browse interactive examples including drag-and-drop, custom templates, and 10k-task performance tests.

Build docs developers (and LLMs) love

Get started for freeTalk to us