On same page, I’ve implemented multiple graphs by using Tabs i.e. Tab 1, Tab 2, Tab 3… and the graph width is defined 100% and height is defined 250px however, if user interacts with Tabs, the width of the graph increases and graph displays outside the parent div.
The problem may be related to the timing. Chart is rendered before the tab is displayed, therefore, the dimensions are not calculated properly. There will be some event when the tab is displayed, and after this event is triggered, the chart should be initialized.
You can refer this example with bootstrap tabs.
If the problem still persists, please create a jsfiddle. So that we can look into it.
Sanjoy, thanks for the reply. My graphs are dynamic and still I am finding the issue and also one more issue I’ve identified i.e. in mobile devices, some instances, graph is blanked. Say portrait view graph are displayed and if user switched to landscape view, graph is blanked.
For multiple dynamic charts in bootstrap tabs, please refer to this example on using the tab events.
Also, we checked the charts with multiple mobile devices and it seems to be working fine. Can you kindly create a jsfiddle reproducing the issue, so that we can look into the issue and help you out. Along with it, please provide the following information: Mobile Device, OS and its version, Browser and version.