Chart is squished if it is initially hidden

[supersonicclay]

plunkrs

based on version 0.1.1: http://plnkr.co/edit/ncT72d?p=preview
based on version 1.0.1: http://plnkr.co/edit/mx0ANq?p=preview

Repro steps

Wrap the chart in a div that is initially hidden
Unhide that div (e.g. using ng-click and ng-show)

Expected

chart is full width

Actual

Chart is squished on the left side.

Workaround

If you trigger the window resize event manually after unhiding, the chart resizes itself properly.

window.dispatchEvent(new Event('resize'));

[supersonicclay]

May be the same cause as

http://stackoverflow.com/questions/21563609/nvd3-charts-not-rendering-correctly-in-hidden-tab

[cs-NET]

@claycephas thanks for the workaround. I decided to switch ng-show over to ng-if which also resolves the issue. Thought I would share for others looking for a quick workaround.

[EliSnow]

FYI, I was having this issue as well and discovered it was caused by ng-cloak.

[cratervale]

I am having problems making the dispatchEvent workaround function in IE11. Changing ng-show to ng-if also solves this for me. Thanks, @cs-NET

[nirsol]

Had the same problem, using ng-show/ng-hide and bootstrap tabs. Was hard to spot the problem.
Can also confirm, *ng-if * solves the issue. thanks @cs-NET
Take heed, it removes the items from the DOM.

[Moni313]

Hi, not sure this issue is still actual,
but I solved as following:
in the controller I set $scope.option.chart.width: '100vw';

and left the angular-nvd3.js as it was (see below)

Both ng-show and ng-if work.
No apply() is used to trigger twice.

// Update chart with new data
                        updateWithData: function (data){
                            if (data) {
                                // remove whole svg element with old data
                                d3.select(element[0]).select('svg').remove();

                                var h, w;

                                // Select the current element to add <svg> element and to render the chart in
                                scope.svg = d3.select(element[0]).append('svg');
                                if (h = scope.options.chart.height) {
                                    if (!isNaN(+h)) h += 'px'; //check if height is number
                                    scope.svg.attr('height', h).style({height: h});
                                }
                                if (w = scope.options.chart.width) {
                                    if (!isNaN(+w)) w += 'px'; //check if width is number
                                    scope.svg.attr('width', w).style({width: w});
                                } else {
                                    scope.svg.attr('width', '100%').style({width: '100%'});
                                }

                                scope.svg.datum(data).call(scope.chart);
                            }
                        },

[nplutt]

This is still an issue, there are many cases where ng-show simply cannot replace an ng-if.

[indexofmetals]

Another workaround that does not involve triggering a window resize event:
<nvd3 api="api" on-ready="callback">

Then, in the controller code,

$scope.callback = function(){ $scope.api.clearElement(); $scope.updateWithTimeout(0); };

Establishes the blank element in the dom and then reloads it once the width is established, so there is no wonky resizing happening.

[EpiphanyMachine]

This started happening when I upgraded from ng 1.2 to 1.3

using 1.0.8 [due to https://github.com//issues/511] and changing my ng-show to an ng-if solved this for me

[rishabhbhatia]

Hi can someone help, this is still a big pain point for me. I have 4 graphs on screen, replacing ng-show with ng-if solved some part of rendering problem. The graphs rendered correctly, but if i toggle inspect element open/close or resize the window multiple times, all graphs are shrunk & shifted to left. Can someone help me to make this work, when window resizes dynamically.

[DavidJBarnes]

Removing ng-cloak worked for me.