Configuring baselines

The functionality is available in PRO Edition onlyPRO

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.

<script>
  import { getData } from "../data";
  import { Gantt } from "@svar/svelte-gantt";

  const data = getData();

  const tasks = [
    {
      id: 1,
      start: new Date(2024, 3, 3),
      duration: 4,
      text: "Svelte 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),
    },
  ];
</script>

<Gantt
  baselines={true}      // enable baselines
  cellHeight={45}
  {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.

<script>
  import { getBaselinesData } from "../data";
  import { Gantt, Editor, getEditorItems } from "@svar/svelte-gantt";

  const data = getBaselinesData();
  let api = $state();

  // 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
  );
</script>

<Gantt
  bind:this={api}
  baselines={true}
  cellHeight={45}
  tasks={data.tasks}
  links={data.links}
/>

<Editor {api} {items} />