Does not play well with ng-hide?

[cesarandreu]

Example with issue present: http://jsfiddle.net/Cp73s/103/

If the chart starts out hidden then it defaults to 600x400. If you hit the Toggle hide button it is shown at 600x400, once you cause the chart to be redrawn (by pressing any of the other buttons) it will take up the full width. If you hide the graph and cause it to redraw then it will default to 600x400 again.

Is there any simple fix for this?

I found this in Highchart's FAQ: http://www.highcharts.com/docs/frequently-asked-questions#jquery-ui-tab, and then by looking at ngHide: http://docs.angularjs.org/api/ng.directive:ngHide They suggest changing the ng-hide class to:

.ng-hide {
    display:block!important;
    position:absolute;
    top:-9999px;
    left:-9999px;
}

However, after attempting this, it still doesn't work, and still renders initially at 600x400. :(

[jhonnymertz]

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

[pablojim]

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.

[jhonnymertz]

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

[nissoh]

@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 ):

[pablojim]

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.

[nissoh]

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