Integrating Highcharts into Angular-gridster

Question

I'm trying to integrate Highharts using the highcharts-ng Angular directive inside Angular-grister (a dashboard/widget Angular directive).

Here is my HTML:

<div ng-controller="myCtrl">
    <div gridster="gridsterOptions">
        <ul>
            <li gridster-item="item" ng-repeat="item in standardItems">
                <highchart id="chart1" config="chartConfig" class="chart"></highchart>
            </li>
        </ul>
    </div>
</div>

My CSS styling:

body {
    color: #858584;
    background-color: #e0e0e0;
}
.gridster .gridster-item {
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    color: #004756;
    background: #ffffff;
    padding: 10px;
}
.chart {
    border:1px #000 solid;
}

And my Angular app:

var myApp = angular.module('myApp', ['gridster', 'highcharts-ng']);

myApp.controller('myCtrl', function ($scope) {
    $scope.gridsterOptions = {
        margins: [20, 20],
        columns: 4,
        rowHeight: 300,
        pushing: true,
        floating: true,
        swapping: true,
        resizable: {
            enabled: true
        },
        draggable: {
            enabled: true
        }
    };

    $scope.standardItems = [{
        sizeX: 2,
        sizeY: 1
    }, {
        sizeX: 2,
        sizeY: 1
    }];

    $scope.chartConfig = {
        options: {
            chart: {
                type: 'bar'
            }
        },
        series: [{
            data: [10, 15]
        }],
        title: {
            text: 'Hello'
        },

        loading: false
    };
});

It results in something like this with the widgets in the gridster dashboard:

There is two issues regarding responsive layout:

1. The height of the Highchart components is always 400 px. They are located inside the dashboard widget and should have the same height as the widget. Currently they are higher then their dashboard widget and their content is overflowing.
2. When rendering, the Highcharts components is wider then their container. If I resize the window they are repainted and width is now correct.

How can I fix these issues?

See my demo example on JSFiddle: http://jsfiddle.net/dennismadsen/xxy2uy9x/

Answer 1

I think this is duplicate of this one or this one question. Or at least the answer is very similar.

In short: when chart is rendered, width and height for the container are undefined or 0 (container is not part of the DOM or is hidden by display: none), which results in default width and height for the chart.

Workaround is to give browser (and angular) a breath and in setTimeout (or $timeout) call chart.reflow() to allow the chart to adapt to the container, see: http://jsfiddle.net/xxy2uy9x/5/

$scope.chartConfig = {
    options: {
        chart: {
            type: 'bar',
            events: {
                load: function() {
                    var c = this;

                    setTimeout(function() {
                        c.reflow();
                    }, 123)
                }
            }
        }
    },
    series: [{
        data: [10, 15]
    }],
    title: {
        text: 'Hello'
    },

    loading: false
};