Resizing to screen size

[ihabadly]

After updating to latest version the resizing to screen size is not working with normal bootstrap.css

Expected Behaviour

The chart in previous versions resizes according to screen size using typical bootstrap.css After latest update, it only resizes if using bootstrap-combined.css

Current Behaviour

Resizing is not working

Possible Solution

Steps to Reproduce & Link to Example

1. http://jsfiddle.net/pablojim/LnkgL135/

Context

Your Environment

• Version used:
• Browser Name and version:
• Operating System and version (desktop or mobile):
• Link to your project:

[parigi-n]

I had a lot of troubles with this too, and had to go back from 1.0 to 0.0.13 to fix it. (Angular 1.5, latest angular-bootstrap and highcharts 5.0.6)

[bsalves]

I found a solution to resolve it. I added a simple timeout to process the constructor method as late possible at line 33 of highcharts-ng.js file. This worked for me.

[jaxoserina]

Hi brunowebdev,

would you be able to share your fix, please? I've encountered exactly the same issue and wondering if there's an easy fix.

Thanks

[matewilk]

+1

[i535489]

Hi,

The problem is coming when the code change from a directive to a component.

The reflow() function of Highcharts do not work because the code is not able to get the correct width and height of HTML element <highcharts> </highcharts>. Previously the highcharts-ng directive replace the highcharts element by a div.

When Highcharts fail to detect the size, the chart is set to 600,400 even during a reflow().

@brunowebdev : I try your fix (https://github.com/pablojim/highcharts-ng/pull/552/commits/c5295f570df6e4f34f2edafe860dabfc104ea9d8) but it fail under $doCheck method because under line 51 ctrl.chart is not defined due to the timeout.

[pablojim]

Hi, I'm looking into this. There is a css fix here: http://jsfiddle.net/pablojim/LnkgL135/48/

[i535489]

@pablojim : it works for me

[ihabadly]

@pablojim : it works with me but I am stuck trying to enable animation with no luck.

[bsalves]

Nice! Try it. I was implemented this on Fuse Angular template and I have troubles to render highcharts.

On 31 Jan 2017, at 13:45, Ihab Adly notifications@github.com wrote:

@pablojim https://github.com/pablojim : it works with me but I am stuck trying to enable animation with no luck.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/pablojim/highcharts-ng/issues/550#issuecomment-276399974, or mute the thread https://github.com/notifications/unsubscribe-auth/AITtRysbVyqNAzsK7pUow8K6PsSpMMRDks5rX1cJgaJpZM4LjxAr.

[someone1]

None of the solutions here were working for me. I'm using highcharts-ng in a nested view with ui-router and angular material. I was able to get this working in my controller as follows:

function WidgetCtrl ($scope) {
        var vm = this;
        vm.highChartConfig = { ... };
        $scope.$on('$viewContentLoaded', 
            function () {
                vm.highChartConfig.getChartObj().reflow();
            }
        );
}

Kind of hacky but its working!

[pablojim]

Hi all, @houssemba has committed a fix for this that has now been merged to master. Can you have a look to see if that solves your issue?

[dmak]

I am not sure if I experience the same issue. I would like the chart to adapt to changing window width. In this example I have built two charts: the top one (vanilla Highcharts API) reacts correctly, but the bottom one has the fixed width all the time (expected that it extends/shrinks).

[houssemba]

@dmak add display:block to your highchart style or include highcharts-ng.css file

[pablojim]

@dmak http://jsfiddle.net/pablojim/2a8q4veg/ as @houssemba said!

[dmak]

@houssemba: Many thanks, it helped.