Home Forums Feature Requests & Feedback Multiple Graphs on Tabs

Multiple Graphs on Tabs

Viewing 5 posts - 1 through 5 (of 5 total)
  • #11332

    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.

    Screenshot for reference
    https://dl.dropboxusercontent.com/u/735356/GraphIssue.jpg

    Please suggest how to handle this.

    • This topic was modified 5 years, 6 months ago by mahi2000. Reason: Screenshot added
    #11337

    @mahi2000,

    The problem may be due to rendering the chart before even tab is displayed because of which dimensions for the chart are not calculated properly. You can use tab events to initialize and render the respective chart after the tab is displayed as shown in this code snippet.

    $('#bs-tab2').on("shown.bs.tab",function(){
      chartTab2();
      $('#bs-tab2').off();
    });

    Please take a look at this JSFiddle for complete code.

    Charts within BootStrap Tabs

    If the problem still persists, please create a JSFiddle. So that we can look into it.

    —-
    Sanjoy Debnath
    Team CanvasJS

    #11343

    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.

    #11347

    Please let me know if there is any solution.

    #11351

    @mahi2000,

    Please refer to this JSFiddle for an example on rendering multiple dynamic charts in bootstrap tabs using bootstrap shown.bs.tab tab events.

    Dynamic Charts within Bootstrap Tabs

    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.

    —-
    Vishwas R

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.