I am creating highcharts in angular. I want to display highchart corresponding to a particular image,there are multiple images and for each image I have to display a highchart. the data for images and highcharts are coming from different api's. i added images in a loop and displaying it , but i am not able to display highcharts corresponding to each image. i am not getting different container names(i.e.container1, container2 .... so on) because series data changing in for loop.

I tried this so far:

app.component.html:

<div class="col-md-6">
  <div class="row align-items-center h-100 ">
    <div class="col" *ngFor="let conts of container1;let i= index">
      <div id="{{'container'+i}}" style="min-width: 70px; height: 70px;"> 
    </div>
  </div>
</div>

app.component.ts:

getData(data_id) {

for (let i = 0, j = data_id.length; i < j; i++) {
  this._Service
    .get(data_id[i])
    .subscribe((data: any) => {
      //console.log(data);
      const seriesNames = [...new Set(data.data.map((d) => d[2]))];

      const series = seriesNames.map((seriesName) => {
        return {
          name: seriesName,
          data: data.data
            .filter((d) => d.includes(seriesName))
            .map((d) => [d[0], d[1]]),
        };
      });
      console.log(series);
      var tempArray1 = [];

      var tempArray;
      for (i = 0; i < series.length; i += 1) { //here i am dividing that series data to display it corresponding to each image
        tempArray = series.slice(i, i + 1);
        console.log(tempArray);
        var container: any = "container";
        var func_name: any = "container" + i;
        this.multiGraph = this.container1.push(container);
        console.log(this.container1);
        Highcharts.chart({
          chart: {
            renderTo: container,
            type: "bar",
          },
          title: {
            text: "",
          },
          credits: {
            enabled: false,
          },
          xAxis: {
            tickInterval: 1,
          },

          yAxis: {
            minorTickInterval: 0.1,
          },
          tooltip: {
            // headerFormat: "<b>{series.name}</b><br />",
            pointFormat: "{point.x}: {point.y}",
          },
          series: tempArray,
        });
      }
    });
}
}

I am using below data for highcharts:

Any help would be highly appreciated, Thanks in advance :)