Skip to main content

markers

Description

Defines visual markers on the time scale

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) css class name to be applied as a marker style; if not specified, a default marker style will be applied (wx-default css class)

Example

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

const MyComponent = () => {
const data = getData();

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

return (
<Gantt
markers={markers}
tasks={data.tasks}
//other settings
/>
);
};

export default MyComponent;
.wx-willow-theme .myMiddleClass {
background-color: rgba(255, 84, 84, 0.77);
}