Skip to main content

progressLine

PRO

The functionality is available in PRO Edition only

Description​

Optional. Enables a progress line that visualizes schedule variance against a status date

The progressLine property draws a single polyline anchored at a status date. The line bulges left of the status date where tasks are behind schedule, bulges right where tasks are ahead, and stays vertical where a task is exactly on track.

Usage​

progressLine?: boolean | Date | null;

Parameters​

  • true - enables the progress line; the status date is the current date
  • Date object - enables the progress line with the status date set to the given date
  • false or null - (default) the progress line is disabled

Every visible row contributes a point to the line, including summary tasks and milestones, except:

  • collapsed child tasks — they aren't visible rows
  • completed tasks — ended before the status date with progress at 100%
  • not-yet-started tasks — start after the status date with progress at 0%
  • unscheduled tasks — no bar to measure variance from when unscheduledTasks is enabled
  • inactive tasks — when inactiveTasks is enabled
  • group rows — rows created by grouping

For the tasks above, the point stays fixed at the status date.

Example​

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

  const data = getData();
</script>

<template>
  <Gantt
    :tasks="data.tasks"
    :links="data.links"
    :scales="data.scales"
    :progressLine="true"
  />
</template>

Pass a Date to set a status date other than today:

<Gantt :tasks="data.tasks" :links="data.links" :scales="data.scales" :progressLine="new Date(2024, 3, 10)" />

Related sample:

Related articles: