Can I place the charts in jQuery tab?

Permanently deleted user -

When I add the chart to a container that is a jQuery tab (initially hidden) the chart is not displayed properly.

Is there a way around it?

Have more questions? Submit a request


  • Avatar
    Martynas Majeris


    However there is one caveat: the chart cannot properly calculate its container's size if it's hidden. Therefore you will need to employ your tab control event scheme to call chart.invalidateSize() whenever the tab with the chart is activated.

    Here's a live demo showcasing just that using jQuery UI Tabs:

  • Avatar
    Ravi Teja Juvvadi

    Can i use dojo tabs instead of jquery

  • Avatar

    Can you confirm this should also work with ammaps.js? I get the following error when I try to invalidateSize on a map:

    TypeError: Object #<HTMLDivElement> has no method 'invalidateSize'


    Perhaps I need to include another .js library to enable this feature?

  • Avatar
    Daniel McQuillen

    I'm successfully updating a chart that I've placed in a tab. However, the sizing isn't quite right. Is there something else I should do beyond calling invalidateSize()?

    I'm using the "activate" event rather than the "select" event as shown in your fiddle code, since it seems that "activate" is the event listed in the JQuery docs:

    I've attached a screenshot of what I'm seeing. 

    Here's the html code I'm using for my tabs. (I'm using the Avant dashboard theme.)


    <div id="tabs" class="tab-container tab-danger">

    <ul class="nav nav-tabs">

    <li class="active" ><a href="#plant-loads-tab" data-toggle="tab">Plant Loads</a></li>

    <li ><a href="#plant-efficiency-tab" data-toggle="tab">Plant Efficiency</a></li>


    <div class="tab-content" style="background:#fff;">

    <div class="tab-pane active" id="plant-loads-tab" style="height:470px;">

    <div id="site-statistics" style="height:450px;"></div>


    <div class="tab-pane" id="plant-efficiency-tab" style="height:470px;">

    <div id="plant-efficiency" style="height:450px;"></div>












  • Avatar
    Daniel McQuillen's what I see when I have this chart in the first tab. Note the sizing is correct.

Powered by Zendesk