Charts don't resize at all.

[toddpratt]

I'm not sure if this is intended, but charts don't resize at all--not even when the parent container size changes. I don't see any documentation stating what is expected. This is true for the fiddle linked in the bug creation comments. (http://jsfiddle.net/gh/get/jquery/3.1.1/pablojim/highcharts-ng/tree/master/jsfiddles/basic/)

How can I get the chart to resize its width to the parent container and when window sizes change?

Highcharts 5.1.0, Angular 1.6.4, highcharts-ng 1.1.0

This happens on Edge on Windows and Chrome on Windows and Linux. On Firefox on Windows and Linux, all but the top ~5% of the chart is clipped (this also happens in the jsfiddle provided).

(I saw a lot of discussion about "reflow" hacks. That had no effect and those issues didn't describe what I'm seeing now.)

[thomasraynal]

Same issue here.
The dirty workaround :

$element.find("#mychart").highcharts();
 chart.setSize(width, height);

where #mychart is the directive id attribute.

Or you can add $watch on the directive itself for element.clientWidth and element.clientHeight:

HighChartNGController.$inject = ['$scope', '$element', '$timeout'];

function HighChartNGController($scope, $element, $timeout) {

 $scope.$watch(function() {
            return $element[0].clientWidth
        }, function() {
            ctrl.chart.setSize($element[0].clientWidth, $element[0].clientHeight);
        });

}

(The latter may need to make $scope.$digest() call somewhere...)

[joaocmfcm]

I have the same issue using bootstrap and Highcharts-ng. The chart is always 600x400 https://i.imgur.com/f5FP8iQ.png no matter the div's size

[wojtczal]

Seems that you need to include highcharts-ng.css in your project. See here

[dhodgin]

the highcharts-ng.css file also just has one css class in it. you can just paste it into your own css and it works for me without the overhead of a http load of another file for one 3 line css class.

[Zerokk]

For me, letting the "width" property in the HighCharts object, and adding this snippet to my wrapper component, works (In Angular 5, both Chrome and Firefox Quantum):

    window.addEventListener("resize", ()=> {
      document.getElementById("mychart").style.width = "100%";
    })

Where "mychart" is the ID of the div that holds your chart.

[charliegroll]

I was going to PR this repo, but it doesn't look like anyone's been supporting it in a long time. If anyone is looking for the answer, I discovered that it's because browsers (Chrome, in my testing) treat elements that they don't know about as display: inline by default. Highcharts tries to compute the size to fill from the chart container's parent, and if it's right below an angular component, that's "computed" as 0. If you manually style it to display: block or just give the component a template with a plain block element, that allows Highcharts to compute the size correctly.