charts component ts and html - Reporting L11

//TS
import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
import { Chart, registerables } from 'chart.js';
import { RegionModel } from '../Models/regionModel';
import { RegionService } from '../service/region.service';


Chart.register(...registerables);

@Component({
  selector: 'app-charts',
  standalone: true,
  imports: [],
  templateUrl: './charts.component.html',
  styleUrl: './charts.component.scss'
})
export class ChartsComponent implements OnInit{
  data: any;
  @ViewChild('myTemp')
  myTempRef!: ElementRef;

 
  constructor(private regionService : RegionService) {}
  
  ngOnInit(): void {
    this.regionService.getRegions().subscribe(response => {
      let regionList = response;

      this.data = response.$values;
      
      this.populateChartData(this.data);
      console.log('data',regionList)
      return regionList
    });
  }

  populateChartData(data: RegionModel[]) {
    
    let labelsData: string [] = [];
    let labelsPopulation: number [] = [];
    
    data.forEach((element: any) => {
      labelsData.push(element.code);
      labelsPopulation.push(element.population)
    });


    new Chart("barchart", {
      type: 'bar',
      data: {
        labels: labelsData,
        datasets: [{
          label: '# of Population',
          data: labelsPopulation,
          borderWidth: 1
        }]
      },
      
      options: {
        scales: {
          y: {
            beginAtZero: true
          },
        }
      
      }
    });
    

    new Chart("piechart", {
      type: 'pie',
      data: {
        labels: labelsData,
        datasets: [{
          label: '# of Population',
          data: labelsPopulation,
          borderWidth: 1
        }]
      },
      options: {
        scales: {
          y: {
            beginAtZero: true
          }
        }
      }
    });

    new Chart("dochart", {
      type: 'doughnut',
      data: {
        labels: labelsData,
        datasets: [{
          label: '# of Population',
          data: labelsPopulation,
          borderWidth: 1
        }]
      },
      options: {
        scales: {
          y: {
            beginAtZero: true
          }
        }
      }
    });

    new Chart("pochart", {
      type: 'polarArea',
      data: {
        labels: labelsData,
        datasets: [{
          label: '# of Population',
          data: labelsPopulation,
          borderWidth: 1
        }]
      },
      options: {
        scales: {
          y: {
            beginAtZero: true
          }
        }
      }
    });

    new Chart("rochart", {
      type: 'radar',
      data: {
        labels: labelsData,
        datasets: [{
          label: '# of Population',
          data: labelsPopulation,
          borderWidth: 1
        }]
      },
      options: {
        scales: {
          y: {
            beginAtZero: true
          }
        }
      }
    });

    new Chart("linechart", {
      type: 'line',
      data: {
        labels: labelsData,
        datasets: [{
          label: '# of Population',
          data: labelsPopulation,
          borderWidth: 1
          
        }]
        
      },
      options: {
        scales: {
          y: {
            beginAtZero: true
          }
        }
      }
    });

    new Chart("bubchart", {
      type: 'bubble',
      data: {
        labels: labelsData,
        datasets: [{
          label: '# of Population',
          data: labelsPopulation,
          borderWidth: 1
          
        }]
        
      },
      options: {
        scales: {
          y: {
            beginAtZero: true
          }
        }
      }
    });

  }

}
//HTML
<div class="row">
    <div class="col-lg-6">
        <h2>Line Chart</h2>
        <canvas id="linechart"></canvas>
    </div>
    <div class="col-lg-6">
        <h2>Bar Chart</h2>
        <canvas id="barchart"></canvas>
    
    </div>
    <div class="col-lg-6">
        <h2>Pie Chart</h2>
        <canvas id="piechart"></canvas>
        
    </div>
    <div class="col-lg-6">
        <h2>Doughnut Chart</h2>
        <canvas id="dochart"></canvas>
    </div>
    <div class="col-lg-6">
        <h2>polarArea Chart</h2>
        <canvas id="pochart"></canvas>
    </div>

    <div class="col-lg-6">
        <h2>Radar Chart</h2>
        <canvas id="rochart"></canvas>
    </div>
</div>