jQuery UI Tabs and Highcharts display/rendering issue

23,184

Solution 1

This is my solution (only tested in Safari and Firefox). It works great if you want to load the chart into a hidden tab on a page with flexible width. The chart resize if the browser window is resized.

In the chart settings, set the width of the chart from the tab that opens on page load (using jQuery to get the width):

   var chart = new Highcharts.Chart({
     chart: {
       renderTo: 'container',
       type: 'column',
       width: $('#tab-1').width()
     },
     ....

The following function adjusts width if the browser window is resized. 500 is the height. This is done automatically if the width is not specified in the chart options.

$(window).resize(function() {
   chart.setSize($('#chart_tab').width(),500);       
});

Solution 2

Modification needed in order to make Highcharts work in hidden jQuery tabs. By default, jQuery sets display: none to hidden tabs, but with this approach Highcharts is unable to get the true width and height of the element. So instead, we position it absolutely and move it away from the viewport.

 <style type="text/css">
.ui-tabs .ui-tabs-hide {
     position: absolute;
     top: -10000px;
     display: block !important;
}           
 </style>

adding example: http://www.highcharts.com/studies/jquery-ui-tabs.htm

Solution 3

The second chart may be off because it sounds like it is hidden when you draw it. Try to draw the chart upon selection.

Here is some pseudo code to give you an idea of what I imagine. This is not tested.

$("#tabs").tabs({
  select: function(event, ui) {
     var chart = new Highcharts.Chart({
      chart: {
       renderTo: ui.panel.id,
       // blah blah
      }
     });

  }
});

Solution 4

You should manually trigger resize event

$(window).trigger('resize');

Solution 5

The best solution is in callback function of tabs or when click on each tab, reflow highchart. Look at it:

Chart.reflow and this link jsfiddle and also this code that you have add in tab callback:

$('#chart-1').highcharts().reflow();

View more solutions

23,184

Brian

Updated on July 09, 2022

Comments

Brian almost 2 years
Anyone ever used the tabs (jquery-ui-1.8.9) and pie charts from Highcharts 2.1.4 together? To put it simply, I have multiple tabs, where each tab shows a pie chart with different data. The charts DO render to the divs, but when I click on the 2nd tab, the chart somehow shows up 300px to the right of where it's suppose to be. Whenever I zoom in or out of the browser window, the chart goes back to the correction position.

My code:

//Suppose the number tabs are generated based on variable $count, and there are 2 tabs
```
<script type="text/javascript">

var chart_tab_<?=count?>;

$(document).ready(function() {
    chart_tab_<?=count?> = new Highcharts.Chart({
      chart: {
         renderTo: 'chart_tab_<?=count?>',
         // blah blah
      }

<body>
    <div id="chart_tab_<?=count?>"></div>
</body>
```
Again, the chart renders, but on the 2nd tab the display is bugged.

Update: I know that this KIND OF fixes the problem:
```
<script type="text/javascript"> 
   $(document).ready(function() {
      $( "#tabs" ).tabs({
          cookie: { expires: 1 }
      });
      $( "#tabs" ).tabs({
          select: function(event, ui) { window.location.reload(); }
      });
   });
```
But it's really crappy because the page has to be reloaded every time a user clicks on the tab. Any ideas would be great.
Kevin over 11 years

Does this work with J-Query 1.81 or later? I can't find the class .ui-tabs-hide being used from FireBug.
Robb Vandaveer over 11 years

It doesn't appear to. In version 1.9 the tab widget appears to output an inline style display: none. I'm not yet sure how to overcome that.
gentiane over 10 years

Warning. This solution is a good idea but needs to be improved to not rebuild the chart whenever the tab is clicked.
Glycerine almost 10 years

stackoverflow.com/questions/16216722/…
Naveen over 9 years

Reflow works fine, but i have datalabels on my pie and that gets messed up because that does not get adjusted.
Ryan about 8 years

Doesn't work in 1.11. The .ui-tabs-hide class doesn't exist.