Adding vertical markers

The functionality is available in PRO Edition only

PRO

Markers allow highlighting certain dates in Gantt, which makes the chart more informative.

Adding a marker

To add markers, add the markers objects to the markers array:

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

const data = getData();

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

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

Customizing the markers style

To change the default style, redefine global css variables for markers.

Default values:

--wx-gantt-marker-font: 500 12px Roboto;
--wx-gantt-marker-font-color: #fff;
--wx-gantt-marker-color: rgba(6, 189, 248, 0.77);

Example:

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

const data = getData();

const markers = [
  {
    start: new Date(2020, 2, 8),
    text: "Today",
  },
];

export default function Example() {
  // wrapping in the theme class so CSS variables apply
  return (
    <div className="wx-willow-theme">
      <Gantt markers={markers} tasks={data.tasks} />
    </div>
  );
}

CSS (e.g. App.css):

.wx-willow-theme {
  --wx-gantt-marker-font-color: yellow;
}

You can also apply the css parameter to customize the style for a specific marker:

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

const data = getData();

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

export default function Example() {
  return (
    <div className="wx-willow-theme">
      <Gantt markers={markers} tasks={data.tasks} />
    </div>
  );
}

CSS:

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

---

Related sample: Markers