Unable to initialize chart's results with API fetched data

Question

I am new to ngx charts and trying to visualize some data. But I don't reach to visualize the data.

Can someone help me in this case?

usedata.servcie.ts

import { Injectable } from '@angular/core';
import { ApiService } from './api.service';
import { MultiItem } from '../models/datamodel';


@Injectable({
  providedIn: 'root',
})
export class UsedataService {

  apiData: MultiItem[];
  constructor(private config: ApiService) {
    this.apiData = [];
  }

  transformToJSON() {
    this.config.getData()
      .subscribe(data => {
          data.elements.forEach((item, index) => {
            const mItem = this.apiData.find( param1 => param1.name === item.parameter_1.value);
            if (mItem) {
              const sItem = mItem.series.find(param2 => param2.name === item.parameter_2.value);
              if (!sItem) {
                mItem.series.push({
                  name: item.parameter_2.value,
                  value: item.parameter_3.value,
                });
              }
            } else {
              this.apiData.push({
                name: item.parameter_1.value,
                series: [{
                  name: item.parameter_2.value,
                  value: item.parameter_3.value,
                }],
              });
            }
          } );
      });
    }
  }

My Models datamodel.ts

export interface SeriesItem {
  name: string;
  value: number;
}

export interface MultiItem {
  name: string;
  series: SeriesItem[];
}

heatmap.component.ts

import { Component, OnInit } from '@angular/core';
import { UsedataService } from '../../../services/usedata.service';

@Component({
  selector: 'ngx-d3heatmap',
  templateUrl: './heatmap.component.html',
  styleUrls: ['./heatmap.component.scss'],
})
export class D3HeatmapComponent implements OnInit {
  single: any[];

  constructor(
    public service: UsedataService,
  ) {}

  multi: any = this.service.apiData;

 ngOnInit() {
     this.service.transformToJSON();
  }

  view: any[] = [600, 400];

  // options
  showXAxis = true;
  showYAxis = true;
  gradient = true;
  showLegend = true;
  showXAxisLabel = true;
  xAxisLabel = 'Technologie';
  showYAxisLabel = true;
  yAxisLabel = 'Applikationsfelder/ Branchen';
  colorScheme = {
    domain: ['#66e4e8', '#66a9e8', '#077cdb', '#8509e3']
  };
  trimXAxisTicks = false;
  trimYAxisTicks = false;

}

If I do the following: console.log(this.service.apiData);

It shows me the data in the following:

data.json

"elements": [
    {
      "label": "Deep learning algorithms increase cancer detection dramatically.",
      "description": "encoded / parsed text with HTML tags",
      "parameter_1": {
        "value": "Deep Learning",
        "description": "encoded / parsed text with HTML tags"
      },
      "parameter_2": {
        "value": "Cancer detection",
        "description": "encoded / parsed text with HTML tags"
      },
      "parameter_3": {
        "value": 3
      }
    } ]

can*t ngx-charts read the array? if yes how I can change my array into array object? Kind regards Nicole