Resize height with Highcharts

Question

I have a Highchart which resizes the width beatuifully when the window change size. But not the height. I tried this set chart size but it's not working proberly. Is there any other way to automatically change the height when window change size?

This is my css code for the output. I have a Jquery UI tab, the other tab is showing the datatable

#output-container
{
    float: right;
    display: inline;
    position: absolute;
    right: 10px; 
    left: 400px;
    top:120px;
    overflow-y: auto;
}

This is my css for the chartdiv:

#chartContainer{
    margin: auto;
}

And this is the js Chart function:

function qchart(){
    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'chartContainer',
            type: 'column',
            spacingBottom: 3,
            //height: (screen.availHeight)-500,
            marginRight: 30,
            marginBottom: 30,
            reflow: true
        },
        //etc..
    };
    //...
}

possible duplicate of [Highcharts - how to have a chart with dynamic height?](http://stackoverflow.com/questions/8809852/highcharts-how-to-have-a-chart-with-dynamic-height) — Ronan Quillevere, Nov 06 '13 at 08:15
For adjust hidden charts and on risize window [See my stackoverflow answer][1] [1]: http://stackoverflow.com/questions/16216722/highcharts-hidden-charts-dont-get-re-size-properly/25083192#25083192 — Davide, Aug 01 '14 at 20:13

score 39 · Accepted Answer · edited Jul 23 '18 at 07:53

Ricardo's answer is correct, however: sometimes you may find yourself in a situation where the container simply doesn't resize as desired as the browser window changes size, thus not allowing highcharts to resize itself.

This always works:

Set up a timed and pipelined resize event listener. Example with 500ms on jsFiddle
use chart.setSize(width, height, doAnimation = true); in your actual resize function to set the height and width dynamically
Set reflow: false in the highcharts-options and of course set height and width explicitly on creation. As we'll be doing our own resize event handling there's no need Highcharts hooks in another one.

I'm quite new to high charts and jQuery / javascript, can you give a code sample for me to follow? — newbie, Dec 27 '13 at 01:17

score 17 · Answer 2 · answered Dec 07 '12 at 18:45

17

According to the API Reference:

By default the height is calculated from the offset height of the containing element. Defaults to null.

So, you can control it's height according to the parent div using redraw event, which is called when it changes it's size.

References

answered Dec 07 '12 at 18:45

Ricardo Alvaro Lohmann

26,031
7
82
82

5

Sincerest apologies - i have just retested this and it looks if you properly resize the immediate parent container it actually works. Cannot take back my downvote (system says "vote is now locked unless the post is edited"), if you edit a line or two i'll surely take it back. – Philzen Mar 04 '13 at 05:46

score 14 · Answer 3 · edited Mar 20 '18 at 17:18

14

You must set the height of the container explicitly

#container {
    height:100%;
    width:100%;
    position:absolute; 
}

See other Stackoverflow answer

Highcharts documentation

edited Mar 20 '18 at 17:18

Icarus

1,627
7
18
32

answered Nov 06 '13 at 08:13

Ronan Quillevere

3,699
1
29
44

score 1 · Answer 4 · edited May 23 '17 at 12:26

I had a similar problem with height except my chart was inside a bootstrap modal popup, which I'm already controlling the size of with css. However, for some reason when the window was resized horizontally the height of the chart container would expand indefinitely. If you were to drag the window back and forth it would expand vertically indefinitely. I also don't like hard-coded height/width solutions.

So, if you're doing this in a modal, combine this solution with a window resize event.

// from link
$('#ChartModal').on('show.bs.modal', function() {
    $('.chart-container').css('visibility', 'hidden');
});

$('#ChartModal').on('shown.bs.modal.', function() {
    $('.chart-container').css('visibility', 'initial');
    $('#chartbox').highcharts().reflow()
    //added
    ratio = $('.chart-container').width() / $('.chart-container').height();
});

Where "ratio" becomes a height/width aspect ratio, that will you resize when the bootstrap modal resizes. This measurement is only taken when he modal is opened. I'm storing ratio as a global but that's probably not best practice.

$(window).on('resize', function() {
    //chart-container is only visible when the modal is visible.
    if ( $('.chart-container').is(':visible') ) {
        $('#chartbox').highcharts().setSize( 
            $('.chart-container').width(),
            ($('.chart-container').width() / ratio),
            doAnimation = true );
    }       
});

So with this, you can drag your screen to the side (resizing it) and your chart will maintain its aspect ratio.

Widescreen

vs smaller

(still fiddling around with vw units, so everything in the back is too small to read lol!)

Resize height with Highcharts

4 Answers4

Linked