C3 chart sizing is too big when initially loaded

Question

I am using the C3 JavaScript library for the display of graph data. When my page initially loads, the graphs are hidden. It isn't until a "tab" on the page is selected that the graphs display.

The trouble I am seeing is that my first graph doesn't fit its containing div tag when first loaded. I can change the date range I'm viewing data for by clicking a button, at which time the graphs will be correctly sized.

Here is the relevant HTML that I'm using for the graphs (notice that I am using AngularJS, in case that helps/hinders things at all):

<div class="chartgrouping">

<div ng-show="showGraphSection" class="graphA">
    <h2 class="section-main-heading">Data A</h2>
    <div id="dataAChart" class="chart c3"></div>
</div>
<div ng-show="showGraphSection" class="graphB">
    <h2 class="section-main-heading">Data B</h2>
    <div class="stats">
        <div class="highest-value">Data Breakdown<span>{{percentageOfSubstance}}%</span></div>
        <div class="goals">GOAL: 20%</div>
    </div>
    <div id="dataBChart" class="c3" style="max-height: 320px; position: relative;"></div>
</div>

</div>

The initial, incorrect display (the first graph stretches the entire way across):

And the correct result after loading new data, after the first result (above) has been displayed:

Is there a good solution to this problem?

Answer 1

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'); });

Answer 2

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

Answer 3

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.

Answer 4

The jQuery(window).trigger('resize'); stuff didn't work for me. But using C3 resize ( ) function works like a boss :

var chart = c3.generate({
bindto: '#chart',
data: {
    columns: [
        ['data1', 300, 350, 300, 0, 0, 0],
        ['data2', 130, 100, 140, 200, 150, 50]
    ],
    types: {
        data1: 'area',
        data2: 'area-spline'
    }
}
});


$('.collapse').on('shown.bs.collapse', function() {//Your event listner
    chart.resize();

});

Answer 5

If you are using Foundation with multiple tabs then the following worked for me,

$('#myPanelId' ).on('toggled', function(){
        jQuery(window).trigger('resize');
 })

Where myPanelId is the panel id which contains the charts.

Answer 6

@Flanamacca's answer didn't work for me, though it was a bootstrap tab-related problem so I did use the jQuery selector they suggested.

What worked for me was the c3 flush() method, which forces the chart to redraw (see http://c3js.org/reference.html#api-flush).

$('a[data-toggle=tab]').on('shown.bs.tab', function() {
  my_c3_chart.flush();
});

Answer 7

Simply setting the CSS max-width of the div containing the chart worked for me.

Answer 8

Our situations might be different, but maybe someone with a more comprehensive understanding of how html is rendered can extrapolate from this.

my problem was that I was hiding the graph until my data was pulled in and the graph was generated with c3.generate. I was hiding the graph using css "display: none;". this was what caused the issue. once I changed my css to "opacity: 0," the issue went away.