jQuery UI Tabs and Highcharts display/rendering issue

Question

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 s

Answer 1

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();

Answer 2

Hi see my fiddle jsfiddle

...
$("#tabs").tabs();
var ids = ['chart-1', 'chart-2', 'chart-3'];
for (var i = 0, j = ids.length; i < j; i++) {
    if ((container = $('#'+ids[i])).size()) {
        if (container.width()==0) {
            container.width(container.actual('width'));   
        }

        oclone = $.extend({}, options);
        oclone.chart.renderTo = ids[i];
        new Highcharts.Chart(oclone);
    }

}
...

Answer 3

I ran into same problem, the reflow() method works for me. I grasp the corresponding chart by access the global Highcharts variable. Here the order of charts is order of tabs.

<script type="text/javascript">
    $(function () {
        $("#tabs").tabs({
            show: function (event, ui) {
                var chart = Highcharts.charts[ui.index];
                if (chart != null) {
                    chart.reflow();
                }
            }
        });
    });
</script>

Answer 4

You should manually trigger resize event

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

Answer 5

add class="chart" to all highcharts containers inside tabs.

add this jQuery code:

jQuery(document).on( 'shown.bs.tab', 'a[data-toggle="tab"]', function () { 
    $( '.chart' ).each(function() { 
        $(this).highcharts().reflow();
    });
})

Answer 6

Smaller workaround is using a static width for your charts (if you know what it should be) in CSS-

.tab-pane { width: 1200px; }