0

I'm pulling data from an Angular service and trying to populate and ngx bar chart. 

export class CustomersComponent implements OnInit {

  customers: Customer[];

  single: any = [
    {
      "name": [],
      "value": []
    }      
  ];

  view: any[] = [700, 400];

  // options for the chart
  showXAxis = true;
  showYAxis = true;
  .......

I'm looping through the data to get individual results and then passing them to chart.

ngOnInit(): void {
this.getCustomers();
this.customerService.getCustomers().subscribe(res => res.forEach((item, i , res) => {this.single.push({name:(item.firstname), value: (item.age) }) }));
this.single = [...this.single];
console.log(this.single),
(err) => {console.log(err)};
}

I can see the data in the console, but it doesn't populate the chart. I've also noticed my first object is empty and the next ones have populated.

enter image description here

Could this be why the chart isn't populating with data? Any help is greatly appreciated.

Seeker C
  • 67
  • 9

1 Answers1

1

This is similar problem what i faced,

The solution would bee to manually refresh as follows,

declare a variable _chart as follows,

@ViewChild(BaseChartDirective) private _chart;

you can refresh by using the following function,

 forceChartRefresh() {
    setTimeout(() => {
      this._chart.refresh();
    }, 10);
  }

and call after updating your data,

 this.forceChartRefresh();
Sajeetharan
  • 216,225
  • 63
  • 350
  • 396
  • No. That didn't work. But thank you for the suggestion. I think it really has to do with the first object being zero. I need to figure out how to make the first object in the array start with 0 instead of 1. Do you have any ideas? – Seeker C Feb 24 '19 at 15:32