Load a div on a click

Question

I have a chart well it is 2 donut charts. One is bigger and one is smaller. The smaller chart is placed inside the bigger chart. I was wondering if it is to load the bigger chart via click of a button. I attempted this but ran in to problems because the smaller chart's position is relative to the bigger chart's position. So i was wondering if there is some css trick that can do this? Also i am using angular js. This is my FIDDLE

This is my code for the chart

var chart = c3.generate({
    bindto: "#chart",
    data: {
        columns: [
            ['a', 30],
            ['b', 50],
        ],
        type : 'donut'

    },
       legend: {
        show: false
    },       


});


var chart = c3.generate({
    bindto: "#chart1",
       size: {
        height: 200,
        width: 450
    },
    data: {
        columns: [
            ['c', 50],
            ['d', 50],
        ],
        type : 'donut'

    },
      legend: {
        show: false
    },


});

Answer 1

Why don't you assign an opacity of 0 to the larger graph on load and use javascript to assign a opacity of 1 on click. If you feeling truly adventurous you can throw in some transitions.

.fadeIn {
   opacity: 1 !important;
   transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
    -webkit-animation-name: spinner;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: once;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: spinner;
    -moz-animation-duration: 1s;
    -moz-animation-iteration-count: once;
    -moz-animation-timing-function: linear;
    -ms-animation-name: spinner;
    -ms-animation-duration: 1s;
    -ms-animation-iteration-count: once;
    -ms-animation-timing-function: linear;
}

Here is an example of what I am talking about : jsfiddle

UPDATE: I have appended the code so you can hide and show on clicking the same button: jsfiddle

Answer 2

You can add a container and a fixed height for it (assuming your outer donut does always have the same height), check this fiddle.

HTML:

<div class="chart_container">
    <div class="chart-container">
      <div id="chart"></div>
    </div>
    <div id="chart1"></div>
</div>
<button id="button">Click me</button>

CSS

.chart_container{
    position:relative;
}
.chart-container {
    min-height: 320px;    
}
#chart1{
    position:absolute !important;
    left:50%;
    top:50%;
    transform:translate(-50%, -50%);
}

JS

document.getElementById("button").addEventListener("click", function(){
var chart = c3.generate({
    bindto: "#chart",
    data: {
        columns: [
            ['a', 30],
            ['b', 50],
        ],
        type : 'donut'

    },
       legend: {
        show: false
    },       


});

});


var chart = c3.generate({
    bindto: "#chart1",
       size: {
        height: 200,
        width: 450
    },
    data: {
        columns: [
            ['c', 50],
            ['d', 50],
        ],
        type : 'donut'

    },
      legend: {
        show: false
    },


});