Adding vertical markers

Markers allow highlighting certain dates or date ranges 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:

<script>
 import { getData } from "./data";
 import { Gantt } from "@wx/svelte-gantt";

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

</script>

<Gantt
    {markers}
    tasks={data.tasks}
    //other settings />

Customizing the markers style

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

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>
 import { getData } from "./common/data";
 import { Gantt } from "@wx/svelte-gantt";

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

</script>

<Gantt
  {markers}
  tasks={data.tasks}
  //other settings />

<style>
    :global(.wx-default .myMiddleClass) {
        background-color: rgba(232, 49, 37, 0.77);
    }
    :global(.wx-material .myMiddleClass) {
        background-color: rgba(255, 84, 84, 0.77);
    }   
</style>