Skip to main content

progressLine

The functionality is available in PRO Edition only

PRO

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​

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

const data = getData();

function App() {
  return (
    <Gantt
      tasks={data.tasks}
      links={data.links}
      scales={data.scales}
      progressLine={true}
    />
  );
}

export default App;

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: