I am trying to use the Highcharts module in Angular to build a chart. The data object needed for the chart is provided by an API, and this is the structure of the object:
{
"success": true,
"activity": [
{
"username": "aja_ditag_yo",
"activity": 0
}
]
}
In order to fetch the data object and display it on my component, I have created a service.ts file and called it within my component.ts file. Here is a snippet of the component.ts:
import { Component, OnInit } from '@angular/core';
import * as Highcharts from 'highcharts';
import { AdminService } from 'src/app/services/admin.service';
@Component({
selector: 'app-linebarchart',
templateUrl: './linebarchart.component.html',
styleUrls: ['./linebarchart.component.scss']
})
export class LinebarchartComponent implements OnInit{
chartOptions:{} = {};
Highcharts = Highcharts;
dataRegister:any = {}
constructor(
public adminService: AdminService
) {
}
ngOnInit (): void {
this.adminService.getActivity().subscribe(data => {
this.dataRegister = data
this.chartOptions = {
// some highcarts config, and dataRegister is called
....
series: this.dataRegister.activity
}
})
}
}
The issue I encountered was that the chartOptions inside the subscribe method returned undefined. To resolve this, I moved the chartOptions outside the subscribe block, which displayed the highcharts on the page. However, the dataRegister.activity property still returns undefined. How can I address this issue?