Chart not rendering inside Side Drawer

[ashishpawar12]

Describe the bug

I was trying to implement line chart on side drawer. But not able to load chart

Expected behavior

Chart should be loaded on side drawer.

Screenshots

If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context

Add any other context about the problem here.

[ashishpawar12]

shidoka-sample-angular copy.zip

[brian-patrick-3]

FYI, I think putting things like charts and tables in the side drawer goes against design guidelines.

However, it does seem like a legitimate bug that the chart doesn't render inside a container initially set to display: none.

[brian-patrick-3]

This was actually a CSS positioning issue with the Side Drawer component in shidoka-applications. It is resolved in 1.6.2.

Just a reminder again though that using Charts inside of Side Drawers goes against official design guidelines.

[ashishpawar12]

Hi @brian-patrick-3 , Still this is not working with sample code i have attached. Can you have a look please?

[brian-patrick-3]

Can you create an example in CodeSandbox that reproduces it? I am unable to reproduce in shidoka-applications@1.6.2

[ashishpawar12]

@brian-patrick-3 PFB link for codeSandbox https://codesandbox.io/p/devbox/gifted-ellis-jj8dq2?file=%2Fsrc%2Fapp%2Fapp.component.ts%3A11%2C25&workspaceId=a63da9bb-5496-4111-be41-7fd9d81ab734

https://codesandbox.io/p/devbox/sidedrawerwithchart-jj8dq2?file=%2Fpackage.json%3A21%2C59

[brian-patrick-3]

The issue is in how you've written your code:

1. Remove *ngIf="loadChart" from each <kd-chart>. This is the main problem.
2. Remove (click)="drawerOpen()" from anchor span. The button to open the drawer is built-in so this is not needed.
3. Remove extraneous wrapper divs: <div style="height: 500px;">. Unnecessary.
4. Remove any inline arrays/objects you are passing to <kd-chart> props (labels, options, datasets), and use variables instead. Inline array/object type props can cause unnecessary re-renders.
5. On <kyn-side-drawer>, [hideFooter]="true" can just be hideFooter since it will never change.

Forked working example

[ashishpawar12]

Hi @brian-patrick-3 , Still its not working after doing all the changes suggested by you. Can you please give me access to fork working example. Its a private folder. Need to move out to public. Thanks

https://codesandbox.io/p/devbox/sidedrawerwithchart-jj8dq2?file=%2Fsrc%2Fapp%2Fapp.component.html%3A52%2C21

[brian-patrick-3]

It should be public now I think

[ashishpawar12]

@brian-patrick-3 Not working on your codesandbox URL too. First chart work for firefox but not for chrome. And 2nd chart is not working in both browser Chrome:

Firefox:

[brian-patrick-3]

Thanks for the update. I have one more theory to test tomorrow, it may be related to the chartjs deferred plugin.

[brian-patrick-3]

Removing chartjs-plugin-deferred from being included by default seems to have resolved this in 1.1.7. It's not ideal, but it can still be added manually if anyone needs it.