Configuring baselines

The functionality is available in PRO Edition only

PRO

Baselines allow you to track the original planned start and end dates of tasks in your Gantt chart.

Adding baselines

To show baselines, set baselines to true. By default, baselines are not displayed (false). Each task that should have a baseline must include baseline start (base_start) and optionally baseline end (base_end) or baseline duration (base_duration) in the tasks property.

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

const data = getData();

const tasks = [
  {
    id: 1,
    start: new Date(2024, 3, 3),
    duration: 4,
    text: "React Gantt Widget",
    progress: 60,
    type: "summary",
    open: true,
    base_start: new Date(2024, 3, 3),
    base_end: new Date(2024, 3, 6),
  },
  {
    id: 2,
    start: new Date(2024, 3, 3),
    duration: 3,
    text: "Lib-Gantt",
    progress: 80,
    parent: 1,
    type: "task",
    base_start: new Date(2024, 3, 3),
    base_end: new Date(2024, 3, 6),
  },
];

export default function Example() {
  return (
    <Gantt
      baselines={true}
      cellHeight={45}
      tasks={tasks}
      links={data.links}
      scales={data.scales}
    />
  );
}

Configuring baseline dates via Editor

By default, the Editor does not include baseline fields (base_start, base_end, base_duration). To allow users to edit baseline dates, you need to use getEditorItems helper to import and customize the default array.

import { useRef } from "react";
import { getBaselinesData } from "../data";
import { Gantt, Editor, getEditorItems } from "@svar/react-gantt";

const data = getBaselinesData();
const apiRef = useRef(null);

// Customize Editor items to include baseline fields
const items = getEditorItems.flatMap(item =>
  item.key === "links"
    ? [
        {
          key: "base_start",
          comp: "date",
          label: "Baseline start",
        },
        {
          key: "base_end",
          comp: "date",
          label: "Baseline end",
        },
        {
          key: "base_duration",
          comp: "counter",
          hidden: true, // optional
        },
        item,
      ]
    : item
);

export default function Example() {
  return (
    <>
      <Gantt
        ref={apiRef}
        baselines={true}
        cellHeight={45}
        tasks={data.tasks}
        links={data.links}
      />

      <Editor api={apiRef} items={items} />
    </>
  );
}