Issue with chart size on initial render

[Sven Markert]

Hi guys,

I’m pretty new to the whole CanvasJS system and just played around with it for a while, but I stumbled across the issue that different charts are not matching the container width they are in. The parent / container is sized using the BS4 grid system, overall I use React as a base. It’s all working pretty well and the charts fits in the parent once it gets rendered again, like when I open the Dev Console in Chrome. The charts itself have also no extra styling / sizing.
Is that a known issue and what could I potentially do to solve it?

Regards,
Sven

[Manoj Mohan]

Sven,

Can you kindly create a sample project reproducing the issue you are facing and share it with us over Google-Drive or Onedrive so that we can understand your scenario better and help you out?

—-
Manoj Mohan
Team CanvasJS

[Sven Markert]

Hi Manoj,

https://drive.google.com/drive/folders/1-VL-xoP69GHJ9X0vHzBsvsR4pBPvgHge?usp=sharing

the you go with an example, reduced to the core needed to reproduce the issue, something I noticed about it is that it seems to be an issue with the bootstrap tabs, as you’ll see the first tab will be rendered correctly. I didn’t notice that before as the first tab in the real project is filled with different content.

Regards
Sven

[Manoj Mohan]

Sven,

Rendering the respective chart on switching tabs using shown.bs.tab event should work fine in your case as shown in this JSFiddle.

—-
Manoj Mohan
Team CanvasJS