How to show xaxis dates under the highchart?

Highcharts does not show dates under the chart when I'm passing the series data as array of objects.

result image

Documentation allows to use an object instead of array([1649153340000, 45]docs

I have to avoid using array because I have to pass some props into tooltip

How to show dates under the chart?

I have a config data:

const config =
  {
    "series": [
        {
          "name": "Session Duration",
          "data": [
              {y:45, x: moment("05/04/2022 13:09", 'DD/MM/YYYY HH:mm').toDate().getTime()},
              {y:38, x: moment("06/04/2022 07:00", 'DD/MM/YYYY HH:mm').toDate().getTime()},
              {y:24, x: moment("06/04/2022 13:00", 'DD/MM/YYYY HH:mm').toDate().getTime()},
              {y:33, x: moment("07/04/2022 07:00", 'DD/MM/YYYY HH:mm').toDate().getTime()},
              {y:26, x: moment("09/04/2022 13:48", 'DD/MM/YYYY HH:mm').toDate().getTime()},
              {y:21, x: moment("10/04/2022 09:15", 'DD/MM/YYYY HH:mm').toDate().getTime()},
              {y:20, x: moment("11/04/2022 14:53", 'DD/MM/YYYY HH:mm').toDate().getTime()},
              {y:6, x: moment("11/04/2022 19:13", 'DD/MM/YYYY HH:mm').toDate().getTime()},
              {y:8, x: moment("12/04/2022 07:19", 'DD/MM/YYYY HH:mm').toDate().getTime()},
              {y:9, x: moment("13/04/2022 07:11", 'DD/MM/YYYY HH:mm').toDate().getTime()},
              {y:10, x: moment("13/04/2022 13:27", 'DD/MM/YYYY HH:mm').toDate().getTime()},
              {y:13, x: moment("14/04/2022 07:38", 'DD/MM/YYYY HH:mm').toDate().getTime()},
              {y:15, x: moment("14/04/2022 07:38", 'DD/MM/YYYY HH:mm').toDate().getTime()},
          ]
        },
    ],
    "xaxis": {
      "categories": [
        "05/04/2022 13:09",
        "06/04/2022 07:00",
        "06/04/2022 13:00",
        "07/04/2022 07:00",
        "09/04/2022 13:48",
        "10/04/2022 09:15",
        "11/04/2022 14:53",
        "11/04/2022 19:13",
        "12/04/2022 07:19",
        "12/04/2022 13:30",
        "13/04/2022 07:11",
        "13/04/2022 13:27",
        "14/04/2022 07:38"
      ],
    }
  }

Series refactor after:

const colors = ['#56A7D2', '#374955', '#19e78a', '#ef6a17', '#3deae6', '#882a2a', '#d5c06d', '#408c89'];
const xAxisCategoriesNumber = config.xaxis.categories.map((date: Date) =>
  moment(date, 'DD/MM/YYYY HH:mm').toDate().getTime()
);
const series = config.series.map((object: any, cfgIndex: number) => (
    {
      name: object?.name ? object?.name : (cfgIndex === 0 ? 'Reach' : 'Engagement'),
      type: 'areaspline',
      color: colors[cfgIndex] || colors[0],
      lineWidth: 1.2,
      data: xAxisCategoriesNumber.map((item: number, indx: number) => {
        // console.log(config.series[cfgIndex]?.data[indx]);
        return config.series[cfgIndex]?.data[indx]
      }),
    }
    ))

some options:

const options = {
  chart: {
    zoomType: 'x',
    type: 'areaspline',
    height: 650,
  },
  time: {
    useUTC: false,
  },
  series,
  title: {
    text: '',
  },
  yAxis: {
    endOnTick: false,
    startOnTick: false,
    title: '',
    gridLineColor: '#C5C5C5',
    plotLines: [
      {
        color: '#374955',
        dashStyle: 'Dash',
        value: 0,
        zIndex: 10,
        width: 1,
      },
    ],
    labels: {
      // Left side labels
      formatter: function () {
        return `${Number(this.value)?.toFixed(1)} ${disableLabelsPercentage ? '' : '%'}`;
      },
    },
  },
  xAxis: {
    type: 'datetime',
    // categories: config.xaxis.categories,
    // categories: xAxisCategoriesNumber.map((elem: any) => elem * 1000),
    crosshair: true,
    minTickInterval: 28 * 24 * 3600 * 1000,
    labels: {
      // Date under the chart
      formatter: function () {
        return `${moment(this.value).format('MMM YYYY')}`;
      },
    },
  },
  plotOptions: {
    series: {
      lineWidth: 1.2,
      marker: {
        enabled: true,
        radius: 3,
        symbol: 'circle',
      },
      pointIntervalUnit: 'month',
    },
    areaspline: {
      fillColor: plotFillColor || '#d1e7dd',
      negativeFillColor: plotNegativeFillColor || '#f8d7da',
    },
  },
    tooltip: {
      useHTML: true,
      formatter:function () {
        const point = this.point;
        const index = this.point.index;
        const series = this.point.series;
        const date = moment(xAxisCategoriesNumber[index]);
        // console.log(this.point.series.data);
        // console.log(this.point.series.data[0] );
        console.log(xAxisCategoriesNumber);

        return !(this.point as any).disabled
            && `
              <div>${date.format( 'DD MMMM hh:mm')}, ${date.format('YYYY')}</div>
              <div>${series.name}: ${point.y}${disableLabelsPercentage ? '' : '%'}</div>
            `
      },
};