Search code examples
angularjsangularjs-directivehighchartshighcharts-ng

Highcharts spans beyond bootstrap column width when implemented as an angular directive

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.

enter image description here

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

Solution

  • 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.