C3 chart is not visible in Bootstrap grid layout

Question

I use Bootstrap 3 and bootstrap grid layout and want to render a C3 pie chart, but the C3 pie chart is not visible in a column. If I don't use bootstrap grid layout, the chart is visible.

jsfiddle

html

<div class="row">
    <div class="col-md-6" id="fst-chart">
    </div>
    <div class="col-md-6" id="snd-chart">
    </div>
</div>

javascript

var chart = c3.generate({
                bindto: '#snd-chart',
                size: {
                    width: 300
                    //height: 300
                },
                padding: {
                    top: 10,
                    left: 200
                },
                legend: {
                    position: 'right'
                },
                tooltip: {
                    format: {
                        value: function (value, ratio, id, index) { return "ratio: " + ratio + " value: " + value; }
                    }
                },
                data: {
                    // iris data from R
                    columns: [
                        ['data1', 30],
                        ['data2', 120]
                    ],
                    type : 'pie',
                    onclick: function (d, i) { console.log("onclick", d, i); }
                }
            });

            setTimeout(function () {
                chart.load({
                    columns: [
                        ["setosa", 0.2, 0.2, 0.2, 0.2, 0.2, 0.4, 0.3, 0.2, 0.2, 0.1, 0.2, 0.2, 0.1, 0.1, 0.2, 0.4, 0.4, 0.3, 0.3, 0.3, 0.2, 0.4, 0.2, 0.5, 0.2, 0.2, 0.4, 0.2, 0.2, 0.2, 0.2, 0.4, 0.1, 0.2, 0.2, 0.2, 0.2, 0.1, 0.2, 0.2, 0.3, 0.3, 0.2, 0.6, 0.4, 0.3, 0.2, 0.2, 0.2, 0.2],
                        ["versicolor", 1.4, 1.5, 1.5, 1.3, 1.5, 1.3, 1.6, 1.0, 1.3, 1.4, 1.0, 1.5, 1.0, 1.4, 1.3, 1.4, 1.5, 1.0, 1.5, 1.1, 1.8, 1.3, 1.5, 1.2, 1.3, 1.4, 1.4, 1.7, 1.5, 1.0, 1.1, 1.0, 1.2, 1.6, 1.5, 1.6, 1.5, 1.3, 1.3, 1.3, 1.2, 1.4, 1.2, 1.0, 1.3, 1.2, 1.3, 1.3, 1.1, 1.3],
                        ["virginica", 2.5, 1.9, 2.1, 1.8, 2.2, 2.1, 1.7, 1.8, 1.8, 2.5, 2.0, 1.9, 2.1, 2.0, 2.4, 2.3, 1.8, 2.2, 2.3, 1.5, 2.3, 2.0, 2.0, 1.8, 2.1, 1.8, 1.8, 1.8, 2.1, 1.6, 1.9, 2.0, 2.2, 1.5, 1.4, 2.3, 2.4, 1.8, 1.8, 2.1, 2.4, 2.3, 1.9, 2.3, 2.5, 2.3, 1.9, 2.0, 2.3, 1.8]
                    ]
                });
            }, 1500);

            setTimeout(function () {
                chart.unload({
                    ids: 'data1'
                });
                chart.unload({
                    ids: 'data2'
                });
            }, 2500);

Answer 1

Try drawing your chart to a div inside the bootstrap column.

<div class="row">
  <div class="col-md-6">
    <p>Col #1</p>
  </div>
  <div class="col-md-6">
    <div id="snd-chart">
    </div>
  </div>
</div>

(I just put placeholder text in the first column because you don't seem to be drawing that chart in this example).

https://jsfiddle.net/sco_tt/xvn1daLu/