Adding vertical markers

PRO

The functionality is available in PRO Edition only

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:

<script setup>
 import { getData } from "./data";
 import { Gantt } from "@svar/vue-gantt";

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

</script>

<template>
  <Gantt
    :markers="markers"
    :tasks="data.tasks" />
</template>

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:

<script setup>
 import { getData } from "./common/data";
 import { Gantt } from "@svar/vue-gantt";

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

</script>

<template>
  <Gantt
    :markers="markers"
    :tasks="data.tasks" />
</template>

<style scoped>
     :global(.wx-willow-theme) {
     --wx-gantt-marker-font-color: yellow;
   }
</style>

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

<script setup>
  import { getData } from "./common/data";
  import { Gantt } from "@svar/vue-gantt";

  const data = getData();

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

<template>
  <Gantt
    :markers="markers"
    :tasks="data.tasks" />
</template>

<style scoped>
    :global(.wx-willow-theme .myMiddleClass) {
        background-color: rgba(255, 84, 84, 0.77);
    }
</style>

---

Related sample: Markers