JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rawgit.com/masayuki0812/c3/master/c3.js"></script>
<link rel="stylesheet" href="https://rawgit.com/masayuki0812/c3/master/c3.css">
<div id="chart"></div>
<button id="btnShowBar" style="display:none;">Show Bar Chart</button>

JavaScript

function generateBarChart() {
    return c3.generate({
        data: {
            columns: [
                ['data1', 30, 300, 140, 190, 50, 90],
                ['data2', 130, 200, 90, 300, 250, 150],
                ['data3', 90, 100, 180, 190, 150, 250]
            ],
            type: 'bar',
            groups: [['data1', 'data2', 'data3']],
            onclick: function (d, element) {
                var data = {};
                console.log(chart.data());
                chart.internal.data.targets.forEach(function (t) {
                    data[t.id] = t.values.filter(function (v) {
                        return v.index === d.index;
                    }).map(function (v) {
                        return v.value;
                    });
                });
                chart = generatePieChart(data);
                d3.select('#btnShowBar').style('display','block');
            }
        }
    });
}

function generatePieChart(data) {
    return c3.generate({
        data: {
            json: data,
            type: 'pie'
        }
    });
}

function showBarChart() {
    chart = generateBarChart();
    d3.select('#btnShowBar').style('display', 'none');
}

var chart = generateBarChart();
d3.select('#btnShowBar').on('click', showBarChart);