Highstocks graph width not correctly rendered

user1081236 picture user1081236 · Dec 5, 2011 · Viewed 15.3k times · Source

Hello I have a problem with highstocks when using jquery tabs.

this is the code for the constructor.

Chart = new Highcharts.StockChart({  
        Chart = new Highcharts.StockChart({
        chart: {
            renderTo: 
                'Container',
                 alignticks:false
             },
        xAxis: { .......... },
        yAxis: [{ ....... }],
        series : [{ .......... }]
    });

The Container has only half the width of the whole page.

When the page is loaded to the tab containing the graph, then its width is rendered correctly. But when the page is loaded first to another tab, then its width spans the whole width of the page, overlapping with other things on the page. So the page has to be refreshed in order to fix this.

Does anyone have a solution to this?

Answer

david picture david · Nov 4, 2013

You could also trigger the window.resize Event

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

And Highcharts should update the Chart size