Skip to main content

sCurve

The functionality is available in PRO Edition only

PRO

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​

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}
      sCurve={[
        { type: "baseline" },
        { type: "scheduled" },
        { type: "earned", metric: "progress" },
      ]}
    />
  );
}

export default App;

Related sample:

Related articles: