Highstocks graph width not correctly rendered

Question

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?

Please use http://jsfiddle.net/ to demonstrate your problem. You explanation is alright but you are missing the relevant code. — Bhesh Gurung, Dec 05 '11 at 15:13
There is [`chart.reflow()`](http://api.highcharts.com/highcharts#Chart.reflow) method. — phusick, Nov 21 '14 at 08:19

score 21 · Answer 1 · answered Nov 04 '13 at 13:20

21

You could also trigger the window.resize Event

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

And Highcharts should update the Chart size

answered Nov 04 '13 at 13:20

david

344
2
5

Added this to the end of the tab .click function and it worked like a charm. – joet3ch Nov 12 '13 at 19:42
Despite newer versions having the .reflow() function, this works for older versions – Fiddles Jul 05 '17 at 15:50

score 10 · Answer 2 · edited Nov 09 '21 at 12:44

Highcharts sets the width of the chart to the width of the containing element. So if the containing element is hidden, it can't get a width.

To fix this you can set the width option when initializing your chart:

Chart = new Highcharts.StockChart({  
    Chart = new Highcharts.StockChart({
    chart: {
          renderTo: ...,
          width: <SOME WIDTH>
        },
    xAxis: { .......... },
    yAxis: [{ ....... }],
    series : [{ .......... }]
});

If you aren't able to set the chart to a proper width I've used this trick to be able to get the width of a hidden element:

jQuery: Get height of hidden element in jQuery

score 6 · Answer 3 · answered Feb 06 '13 at 04:08

I know this is a long while after you asked your question but I had a similar issue in that my charts were rendering on the client with zero width whenever the chart was on a tab that was not activated by default. This is because, as @brent indicated, highcharts uses the parent's width and, as of jQuery UI 1.9, the tab widget uses an inline style of display: none to hide the inactive tabs.

Instead of using the document ready event of jQuery to initialize your highchart, you should instead use the activate event of your the tab your chart is on. This has the added benefit of doing the snazzy chart animation each time the user clicks the tab.

Instead of:

$(document).ready(function() { 
    var chart1 = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'bar'
        },
        title: {
            text: 'Fruit Consumption'
        },
        xAxis: {
            categories: ['Apples', 'Bananas', 'Oranges']
        },
        yAxis: {
            title: {
                text: 'Fruit eaten'
            }
        },
        series: [{
            name: 'Jane',
            data: [1, 0, 4]
        }, {
            name: 'John',
            data: [5, 7, 3]
        }]
    });
});

Use:

$('#tabcontainer').on('tabsactivate', function (event, ui) { 
    var chart1 = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'bar'
        },
        title: {
            text: 'Fruit Consumption'
        },
        xAxis: {
            categories: ['Apples', 'Bananas', 'Oranges']
        },
        yAxis: {
            title: {
                text: 'Fruit eaten'
            }
        },
        series: [{
            name: 'Jane',
            data: [1, 0, 4]
        }, {
            name: 'John',
            data: [5, 7, 3]
        }]
    });
});

score 3 · Answer 4 · edited Nov 09 '21 at 12:43

3

You can set the width of the graph's container div with a percentage.

Something like this should work.

<div id = "tab1"> 
  <div id="graphContainer1" style= "width: 90%"></div>
</div>
<div id = "tab2" style = "display:none"> 
  <div id="graphContainer2" style= "width: 60%"></div>
</div>

edited Nov 09 '21 at 12:43

Nimantha

6,405
6
28
69

answered Oct 29 '12 at 08:25

Salvador P.

1,469
19
16

score 1 · Answer 5 · edited Nov 10 '21 at 00:15

1

In your style sheet replace the rule for the class selector .ui-tabs .ui-tabs-hide with

.ui-tabs .ui-tabs-hide {
    position: absolute;
    left: -10000px;
}

Solution taken from: jQuery UI - Tabs

edited Nov 10 '21 at 00:15

Dharman

30,962
25
85
135

answered Dec 26 '11 at 17:31

Ketan Modi

1,780
1
16
28

1

Thanks! Although I use Bootstrap's tabs, a modified version of this trick worked perfectly. This is what I came up with (I'm sorry for the lack of formatting): `.tab-content > .tab-pane, .pill-content > .pill-pane { display: block; position: absolute; left: -10000px; } .tab-content > .active, .pill-content > .active { position: static; left: auto; }` – piotr.d Mar 20 '14 at 14:41
@piotr.d, I just tried but preferred to set height to `0` for inactive tabs, see http://stackoverflow.com/a/23267110/537554 – ryenus Apr 24 '14 at 11:19

Highstocks graph width not correctly rendered

5 Answers5

Linked