Defining task types

Task types

SVAR React Gantt supports several task types that define how tasks behave and how they are displayed on the chart. You can use the built‑in types or define your own custom ones using the taskTypes property.

Standard task (task)

A standard task is the most common task type that:

• has a start date, end date, and progress
• supports dragging, resizing, and progress editing in the UI

A standard task requires a start and end date. If type is omitted, the task is treated as a standard task. Add tasks via the tasks array.

const tasks = [
  {
    id: 1,
    text: "Implementation",
    start: new Date(2024, 3, 10),
    end: new Date(2024, 3, 15),
    progress: 50,
    type: "task",
  },
];

Milestone (milestone)

A milestone represents an important point in the workflow. It also has:

• zero duration
• only the start date (no end date)
• no progress

Milestones are typically used to mark deadlines, approvals, or key events. Add milestones via the tasks array:

const tasks = [
  {
    id: 2,
    text: "Release",
    start: new Date(2024, 3, 20),
    type: "milestone",
  },
];

Summary task (summary)

A summary task groups other tasks, milestones, or nested summary tasks.

• Its start and end dates are calculated automatically from its child tasks
• If a summary task is added with no child tasks, its start and end dates should be defined

Define a summary task via the tasks array:

const tasks = [
  {
    id: 3,
    text: "Phase 1",
    type: "summary",
    open: true,
    start: new Date(2026, 3, 10),
    end: new Date(2026, 3, 15),
  },
];

Disabling drag for summary tasks

You can prevent users from dragging summary tasks in the UI. This is done by intercepting (api.intercept()) the drag-task action and checking the task type via the getTask method.

import { useRef } from "react";
import { getData } from "./data";
import { Gantt } from "@svar-ui/react-gantt";

function ExampleDisableSummaryDrag() {
  const data = getData();
  const apiRef = useRef(null);

  function init(api) {
    apiRef.current = api;

    api.intercept("drag-task", ({ id, top }) => {
      return !(typeof top === "undefined" && api.getTask(id).type === "summary");
    });
  }

  return (
    <Gantt
      tasks={data.tasks}
      links={data.links}
      scales={data.scales}
      init={init}
    />
  );
}

Custom task types

In addition to the default types, you can add custom task types. Custom task types are defined via taskTypes and then used in the tasks array.

const taskTypes = [
  { id: "task", label: "Task" },
  { id: "urgent", label: "Urgent" },
];

const tasks = [
  {
    id: 5,
    text: "Critical fix",
    start: new Date(2024, 3, 18),
    end: new Date(2024, 3, 19),
    type: "urgent",
  },
]

You can customize the look of a task type by adding CSS rules for each task type using its id.

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

export default function Demo() {
  const { scales } = getData();

  const tasks = [
    {
      id: 1,
      text: "Project",
      type: "summary",
      open: true,
    },
    {
      id: 2,
      text: "Urgent task",
      start: new Date(2024, 3, 10),
      end: new Date(2024, 3, 13),
      progress: 40,
      parent: 1,
      type: "urgent",
    },
  ];

  const taskTypes = [
    { id: "task", label: "Task" },
    { id: "summary", label: "Summary" },
    { id: "urgent", label: "Urgent" },
  ];

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

CSS (place in a CSS/SCSS file imported by your component):

.wx-gantt .wx-bar.wx-task.urgent {
  background-color: #f49a82;
  border: 1px solid #f45e36;
}

.wx-gantt .wx-bar.wx-task.urgent .wx-progress-percent {
  background-color: #f45e36;
}

Custom task types behave like standard tasks unless additional behavior is implemented via API interception.

Split tasks: | PRO feature

SVAR Svelte Gantt also supports split tasks, which allow a single task to be divided into multiple segments on the timeline. See the dedicated guide: Managing split tasks