c3js bug

Try to reproduce c3js bug:- Bars in barcharts disappear or colored black if other charts are hidden using 'display:none'

by Chetan Hanumantha

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><input class="hideChart" type="button" name="hideChart1" value="Hide Chart2" onclick="window.hideChart()"></input><div id="chart1"></div></div>
<div><input class="hideChart" type="button" name="hideChart2" value="Show Chart2" onclick="window.showChart()"></input><div id="chart2"></div></div>

JavaScript

var chart1 = c3.generate({
    bindto: '#chart1',
	data: {
        columns: [
            ['data1', 30, 20, 50, 40, 60, 50],
            ['data2', 200, 130, 90, 240, 130, 220],
            ['data3', 300, 200, 160, 400, 250, 250]
        ],
        type: 'bar',
        colors: {
            data1: '#ff0000',
            data2: '#00ff00',
            data3: '#0000ff'
        },
        color: function (color, d) {
            // d will be 'id' when called for legends
            return d.id && d.id === 'data3' ? d3.rgb(color).darker(d.value / 150) : color;
        }
    }
});

var chart2 = c3.generate({
    bindto: '#chart2',
	data: {
        columns: [
            ['data1', 30, -200, -100, 400, 150, 250],
            ['data2', -50, 150, -150, 150, -50, -150],
            ['data3', -100, 100, -40, 100, -150, -50]
        ],
        groups: [
            ['data1', 'data2']
        ],
        type: 'bar',
        labels: true
    },
    grid: {
        y: {
            lines: [{value: 0}]
        }
    }
});

window.hideChart = function(event){
    console.log('hiding chart');
    document.querySelector('#chart2').style.display = 'none';
}

window.showChart = function(event){
    console.log('showing chart');
    document.querySelector('#chart2').style.display = 'block';
}