Closed ashishpawar12 closed 8 months ago
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.
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.
Hi @brian-patrick-3 , Still this is not working with sample code i have attached. Can you have a look please?
Can you create an example in CodeSandbox that reproduces it? I am unable to reproduce in shidoka-applications@1.6.2
The issue is in how you've written your code:
*ngIf="loadChart"
from each <kd-chart>
. This is the main problem.(click)="drawerOpen()"
from anchor span. The button to open the drawer is built-in so this is not needed.<div style="height: 500px;">
. Unnecessary.<kd-chart>
props (labels, options, datasets), and use variables instead. Inline array/object type props can cause unnecessary re-renders.<kyn-side-drawer>
, [hideFooter]="true"
can just be hideFooter
since it will never change.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
It should be public now I think
@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:
Thanks for the update. I have one more theory to test tomorrow, it may be related to the chartjs deferred plugin.
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.
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):
Smartphone (please complete the following information):
Additional context
Add any other context about the problem here.