I can no longer see the X-Axis dates on my line chart -- is this a CDN sync issue?

[mickey-vershbow]

I created a line chart with the X-axis set to a type of 'datetime' a few weeks ago. Everything was working nicely until the 3.34.0 npm package update was published. Since then, I am unable to see the dates on the X-axis. My colleagues are all experiencing the same issue. We have taken several troubleshooting steps to ensure that the issue is not stemming from the code, and I can say with 99% certainty that it is not a code or css issue. In addition, nothing changed in the code from the time the graph was working properly to when we suddenly couldn't see the X-axis dates anymore. I have triple checked to make sure that I am providing the chart with properly formatted "date" data, and have tried just hard-coding in some dates in case the issue related to the data...but still no luck, so it is unclear why it's suddenly not displaying.

Is it possible this is a CDN-sync issue or a bug? Please see below for screenshot and relevant code.

   //////////////////
    // Chart
    ////////////////
    // Store timeline data and event data in variables
    let timelineData = JSON.parse(
      sessionStorage.getItem(`timeline_${subjectId}`)
    );
    let eventData = JSON.parse(sessionStorage.getItem(`events_${subjectId}`));
    let postDates = [];
    let postCounts = [];
    let eventDates = [];
    let eventNames = [];

    for (let i = 0; i < timelineData.length; i++) {
      postDates.push(timelineData[i].posted_on);
      postCounts.push(timelineData[i].posts);
    }

    for (let i = 0; i < eventData.length; i++) {
      eventDates.push(eventData[i].event_date);
      eventNames.push(eventData[i].event_name);
    }

    var options = {
      chart: {
        type: "line",
        id: "subject-timeline",
        height: 320,
        style: {
          width: "100%",
        },
      },
      series: [
        {
          name: "posts",
          data: postCounts,
        },
      ],

      xaxis: {
        categories: postDates,
        type: "datetime",
      },
      yaxis: {
        labels: {
          formatter: function (value) {
            var str = value.toString().split(".");
            str[0] = str[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
            return str.join(".");
          },
        },
      },
      fill: {
        type: "gradient",
        gradient: {
          shade: "dark",
          type: "horizontal",
          shadeIntensity: 0.5,
          gradientToColors: undefined, // optional, if not defined - uses the shades of same color in series
          inverseColors: true,
          opacityFrom: 1,
          opacityTo: 1,
          stops: [0, 50, 100],
          colorStops: [],
        },
      },
      tooltip: {
        followCursor: true,
      },
      grid: {
        padding: {
          right: 30,
          left: 20,
        },
        row: {
          colors: ["#e5e5e5", "transparent"],
          opacity: 0.5,
        },
        column: {
          colors: ["#f8f8f8", "transparent"],
        },
        xaxis: {
          lines: {
            show: true,
          },
        },
      },
      // annotations for event names and dates.
      // console log 'eventData' to see the event dates and names, or you can also use 'eventDates' or 'eventNames' arrays
      annotations: {
        xaxis: [
          {
            x: new Date(`${eventDates[0]}`).getTime(),
            strokeDashArray: 0,
            borderColor: "#ED7D31",
            fillColor: "#ED7D31",
            label: {
              borderColor: "#ED7D31",
              style: {
                color: "#000000",
                background: "#ED7D31",
                fontSize: "12.5px",
              },
              text: `${eventNames[0]}`,
            },
          },
          {
            x: new Date(`${eventDates[1]}`).getTime(),
            strokeDashArray: 0,
            borderColor: "#ED7D31",
            fillColor: "#ED7D31",
            label: {
              borderColor: "#ED7D31",
              style: {
                color: "#000000",
                background: "#ED7D31",
                fontSize: "12.5px",
              },
              text: `${eventNames[1]}`,
            },
          },
        ],
      },
    };

    var chart = new ApexCharts(
      chartContainer,
      options
    );

    chart.render();
  }
};

[brianlagunas]

This was a regression bug that was introduced by a community PR. This has been fixed and a new release has just been published.

[mickey-vershbow]

@brianlagunas Ok thanks so much. I'm still experiencing the issue on my end -- how long should I expect before the new release takes effect?

[brianlagunas]

It was just released 2 hours ago, I'm not sure how long the CDN will take to update its cache. For now you ccan grab the latest bits here https://github.com/apexcharts/apexcharts.js/releases/tag/v3.35.0

[mickey-vershbow]

Thank you!