How can I dynamically add X-axis annotations?

[mickey-vershbow]

Is there a way to dynamically add multiple X-axis annotations to a line chart? I'm aware of the addXaxisAnnotation method, and I've looked at this topic, which addresses a similar question. However, I am still not getting the result I want.

I have a list of annotation numbers + labels that I want to add to a chart like a factory function. I tried looping through the data and calling the addXaxisAnnotation method for each item, but the end result is that I only see an annotation marker for the last item in the list.

Here is a codepen, and see below for an example of my code:

let markerList = [
  {
    name: "Pre Season 1",
    period_begin: "2020-11-01"
  },
  {
    name: "Episodes 1-3",
    period_begin: "2020-11-26"
  },
  {
    name: "Episodes 4-5",
    period_begin: "2020-12-03"
  },
  {
    name: "Episodes 6-7",
    period_begin: "2020-12-10"
  },
  {
    name: "Episode 8",
    period_begin: "2020-12-17"
  },
  {
    name: "Post Season 1",
    period_begin: "2020-12-24"
  }
];

var options = {
    series: [],
    chart: {
      height: 350,
      type: "line",
      id: "posts-over-time-chart",
      zoom: {
        enabled: true
      },
      redrawOnWindowResize: false,
      redrawOnParentResize: false
    },
    noData: {
      text: "loading..."
    },
    dataLabels: {
      enabled: false
    },
    stroke: {
      curve: "straight"
    },
    title: {
      text: "Posts Over Time",
      align: "left"
    },
    grid: {
      row: {
        colors: ["#f3f3f3", "transparent"], // takes an array which will be repeated on columns
        opacity: 0.5
      }
    },
    xaxis: {
      categories: [],
      type: "datetime"
    }
  };

  var chart = new ApexCharts(document.querySelector("#chart"), options);
  chart.render();

  markerList.forEach((item) => {
    chart.addXaxisAnnotation({
      x: new Date(`${item.period_begin}`).getTime(),
      borderColor: "#ED7D31",
      fillColor: "#ED7D31",
      label: {
        borderColor: "#ED7D31",
        style: {
          color: "#000000",
          background: "#ED7D31",
          fontSize: "12.5px"
        },
        text: `${item.name}`
      }
    });
  });