markers

The functionality is available in PRO Edition only

PRO

Description

Defines visual markers on the timescale

An array of objects containing the markers data

Usage

markers?: [
  {
    start: Date,
    text: string,
    css?: string,
  }
];

Parameters

For each marker you can specify the following parameters:

• start - (required) the start date of a marker
• text - (required) the label of a marker that appears above the marker in a chart
• css - (optional) a css class name to be applied as a marker's style; if not specified, a default style will be applied

Example

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

const data = getData();

const markers = [
  {
    start: new Date(2020, 2, 4),
    text: "Start Project",
    css: "myMiddleClass",
  },
  //other markers
];

function App() {
  return <Gantt markers={markers} tasks={data.tasks} />;
}

export default App;

/* App.css */
.wx-willow-theme .myMiddleClass {
    background-color: rgba(255, 84, 84, 0.77);
}