C3 chart show/hide

Test show & hide option

HTML

<link rel="stylesheet" href="http://c3js.org/css/c3-e07e76d4.css">
<script src="http://c3js.org/js/c3.min-78d63552.js"></script>
<script src="http://c3js.org/js/d3.min-3bff8220.js"></script>
Refresh page before each button click
<br/>
<input type="button" id="A" value="Unload all then load new"></input>
<input type="button" id="B" value="Load new then unload"></input>

<br />
<div id="chart"></div>

JavaScript

var chart = c3.generate({
    bindto: '#chart',
    data: {
        columns: [
            ['Country 1', 6, 5.95, 6.69, 7.47, 3.53, 0.92, 7.21, 4.02, 3.97, 4.18, 4.27],
            ['Country 2', 7.45, 7.31, 8.69, 8.74, 5.7, -6.15, 4.4, 4.67, 3.8, 2.02, 3.04],
            ['Country 3', 3.82, 3.06, 2.56, 4.43, 2.2, 1.23, 2.53, 2.4, 3.53, 2.62, 2.58]
        ],
        type: 'bar'
    },
});

$('#A').on('click', function () {

    chart.load({
        columns: [
            ['data1', 130, 120, 150, 140, 160, 150],
            ['data4', 30, 20, 50, 40, 60, 50],
        ],
            unload: chart.columns,
    });
});
            
$('#B').on('click', function () {
    chart.load({
        columns: [
            ['data1', 130, 120, 150, 140, 160, 150],
            ['data4', 30, 20, 50, 40, 60, 50],
        ],
        unload: chart.columns,
    });
});