Highcharts not printing points from API call in Angular

This is how my series object looks that is being passed to the highcharts.

[0 … 99]
    0:
        data:
            z: 52.4421997
            x: 1301702400000
            y: 54.9129982
            __proto__: Object
        name: "Dummy"
        __proto__: Object

I am not getting either of the x axis values or y axis values and also no data point is being printed.

I am using the below scatter object to which the series argument is the data passed in the above format

  scatter(series) : void{
    console.log(series);
    
    const chart = new Chart({
      chart: {
        type: 'scatter',
        reflow: true,
        zoomType: 'xy',
        width: 1328.91
      },
      title: {
        text: ''
      },
      credits: {
        enabled: false
      },
      xAxis: {
        type: "datetime",
        title: {
          text: ''
        },
        startOnTick: true,
        endOnTick: true,
        showLastLabel: true
      },
      tooltip: {
        formatter(): string {
          // tslint:disable-next-line: no-string-literal
          return '<b>' + this.series.name + '</b><br/>' + '<b>x </b>' + this.x + '<br/><b>y </b>' + this.y;
        }
      },
      yAxis: {
        title: {
          text: ''
        }
      },
      legend: {
        align: 'right',
        verticalAlign: 'top',
        layout: 'vertical',
        x: 0,
        y: 50,
        floating: false,
        backgroundColor: '#FFFFFF',
        borderWidth: 0
      },
      plotOptions: {
        scatter: {
          marker: {
            radius: 5,
            states: {
              hover: {
                enabled: true,
                lineColor: '#005580'
              }
            }
          }
        }
      },
      // tslint:disable-next-line: object-literal-shorthand
      series: series,
      responsive: {
        rules: [{
          condition: {
            maxWidth: 500
          },
          chartOptions: {
            legend: {
              enabled: false
            }
          }
        }]
      }
    });
    this.chart = chart;
  }

I need help as to where my code is failing I have assigned the series data by pushing

this.scatterData.push({
              name: element.name,
              data: {
                x: element.xvalue,
                y: element.param,
                z: elememt.pointer
              }
            });

You need to make sure that your series array is in the correct format. Example:

var series = [
 {
  data: [
  {
    x: 1,
    y: 2,
    z: 5
  },
  {
    x: 2,
    y: 4,
    z: 1
  },
  {
    x: 3,
    y: 1,
    z: 10
  }]
}];    

If you're getting any errors from Angular it's also good to add to the series variable code "as any" or create an interface that will expand the series options.

Demo: https://stackblitz.com/edit/highcharts-angular-basic-line-88sbpi