Markers

Markers allow additional elements to be placed vertically across the timeline section of the chart and span both the header and activity sections of the timeline.

Due to how sticky headers work, the vertical marker uses two elements - one for rendering the marker on the header, one for rendering the marker on the activity area.

        markers={[
          {
            from: new Date(2024, 1, 4),
            to: new Date(2024, 1, 4),
            renderElementHeader: () => (
              <div className="size-full border-s border-dashed border-l-red-500"></div>
            ),
            renderElementBody: () => (
              <div className="size-full border-s border-dashed border-l-red-500"></div>
            ),
          },
          {
            from: new Date(2024, 1, 6),
            to: new Date(2024, 1, 6),
            renderElementHeader: ({ elementPosition: { width } }) => (
              <div className="size-full">
                <div
                  style={{
                    marginLeft: `${(width / 24) * new Date().getHours()}px`,
                  }}
                  className="h-full border-s border-dashed border-l-yellow-500"
                ></div>
              </div>
            ),
            renderElementBody: () => (
              <div className="pointer-events-auto size-full bg-orange-500 opacity-50 hover:bg-red-900"></div>
            ),
          },
          {
            from: new Date(2024, 1, 6),
            to: new Date(2024, 1, 9),
            renderElementHeader: () => (
              <div className="size-full bg-green-500 opacity-20"></div>
            ),
            renderElementBody: () => (
              <div className="size-full bg-green-500 opacity-20"></div>
            ),
          },
        ]}

This example uses borders and background to place visual elements across the while timeline section of the chart.

Caution

If you want any hover effects on the markers, you have to manually set pointer-events: auto; as by default pointer-events: none; is used to allow elements below the markers to react to hover.

            renderElementBody: () => (
              <div className="pointer-events-auto size-full bg-orange-500 opacity-50 hover:bg-red-900"></div>
            ),