Adding vertical markers

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

Adding a marker

To add a marker, add the markers object to the markers array:

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

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

  const apiRef = useRef();

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

export default App;

Customizing the markers style

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

Default values:

:root {
  --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 "wx-react-gantt";
import "wx-react-gantt/dist/gantt.css";

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

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

export default GanttComponent;

:global(.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 React, { useRef } from "react";
import { getData } from "./common/data";
import { Gantt } from "wx-react-gantt";
import "wx-react-gantt/dist/gantt.css";

const data = getData();

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

function GanttComponent() {
  const apiRef = useRef();

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

export default GanttComponent;

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