Chart in Angular not displayed until windows resize

Question

If there any solution to this issue please let me know. I still new to using the chart.js and Angular. when I try to pull the graph datasets using API, graph seems hidden until I change the window size. I dont know if Im doig wrong or it is problem in the chart.js module. Please help, thank you.

Before resize

After resize

HTML code

TS typescript code

Answer 1

There's a reason why you're seeing that chart after resize because you're nesting your API calls and angular change-detection doesn't work well with nested functions. There're 2 solutions to this problem.

1. You can flatten your API calls and remove nesting or

2. you can use changeDetectorRef to trigger the change detection by

   constructor(
             private cdr: ChangeDetectorRef
   
   ) {}
   

   use the below statement after your calculation is finished.

   this.cdr.markForCheck();

I'd advise you to go for the first option.

Answer 2

Maybe, you can try it with setTimeout. Because while the the chart rendering, the container has no size