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:

<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.

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",
    },
  ];

</script>

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

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

  const data = getData();

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

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

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