Graphs with { width: "100%" } are causing errors and not acting respon

[E B]

Hello!

I am building a modular dashboard that contains graphs from SyncFusion. The graphs vary in size, and the user can adjust the parent box that contains the graph. The graphs live in Bootstrap 3 columns ("col-md-6", "col-md-4").

I'm having the problem that whenever I specify the width as a percentage (etc: "{ width: "90%" }), the graph appears blank and I receive this error whenever the mouse is over the graph's bounding box: "Uncaught TypeError: can't access property "X", this.model.m_AreaBounds is undefined"

If I set the width to a fixed pixel size or do not specify it at all, it works normally. The height works regardless if it is a percent, pixel, or unspecified.

Libraries used:

- Bootstrap 3

- SyncFusion

I've attached the full code.

Attachment: Copy_134e06a6.zip

[Durga Gopalakrishnan]

Hi E B, 

We are validating your reported scenario. We will update the status within two business days(24^th September, 2020). We appreciate your patience until then. 

Regards, 

Durga G 

[Durga Gopalakrishnan]

Hi E B, 

We have validated your reported scenario from our end. We were able to render chart in bootstrap columns while providing width as percentage. We have prepared sample with provided code snippet. Please find the sample below. 

https://jsplayground.syncfusion.com/hokrx4ed 

Since we are unaware of your exact scenario in which an issue is reproduced, please share the following information which will be more helpful for further analysis and provide you the solution sooner. 

• Try to reproduce the reported scenarios in above samples.
• Share the details if you have done any other customization in your sample.
• Share your preview template version.

 

Please revert us, if you have any concerns. 

 

Regards, 

Durga G