Angular Highcharts areaspline graph not working when i tried to put date on x-axis

Angular Highcharts areaspline graph not working when i tried to put date on x-axis. Where am I doing wrong ?

I want my chart to have the same kind of x-axis data (i.e date format). On hovering points on chart, it should give me the actual date and time with data. This is line chart but mine in areaspline chart.

sample API data

{
    "body": {
        "httpstatuscode": 200,
        "AppData": [
            {
                "disk": [
                    ["Date.UTC(2024,05,09,04,59)",0.09272282759826356],
                    ["Date.UTC(2024,05,07,15,14)",0.09238017230533957],
                    ["Date.UTC(2024,05,07,23,22)",0.09246349058006409]
                ],
                "load": [
                    ["Date.UTC(2024,05,09,04,59)",0.2327228273426356],
                    ["Date.UTC(2024,05,07,15,14)",0.76238017230533957],
                    ["Date.UTC(2024,05,07,23,22)",0.45246349058006409]
                ],
                "cpu": [
                    ["Date.UTC(2024,05,09,04,59)",0.1227228273426356],
                    ["Date.UTC(2024,05,07,15,14)",0.54238017230533957],
                    ["Date.UTC(2024,05,07,23,22)",0.89246349058006409]
                ],
                "ram": [
                    ["Date.UTC(2024,05,09,04,59)",0.3427228273426356],
                    ["Date.UTC(2024,05,07,15,14)",0.54238017230533957],
                    ["Date.UTC(2024,05,07,23,22)",0.65246349058006409]
                ]
            },
         {
                "disk": [
                    ["Date.UTC(2024,05,09,04,59)",0.23272282759826356],
                    ["Date.UTC(2024,05,07,15,14)",0.65238017230533957],
                    ["Date.UTC(2024,05,07,23,22)",0.76246349058006409]
                ],
                "load": [
                    ["Date.UTC(2024,05,09,04,59)",0.3427228273426356],
                    ["Date.UTC(2024,05,07,15,14)",0.56238017230533957],
                    ["Date.UTC(2024,05,07,23,22)",0.67246349058006409]
                ],
                "cpu": [
                    ["Date.UTC(2024,05,09,04,59)",0.1227228273426356],
                    ["Date.UTC(2024,05,07,15,14)",0.54238017230533957],
                    ["Date.UTC(2024,05,07,23,22)",0.89246349058006409]
                ],
                "ram": [
                    ["Date.UTC(2024,05,09,04,59)",0.7927228273426356],
                    ["Date.UTC(2024,05,07,15,14)",0.76238017230533957],
                    ["Date.UTC(2024,05,07,23,22)",0.62246349058006409]
                ]
            }            
        ],
        "opStatusCode": 2000,
        "type": "SUCCESS",
        "message": "DATA RECEIVED SUCCESSFULLY"
    }
}

Comonent.html

<div class="graphBodyDiv">
  <highcharts-chart
    [Highcharts]="highcharts"
    [options]="chartOptions">
  </highcharts-chart>
</div>

component.ts

      cpuData=[];
      ramData=[];
      loadData=[];
      diskData=[];
    
  constructor(private httpclient: HttpClient,private httpService: HttpService) {}
      fetchData(){
        this.httpService.getData(request).subscribe((response: any) => {
          try {
            const jsonBody = response['body'];
            const appData = jsonBody['AppData'];
            this.cpuData=appData['cpu']
            this.loadData=appData['load']
            this.ramData=appData['ram']
            this.diskData=appData['disk']
    
            this.createAreaSplineChart();
          } catch (e: any) {
            console.log('Error in parsing json ' + e.message);
          }
          return response;
        });
    
      }
    
      highcharts:any;
      chartOptions:any;
    
      createAreaSplineChart(){
      console.log("******* chart printed.")
      this.highcharts=Highcharts
      this.chartOptions = {   
          chart: {
             type: 'areaspline'
          },
          title: {
             text: "Area Spline graph"
          },
          legend : {
             backgroundColor: '#FFFFFF'
          },
          xAxis:{
            title: {
              text: 'Hours',
              // enabled: true
           },
           allowDecimals: false,
            accessibility: {
                rangeDescription: 'Range: 1 to 24.'
            },
            type: 'datetime',
            dateTimeLabelFormats : {
              hour: '%I %p',
              minute: '%I:%M %p'
          },
            //  categories: ['1','2','3','4','5','6','7','8','9'] ,
            //  min:0,
             gridLineWidth: 1, // this is for vertical grid line
          lineWidth: 0,
          gridLineDashStyle: 'Solid',
          labels: {
            // autoRotationLimit: 30, // word-wrap
            enabled: true, // to enable x-axis labels
          },
          },
          yAxis : {
             title: {
                text: ''
             },
            //  min:0
          },
          plotOptions : {
            series: {
              marker: {
                  enabled: false, // enable point highlight on line chart
                  states: {
                    hover: {
                        enabled: true // enable point highlight on hover
                    }
                }
              }
          },
            //  area: {
            //     fillOpacity: 0.1 
            //  },
            areaspline: {
              fillOpacity: 0.1
          }
          },
          tooltip : {
            shared: true
            // valueSuffix: ' units'
         },
          credits:{
             enabled: false
          },
          series: [
             {
                name: 'CPU',
                data: this.cpuData,
                color:'#0021FF',
                lineWidth: 1.3
             }, 
             {
                name: 'RAM',
                data: this.ramData,
                color:'#FF5238',
                lineWidth: 1.3
             },
             {
              name: 'Load',
              data: this.loadData,
              color:'#981FFF',
              lineWidth: 1.3
           }, 
           {
              name: 'Disk',
              data: this.diskData,
              color:'#00D6F2',
              lineWidth: 1.3
           }
          ]
       };
      }

Your code is looking good, the only thing I would do is to change the data format to:

[Date.UTC(2024, 5, 7, 15, 14), 0.65238017230533957],
[Date.UTC(2024, 5, 7, 23, 22), 0.76246349058006409],
[Date.UTC(2024, 5, 9, 4, 59), 0.23272282759826356],

Here's a working demo: https://stackblitz.com/edit/highcharts-angular-basic-line-2taahu?file=src%2Fapp%2Fapp.component.ts

Please let me know if something doesn't work or if you have any further questions!