C3 chart sizing is too big when initially loaded

After trying a variety of possibilities, I finally found a solution. It's an Angular solution, so anyone else experiencing the problem and not using Angular will need to modify it appropriately.

How I solved it was, rather than using an ng-show on the parent div, I removed that one and added exact copies of it to each sub-tag (the h2 and the h2s' siblings). Simple solution, but such a pain to figure out.

In my case, @Flanamacca's answer only partially worked. Loading the chart data with a setTimeout with delay of 0 seems to fix it.

I have found the solution relates to how it determine the full width of the element when hidden (often the case when using bootstrap tabs etc and other hidden elements).

To get around this, you need to trigger the resize event on the window to make d3 (the underlying graphing library) work out the correct sizing.

jQuery(window).trigger('resize');

You can do this on bootstrap using something akin to

jQuery('a[data-toggle=tab]').on('shown.bs.tab', function() { jQuery(window).trigger('resize'); });