Skip to main content

sCurve

PRO

The functionality is available in PRO Edition only

Description​

Optional. Enables cumulative progress curves (scheduled, baseline, earned) over the chart area

For how each curve type is calculated, weighted, and scaled, see the S-curve guide.

Usage​

sCurve?: boolean | {
  type: "scheduled" | "earned" | "baseline";
  metric?: "duration" | "progress";
  css?: string;
}[];

Parameters​

  • true - enables a single earned curve weighted by duration; equivalent to [{ type: "earned", metric: "duration" }]
  • false, null, or an empty array - (default) turns sCurve off
  • an array of curve configs, each accepting:
    • type - (required) - which curve to draw: "scheduled", "baseline", or "earned"
    • metric - (optional) - default "duration" - weighs each task by "duration" or by "progress"
    • css - (optional) - a css class name that replaces the line's default class

Example​

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

  const data = getData();

  const sCurve = [
    { type: "baseline" },
    { type: "scheduled" },
    { type: "earned", metric: "progress" },
  ];
</script>

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

Related sample:

Related articles: