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:

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

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

    loading: false

Related Query

More Query from same tag