Skip to main content

baselines

Description​

Shows or hides tasks baselines

Usage​

baselines?: boolean;

Parameters​

  • baselines - to show baselines, set the value to true. Baselines are not displayed by default (false). It's also necessary to set the start and end time for baselines via the tasks property.

Example​

import React, { useRef } from "react";
import { getData } from "../data";
import { Gantt } from "wx-react-gantt";
import "wx-react-gantt/dist/gantt.css";

const MyGanttComponent = () => {
  const data = getData();
  const tasks = [
    {
      id: 1,
      start: new Date(2024, 3, 3),
      duration: 4,
      text: "React Gantt Widget",
      progress: 60,
      type: "summary",
      open: true,
      base_start: new Date(2024, 3, 3),
      base_end: new Date(2024, 3, 6),
    },
    {
      id: 2,
      start: new Date(2024, 3, 3),
      duration: 3,
      text: "Lib-Gantt",
      progress: 80,
      parent: 1,
      type: "task",
      base_start: new Date(2024, 3, 3),
      base_end: new Date(2024, 3, 6),
    },
  ];

  
  return (
    <Gantt
      baselines={true}
      cellHeight={45}
      tasks={tasks}
      links={data.links}
      scales={data.scales}
    />
  );
};

export default MyGanttComponent;