Why does my highchart only expand horizontally to fill its containing div, and not vertically?

Question

Fiddle

I'm using highcharts-ng. In the Fiddle above, I've created the most simple case that shows the problem I'm having - when the chart is enclosed in a div, it expands horizontally to fill it, but not vertically.

Why is this? Is there a way I can make it expand vertically as well?

SO won't let me post this without code, so here's what's in the above fiddle:

html:

<div ng-app="myapp">
<div ng-controller="myctrl">
    <div id="chartContainer" >
        <highchart id="chart1" config="chartConfig"></highchart>
    </div>
</div>

css:

#chartContainer {
background-color: #AF3456;
width:777px;
height:500px;
padding:10px;

}

JavaScript:

    //See: https://github.com/pablojim/highcharts-ng
var myapp = angular.module('myapp', ["highcharts-ng"]);

myapp.controller('myctrl', function ($scope) {

    $scope.chartConfig = {
        series: [{
            data: [10, 15, 12, 8, 7]
        }],
    }



});

Answer 1

If you don't specify a chart height in your config, highcharts will:

By default the height is calculated from the offset height of the containing element, or 400 pixels if the containing element's height is 0.

In your case your your "containing element" is <highchart id="chart1"... (not <div id="chartContainer" >) and since it's 0 height highchart uses 400 pixels.

See this updated fiddle.