visibility: hidden not hiding the entire chart.

I have two divs which are overlappting each other. One div has chart in it.

```

```
chart2 has chart which is appended using c3.generate and chart2data has some text.
Here is the toggle function.
var ToggleDiv = function(id1, id2) {
d3.select('#'+id1) .style("opacity", "0");
d3.select('#'+id2) .style("opacity", "1");
}
This is working fine. but when I try this below function it is not hiding the entire chart. Still I can see the legends of the chart after hiding it.

var ToggleDiv = function(id1, id2) {
d3.select('#'+id1) .style("visibility", "hidden");
d3.select('#'+id2) .style("visibility", "visible");
}