Does not play well with ng-hide? about highcharts-ng HOT 6 CLOSED

You're right. Both ng-show and ng-hide change the visibility via display css property (display: none). But with this approach, Highcharts is unable to get the true width and height of the element.

So, now I think it's not a highcharts-ng problem, since it's a default behavior of Highcharts.

A good option to avoid this issue, can be using ngIf directive instead of ngShow or ngHide. This directive was released in AngularJS 1.1.5 and differs from the others since completely removes and recreates the element in the DOM rather than changing its visibility via css.

Same previous example with version 1.2.1 of AngularJS and using the ng-if directive: http://jsfiddle.net/Hjdnw/102/

Thanks

from highcharts-ng.

Similar issue for me. When the chart starts hidden and then is showed by an event, it assumes a default size. Only after resizing the page, the chart is updated according to window.

Simple example: http://jsfiddle.net/Hjdnw/101/
Observe the chart size when show button is clicked and after adjust the page size.

Thanks

from highcharts-ng.

I think the problem is that the chart is created and as the div is invisible highcharts can't determine the size of the div so it defaults to 600x400

Then when the div is shown the chart. The chart does not reflow. Maybe we could add a event listener into the chart which would trigger a chart.reflow(). The events could then be triggered manually.

from highcharts-ng.

@jhonnymertz have you solved this issue yet?

i'm having the same issue with DOM recreation. i don't see any graph being drawn. i'm completely stuck ):

from highcharts-ng.

There is now an event listener for triggering a reflow of the chart. I think manually triggering this should be a workaround to this issue.

from highcharts-ng.

hey @pablojim there is still an issue with chart recreation as seen in @jhonnymertz fiddle.

from highcharts-ng.