2

I have written highcharts as angular directive as below : 

var app = angular.module("myApp", []);
app.directive("hc", function() {
    return {
        restrict: 'E',
        template: '<div></div>',
        scope: {
            options: '='
        },
        link: function (scope, element) {
            scope.$watch('options', function(newVal, oldVal){
                if (newVal) { Highcharts.chart(element[0],scope.options);}
            });
        }
    };
});

But on resize of screen , highchart div is not resizing. It is always 600x400. How to dynamically resize the highchart chart?

This is how I use exactly angular directive : https://jsfiddle.net/highcharts/gwukyjhj/ But reflow function of highcharts is not applying here.

Sowmya
  • 453
  • 1
  • 5
  • 18
  • Could you provide a working JSFiddle demo where this occurs? – pawel_d Jul 28 '17 at 13:45
  • I think this topic may be helpful: https://stackoverflow.com/questions/31754511/highcharts-how-to-use-reflow-to-allow-auto-resize-after-changing-size. – pawel_d Jul 28 '17 at 13:51
  • Added example fiddle. That is how I use highcharts as angular directive. If you resize that fiddle window, you can see that highcharts reflow function is not applying. Width and height of charts are not changing. – Sowmya Jul 31 '17 at 06:25
  • Same problem. Highcharts directive has a bug, switching to the variable approach – GavinBelson Sep 23 '17 at 23:54

1 Answers1

2

I fixed the issue by converting angular element to class. Somehow if I am using directive as class instead of element high-chart re flow functionality works.

<div class="hc" id="container"></div>
Sowmya
  • 453
  • 1
  • 5
  • 18