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

User · Answer

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!)

User · Answer

You must set the height of the container explicitly   container       height 100       width 100       position absolute       See other Stackoverflow answer  Highcharts documentation

User · Answer

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   http   api highcharts com highstock chart height http   api highcharts com highstock chart events redraw

User · Answer

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

[jquery] Resize height with Highcharts

Examples related to jquery

Examples related to css

Examples related to highcharts