Weird date on xaxis type "datetime", got "May'25".

[muhismail015]

when you define/input date range like this:
25/04/2025 - 03/05/2025
27/02/2025 - 03/03/2025
xx/xx/2025 - 03/xx/2025

got May'25, or April'25, it should be there '1 May'.
depending on the beginning and end of the month, such as crossing dates in the month:

even though the data received is normal, the display on the chart shows [.. '25], this look like i send the data:

but if i dont use type: "datetime", the date is normal:

so, i assumed the type with "datetime" on xaxis have a bug

#######

for the stack i use:

• "react": "^18.3.1",
• "react-apexcharts": "^1.7.0"
• "tailwindcss": "^3.4.16"
• other...

option i use like this:

const options = {
    chart: {
      height: 350,
      type: "area",
      zoom: {
        enabled: categories.some((category) =>
          isValid(parse(category, "yyyy-MM-dd HH:mm:ss", new Date())) &&
          category.includes(":")
            ? false
            : true
        ),
      },
      id: "order-chart",
      toolbar: { show: false },
    },
    annotations: {
      position: "front",
      texts: orders.every((value) => value === 0)
        ? [
            {
              x: "50%",
              y: "50%",
              text: "Tidak ada data untuk ditampilkan",
              textAnchor: "middle",
              foreColor: "#4D4D4D",
              fontSize: "24px",
              fontWeight: "bold",
            },
          ]
        : [],
    },
    dataLabels: { enabled: false },
    stroke: {
      curve: "smooth",
      width: 5,
      colors: ["#18A73A", "#AD1F1F", "#CC8212"],
    },
    fill: {
      type: "gradient",
      gradient: {
        shadeIntensity: 1,
        type: "vertical",
        gradientToColors: ["rgba(255, 255, 255, 0.00)"],
        stops: [50, 94],
        opacityFrom: 0.6,
        opacityTo: 0.1,
      },
    },
    xaxis: {
      // using type: "datetime" causing the bug '25
      type: "datetime",
      tooltip: { enabled: false },
      labels: {
        datetimeUTC: false,
        formatter:
          categories.length > 1 && categories.length <= 3
            ? function (value) {
                const now = new Date(value);
                return format(now, "dd MMM");
              }
            : undefined,
      },
      categories: categories,
    },
    yaxis: {
      axisBorder: { show: true },
    },
    legend: { show: false },
    tooltip: {
      x: {
        formatter: function (value) {
          const date = new Date(value);

          if (categories.length >= 2 && categories.length <= 3) {
            return format(date, "dd/MMM/yyyy");
          } else if (
            categories.some(
              (category) =>
                isValid(parse(category, "yyyy-MM-dd HH:mm:ss", new Date())) &&
                category.includes(":")
            )
          ) {
            return format(date, "dd/MMM/yyyy | HH:mm");
          } else {
            return format(date, "dd/MMM/yyyy");
          }
        },
      },

      y: {
        formatter: function (val) {
          return val + " Pesanan";
        },
      },
    },
  };