title: Load a div on a click
body: <p>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 <a href="http://jsfiddle.net/arq5e1p3/" rel="nofollow">FIDDLE</a></p>
  
  <p>This is my code for the chart</p>
  
  <pre><code>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
      },
  
  
  });
  </code></pre>