I am trying to show a Highcharts pie chart dynamically based on if there is data to be shown, and if not, just a message to that effect:
<div id="chartDiv" class="container col-lg-4 col-sm-6 col-xs-12">
<div class="thumbnail contextthumbnail">
<div style="overflow-x:auto;">
<header><h4>Status</h4></header>
<div ng-show="currProject.numApps" id="chartPlaceholder"></div>
<div ng-show="!currProject.numApps">
There are currently no applications for this project
</div>
</div>
</div>
</div>`
This mostly works, but there's some kind of issue with how Angular is interacting with the DOM. If I don't put an ngShow inside the chartPlaceholder div, it displays correctly. When I DO, as in the code above, it makes the chart area overflow, and there's a horizontal scrollbar for the container.
In my understanding, ngShow just dynamically chooses when to display an element. Hence, the chart should be created the same way it normally gets created, but it somehow does not. When I don't use ngShow, the size of the Highcharts generated chart is 385x400. When I use ngShow, the size is 600x400.
I've tried various things such as ngIf vs ngShow, throwing an ngCloak in there, etc. I even tried creating 2 container divs and putting the ngShow on those divs (1 container div had the chartPlaceholder, the other had the "currently no applications" message), but it has the same behavior.
Update:
@michalczukm: yes, ngShow was hiding the element properly.
@Vladimir: I try to avoid absolute sizing, not sure what screen sizes I might encounter.
@Grzegorz: I had found that also, unfortunately that didn't quite help!
What worked for me: Probably not the right way to do it, but this is what I did. After the call to the function that creates the first chart (this is after Highcharts has been initialized), I added a setTimeout as follows:
setTimeout(function(){chart.reflow();}, 0);
As you can see, don't even need to wait. "But wait a minute, isn't this the same as just chart.reflow()"? You would think so, but it isn't - the line above worked, but chart.reflow() by itself did not, no matter where I put it. Maybe because setTimeout isn't guaranteed (maybe there's a couple nanosecond delay, enough that it creates the chart at the right time?)? Not sure. If anybody knows why this works or what the actual issue is, would appreciate an explanation.
