[Solved]-Integrating Highcharts into Angular-gridster-Highcharts

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
};