Page become unresponsive when running AGChart on array of objects

I am developing one project using Angular 17 and AG Angular Charts. I want to create horizontal bar charts in separate div using same set of data(array of objects). I have implemented below code but it makes page unresponsive. What am I doing wrong here?

Stackblitz Code Link

HTML File

<div style="float:left; border:solid 1px #7CB9E8; border-radius:5px; background-color: white; margin-left: 15%; width:45%; padding: 2%; margin-top: 2%; " *ngFor="let ques of getQues(); let quesIndex = index">
<ag-charts-angular style="height: 100%;" *ngIf="isBrowser" [options]="options[quesIndex]">
</ag-charts-angular>

</div>


TS File @Component({ selector: 'view-survey', templateUrl: './viewsurvey.component.html',
standalone: true, imports: [ CommonModule, AgChartsAngularModule,
], providers: [],
})

export class ViewSurveyComponent implements OnInit, OnDestroy {
public options:AgChartOptions[]=[];
public isBrowser!: boolean;

constructor(@Inject(PLATFORM_ID) private platformId: Object) {
this.isBrowser = isPlatformBrowser(this.platformId);
}

ngOnInit() {
for(let cntQues=0; cntQues<this.getQues().length; cntQues++)
{
let option:AgChartOptions = {
data: (this.getQues()[cntQues]),
series: [
{
type: "bar",
direction: "horizontal",
xKey: "response",
yKey: "respcnt",
yName: "Response Count",
},
],};
this.options.push(option);
}}

ngOnDestroy() {
}

getQues()
{
const arrQues:any[] =
[{
0 : [
{
response: "Response 1",
respcnt: 80,
},
{
response: "Response 2",
respcnt: 94,
}],
},
{
1:[
{
response: "Response 1",
respcnt: 70,
},
{
response: "Response 2",
respcnt: 62,
},
{
response: "Response 3",
respcnt: 92,
}]
}];

return arrQues;
}
}


Please help me here.

Continue reading...