Bad chart size at first rendering

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.

[scottydelta]

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

[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!