We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

Charts in bootstrap modal not adjust correctly

Thread ID:





122095 Feb 16,2016 05:54 PM Mar 7,2016 11:29 PM ASP.NET Web Forms 4
Tags: Chart
Roimer Machacón Otero
Asked On February 16, 2016 05:54 PM

Hi we're using charts in a boostrap modal, now when open the modal, the charts overlap each other. (This have canresize property in true and can't put the width in percentage because the chart don't appear)

We use in the column definition <div class="col-xs-12 col-md-4 col-lg-4> also of bootstrap

Attached image with the error.

Attachment: error_chart_2b24d32c.zip

Akbar Basha K M [Syncfusion]
Replied On February 17, 2016 07:52 AM

Hi Roimer,
Thanks for contacting our Syncfusion support. We are able to reproduce the reported issue. we are analyzing on this. we will let you know the status of one bussiness day(17th Feb 2016).
Akbar Basha KM. 

Sanjith Kesavan [Syncfusion]
Replied On February 18, 2016 08:54 AM

Hi Roimer,
Thanks for your patience. We have analyzed the reported issue. While rendering chart in bootstrap model the width of the <div> which containing the chart is 0 because the div is hidden. So the default width 600px is applied for the chart. To avoid this please follow the below code example.

In the above code example, we have subscribed the shown event for the bootstrap model, this time while the modal is visible the div container width will be available for the chart to render. We have redrawn the chart. Now the chart will render like below.

We have prepared the sample as per your requirement. Please find the sample from the below location.
Sample Link: http://www.syncfusion.com/downloads/support/forum/122095/ze/Bootstrap-1502326936

Please let us know if you have any concern.

Sanjith K.

Roimer Machacón Otero
Replied On March 7, 2016 04:27 PM

Hi, we applied the solution exposed for you, and this work correctly, Thanks you!

Saranya CJ [Syncfusion]
Replied On March 7, 2016 11:29 PM

Hi Roimer,
Thank you for your update. Please let us know if you require any other assistance.


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.