Skip to main content

Configuring rollups

The functionality is available in PRO Edition only

PRO

Rollups simplify the visualization of complex projects by displaying child task bars directly on their parent summary tasks. It gives a high-level timeline overview without expanding every summary row.

Enabling rollups​

To show rollups, set rollups to true (or pass a configuration object). By default, rollups are not displayed (false).
Each task that should appear as a rollup on its parent must have rollup: true in the tasks property.

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

  const data = getData();

  const tasks = [
    {
      id: 1,
      start: new Date(2024, 3, 1),
      duration: 10,
      text: "Website Redesign",
      progress: 40,
      type: "summary",
      open: true,
    },
    {
      id: 2,
      start: new Date(2024, 3, 1),
      duration: 4,
      text: "Design mockups",
      progress: 80,
      parent: 1,
      type: "task",
      rollup: true,       
    },
    {
      id: 3,
      start: new Date(2024, 3, 5),
      duration: 6,
      text: "Frontend development",
      progress: 20,
      parent: 1,
      type: "task",
      rollup: true,
    },
  ];
</script>

<Gantt
  rollups={true}       
  cellHeight={45}
  {tasks}
  links={data.links}
  scales={data.scales}
/>

Configuring rollup scope​

By default (true or "closest" type), tasks roll up only to their nearest parent summary task. To make tasks roll up to all parent summary tasks in the hierarchy, set rollups to { type: "all" }.

<Gantt
  rollups={{ type: "all" }}   
  cellHeight={45}
  {tasks}
  links={data.links}
  scales={data.scales}
/>

Configuring rollups via Editor​

When rollups are enabled, the Editor automatically includes a checkbox field that allows users to mark individual tasks as rollups.

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

  const data = getData();
  let api = $state();
</script>

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

<Editor {api} />

Using rollups together with baselines​

Rollup bars and baseline bars can be displayed simultaneously. When both features are enabled, rollup bars are rendered above the baseline bars. To enable both, set rollups and baselines together:

<Gantt
  rollups={true}
  baselines={true}
  cellHeight={45}
  {tasks}
  links={data.links}
  scales={data.scales}
/>

Related sample: Rollups