-1

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

Atikah Faudzi
  • 3
  • 1
  • 1
    Please share the code in [stackblitz](https://stackblitz.com/edit/angular) – Deepu Reghunath Sep 10 '20 at 10:13
  • https://stackblitz.com/edit/angular-ivy-mahdhg?file=src/app/app.module.ts @DeepuReghunath but got some error since I dont know how to call json data in certain id in service – Atikah Faudzi Sep 10 '20 at 11:04

2 Answers2

0

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.

Rahul Sachdeva
  • 71
  • 3
0

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

Ten
  • 26
  • 3