C3: Bad chart size at first rendering

[fzgharaei]

Hi everyone,
I've put my c3 chart in an angular directive, every thing was just fine when it was only the containing chart div:

<div class="chart-panel">
       <div id="chart{{uniqueId}}"></div>
</div>

Then because of need to drill down into chart data and generating new chart I had to add back and forward buttons under the chart, chart width at first rendering gets out of hand, but it fixed when I put all the chart and buttons into a div.

Now I want to put the button on sides of the chart so I have my directive's template like this :

<div class="col-md-12 chart-panel"> 
       <div class="text-center">{{chartTitle}}</div>
       <div class="row">
            <div class="col-md-1">
                <button class="btn btn-default" id="chartBackButton" ng-click="onBackClick()" disable>
                     <i class="glyphicon glyphicon-chevron-left"></i>
                </button>
            </div>
            <div class="col-md-10">
                <div id="chart{{uniqueId}}"></div>
            </div>
            <div class="col-md-1">
                <button class="btn btn-default pull-right" id="chartForwardButton" ng-click="onForwardClick()" disable>
                     <i class="glyphicon glyphicon-chevron-right"></i>
                </button>
            </div>
        </div>
</div>

But at first rendring the width gets out of hand again. It get fixed after page resize. I want to know what happen on page resize & if I can set that in c3 chart so it would work fine from the beginning.

[simkeyur]

I am facing same problem. Found any solution yet? I think it is because of bootstrap

[SamMorrowDrums]

I have a bunch of deps. Bootstrap was one of the ones that updated, but I didn't have time yet to go through which one I'm using is breaking C3... Reverting to my previous bower config got it running again. Need to investigate further.

[simkeyur]

Hey Sam,

see this:
https://groups.google.com/forum/#!topic/c3js/xCAV_wv-UwE

[fzgharaei]

Problem solved! As I dig in c3.js function and found out that in getParentRectValue function c3 calls parent.getBoundingClientRect()[key] and look for div's parent's width value. It went down in binding tree untill reach a div with width!=0 or catch an exception(apparently needed for folks using IE)
Anyway, I logged the visited parents and It seemed that in first rendering every parent has width of zero and the function goes until it reaches biggest panel and set chart's width same as it.
so I put a setTimeout in my chart generating function and everything becomes ok.

setTimeout(function(){
      return c3.generate({...});                       
},100);

[SamMorrowDrums]

I'm not convinced this should be closed yet. I never had this problem until I upgraded other plugins (Angular.js and Bootstrap amongst others) and reverting my dependencies fixed it.

It might be the case that Angular 4.X has changed some load order stuff. But, perhaps it's not a bad idea to make the sizing async in C3 to avoid getting the size prematurely in such circumstances.

It seems weird that a library update should cause this, but I think it should be looked into, before the issue is resolved. It's not great when you update something unrelated and all the graphs break, which happened to me.

[SamMorrowDrums]

I get your point though, it is easy to fix directive. I'm guessing it probably is Angular.js's fault for doing something breaking for optimisation.

They did it with filters too.

[SamMorrowDrums]

I found my bug, it's not an async issue, it's actually selecting a different element from element.parent.height(), so disregard my previous comments. This is fine!

[scottydelta]

Facing the same issue without angular aswell. Triggering a window resize fixes it but the transition is visible.