Skip to main content

markers

Description​

Defines visual markers on the time scale

An array of objects containing the markers data

Usage​

markers?: [
  {
    start: Date,
    text: string,
    css?: string,
  },    
    {...}
];

Parameters​

For each marker you can specify the following parameters:

  • start - (required) the start date of a marker
  • text - (required) the label of a marker that appears above the marker in a chart
  • css - (optional) css class name to be applied as a marker style; if not specified, a default marker style will be applied (wx-default css class)

Example​

<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",
    },
    //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>