Skip to main content

Configuring rollups

PRO

The functionality is available in PRO Edition only

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 setup>
  import { getData } from "../data";
  import { Gantt } from "@svar-ui/vue-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>

<template>
  <Gantt
    :rollups="true"       
    :cellHeight="45"
    :tasks="tasks"
    :links="data.links"
    :scales="data.scales"
  />
</template>

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" }.

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

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 setup>
  import { getData } from "../data";
  import { Gantt, Editor } from "@svar-ui/vue-gantt";
  import { ref } from "vue";

  const data = getData();
  const api = ref();
</script>

<template>
  <Gantt
    ref="api"
    :rollups="true"
    :cellHeight="45"
    :tasks="data.tasks"
    :links="data.links"
  />

  <Editor :api="api" />
</template>

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:

<template>
  <Gantt
    :rollups="true"
    :baselines="true"
    :cellHeight="45"
    :tasks="tasks"
    :links="data.links"
    :scales="data.scales"
  />
</template>

Related sample: Rollups