Highcharts spans beyond bootstrap column width whe

Question

I have implemented an angular directive for highcharts as follows according to this highcharts blog post:

angular.module('highCharts')
    .directive('ngChart', function () {
        return {
            restrict: 'E',
            template: '<div></div>',
            scope: {
                options: '='
            },
            link: function (scope, element) {
                var chart = new Highcharts.chart(element[0], scope.options);
                $(window).resize(function () {
                    chart.reflow();
                });
            }
        }
    })

I am using this directive as follows inside following html

    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
                <div style="width:100%">
                    <ng-chart options="highchartsNG1"></ng-chart>
                </div>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
                <div style="width:100%">
                    <ng-chart options="highchartsNG2"></ng-chart>
                </div>
            </div>
        </div>
    </div>

options attribute provides a highcharts configuration object to the directive.

My problem is, when this directive is rendered in html, it does not obey the bootstrap grid it is included in. When charts are rendered, they expand outside the visible area of the window as follows, and one chart overlaps the other. Simply, charts are not responsive. I have searched through the internet and tried setting width of the container to 100% as in the html, as well as added a window resize event handler. But none of these are working. I tried with jquery and its working fine. I appreciate anyone can provide me a solution for this.

Previous References:

http://jsfiddle.net/csTzc/

Highcharts - issue about full chart width

highcharts not responsive after reflow

http://www.angulartutorial.net/2014/03/responsive-highchart.html

Answer 1

Add Element.css before the highchart data binding, add position: relative; and display: block;

.directive("pieChart", function(){

    return {
        restrict: "E",
        template: "<div></div>",
        scope:{
            title: "@",
            data: "=",
        },
        link: function(scope, element){
            element.css({display: 'block', position: 'relative'});
                        Highcharts.chart(element[0], {
             chart: {
                                            type: 'pie'
                    },
             title: {
                                            text: scope.title
                    },
             plotOptions: {
                                        pie: {
                      allowPointSelect: true,
                      cursor: 'pointer',
                      dataLabels: {
                                                enabled: true,
                        format: '<b>{point.name}</b>: {point.percentage:.2f} %'
                      }
                     }
                   },
              series: [{
                                data: scope.data,
                                name:"Percentage",
              }]
            });         
        }
    };
})

Answer 2

A simple solution would be to add position: relative; and display: block; to the ng-chart element. The reason this is happening is because the high chart element is resizing based on its closest ancestor with a layout, and the ng-chart does not have one (inspect it, it will not show any real dimensions). Also, you will need to unbind that resize event when the scope is destroyed, although you won't really need it as long as the container has a layout. Try this:

angular.module('highCharts')
.directive('ngChart', function () {
    return {
        restrict: 'E',
        scope: {
            options: '='
        },
        link: function (scope, element) {
            element.css({display: 'block', position: 'relative'}); //do this in actual css, this is just for demonstration
            new Highcharts.chart(element[0], scope.options);          
        }
    }
});

Answer 3

I finally found an answer thanks to a comment posted here. Magic trick was to add replace:true in ngChart angular directive definition as follows:

angular.module('highCharts')
.directive('ngChart', function () {
    return {
        restrict: 'E',
        template: '<div class="chart-container"><div></div></div>',
        replace: true,
        scope: {
            options: '='
        },
        link: function (scope, element) {
            var chart = new Highcharts.chart(element[0], scope.options);
            $(window).resize(function () {
                chart.reflow();
            });
        }
    }
});

When replace:true is added, given template html is replaced with highcharts content. Please look at this answer for more details.

Thanks.