Questions about charts

[JacoobH]

The problem appears in this file "src/app/home/home.component.ts"

I wonder why the pie chart doesn't render if this code is outside of ngOnInit

this.emailChartType = ChartType.Pie;
this.emailChartData = {
      labels: ['62%', '32%', '6%'],
      series: [62,32,6]
};
this.emailChartLegendItems = [
      { title: 'Open', imageClass: 'fa fa-circle text-info' },
      { title: 'Bounce', imageClass: 'fa fa-circle text-danger' },
      { title: 'Unsubscribe', imageClass: 'fa fa-circle text-warning' }
];

I need to render the chart using the data I get from the back-end, my code looks like this

ngOnInit() {
      this.myService.getData().subscribe( data => this.function(data));
}

function(data){
      let myLabels: string[] = [];
      let mySeries: number[] = [];
      let myItems: Item[] = [];

      // Process the data

      this.emailChartType = ChartType.Pie;
      this.emailChartData = {
          labels: myLabels,
          series: mySeries
      };
      this.emailChartLegendItems = myItems;
}

And then there's the problem, the chart disappears.
I thought the problem was that the data wasn't available when the chart was rendered, so I changed all the values to static to see if it was what I thought it was, just like this

ngOnInit() {
      this.myService.getData().subscribe( data => this.function(data));
}
function(data){
      this.emailChartType = ChartType.Pie;
            this.emailChartData = {
                labels: ['62%', '32%', '6%'],
                series: [62,32,6]
             };
            this.emailChartLegendItems = [
                { title: 'Open', imageClass: 'fa fa-circle text-info' },
                { title: 'Bounce', imageClass: 'fa fa-circle text-danger' },
                { title: 'Unsubscribe', imageClass: 'fa fa-circle text-warning' }
            ]; 
}

The problem remains unresolved.

I want to figure out how do I render my data correctly into this chart

I would appreciate it if you could give me a reply

[JacoobH]

I solved this problem using resolver