Issue #19 resolved

Size bug when placed into another div

Anonymous created an issue

Hi Chris,

When I use jQplot into another div, the size given to the jqplot div is not taken in consideration. {{{


<div> <div id="chart" class="plot" style="width:900px;height:500px;"></div> </div>

}}} The chart is drawn with the default height and width (w=400, h=300)

Even when I specify a size to my wrapper div like that : {{{


<div style="width:900px;height:500px;"> <div id="chart" class="plot" style="width:900px;height:500px;"></div> </div>


I've checked my css rules, it seems good, no overwriting anywhere.

Thanks for fixing previous bugs !


Comments (12)

  1. Anonymous

    Ok, I've isolated more precisely the bug.

    When you use my example, it's working but when you hide (by css) the wrapper div, and you show it with jQuery - like $('div#wrapper").show(); - the bug occurs (the size is wrong).

  2. Chris Leonello repo owner

    Thanks for digging into it. I believe this is what is supposed to happen. Obviously it is not the desired behavior.

    jqPlot can't get the size of it's target because it is hidden, so it is falling back on the default (400x300). I can use another method to determine the target size which should work for hidden elements.

    I'm going to set this to an enhancement, to get the size of the target even if hidden, and will check it out.

  3. Chris Leonello repo owner

    I've not found a way to reliably get the dimensions of an element which is inside a hidden element. Although you can get dimensions on a hidden element, getting dimensions on a child seems problematic.

    I had this same difficulty about 6 months ago and solved it by drawing the graph (even if with dummy data) before hiding the graphs container. Creating the plot and hiding the container took place in a document.onready call. The plot was in a tabbed interface on a tab that was not shown by default. I had no problems with this method.

    I'll put this issue on hold until I find out conclusively if there is a better solution or not.

  4. Anonymous

    i too have the same problem....i am using tabbed method using style.display property... the graph doesnot stay in the div...even if the graph is drawn before hiding the div....problem is only with IE6 ...mozilla and chrome works fine...

  5. Chris Leonello repo owner

    Looking at the code, sparkline does not actually get the dimensions of hidden elements or render plots into the hidden element. It seems they do is defer rendering of the plot until the user calls the $.sparkline_display_visible() function.

    It looks like they detect if the graph is inside a hidden element. If so, they put it into a "pending" container. When you call $.sparkline_display_visible(), they then render the graph. I think you'd have to call this manually after you show the hidden container.

    Have you used the sparkline plugin? Am I understanding the code correctly? If what I described is how it works, I could add some similar functionality. Although rendering your plot then hiding the container works as well. You can then show/hide the container at will with no additional calls.

  6. Anonymous

    This bug is probably a duplicate of #75... Anyway, I've been struggling with this same problem and there seems to be no easy fix, however -- the following code:

     // if no height or width specified, use a default.
                if (! {
                    this._height = 300;
          'height', '300px');
                else {
                    this._height =;
                if (! {
                    this._width = 400;
          'width', '400px');

    Could be changed to try and read the 300/400 values from a confg option first, and only if that is missing use the hardcoded defaults. This would allow setting size in the JS with something like:

      plot1 = $.jqplot { (.....),
         width: '500',
         height: '200',

    I believe this would be a good addition and would elegantly work-around the problem of hidden divs.

    Regards, Mihnea

  7. Chris Leonello repo owner
    • changed status to open

    That is an excellent idea! I've just added a config style option for enabling/disabling all plugins. I'll make that into a proper "config" object and add an option for this.

    Thanks for the idea!

  8. Mihnea-Costin Grigore

    Has there been any progress on this issue? If the estimated time for implementation is long, I am going to implement the option myself, however I wouldn't want to duplicate the effort if it's already done. Thanks!

  9. Chris Leonello repo owner

    Completed in 055f9ed74bad .

    There are 3 methods for specifying height and width in the case of a "hidden" (display:none) target (or target in child of hidden element). This also includes the general case where of no css height/width is provided on the target.

    The three methods are:

    1. Include a "width" and "height" option at the top level of the plot option object you pass to the jqplot constructor (this gives per plot control).
    2. Specify a custom "data-height" and "data-width" attribute on the plot target element. This gives per chart control.
    3. Override the default height/width using $.jqplot.config.defaultHeight and $.jqplot.config.defaultWidth. These are jqplot wide options and apply to all plots.

    The order of precedence of these options is as shown above. That is, 1 overrides 2 overrides 3. If jqPlot can determine the css height/width of the plot, that will take precedence over any of these supplied options.

    I've also added a sample in the "examples" directory ("hiddenPlot.html") demonstrating this capability.

  10. Log in to comment