Displaying chart on modal - CanvasJS JavaScript Charts

Displaying chart on modal - CanvasJS JavaScript Charts

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="modalBackground"></div>
<div id="modal">
  <div id="chartContainer2" style="height: 360px; width: 100%;"></div>  
  <button id="closeBtn">Close</button>
</div>
<button id="btn">Spline Chart</button>
<div id="chartContainer1" style="height: 360px; width: 100%;"></div>

CSS

#modalBackground, #modal {
    display: none;
    position: fixed;
}

#modalBackground {
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.25);
    z-index: 1;
}

#modal {
    width: 80%;
    top: 15%;
    left: 10%;
    background: white;
    z-index: 2;
}

JavaScript

var chartOptions = {
  title: {
    text: "Chart 1"
  },
  data: [{
    type: "spline",
    dataPoints: [
      { x: 10, y: 71 },
      { x: 20, y: 55 },
      { x: 30, y: 50 },
      { x: 40, y: 65 },
      { x: 50, y: 95 },
      { x: 60, y: 68 },
      { x: 70, y: 28 },
      { x: 80, y: 34 },
      { x: 90, y: 14 }
    ]
  }]
};

var chart1 = new CanvasJS.Chart("chartContainer1", chartOptions);
var chart2 = new CanvasJS.Chart("chartContainer2", chartOptions);
chart1.render();

$('#btn').click(function(){
  $('#modalBackground, #modal').show();
  chart2.render();
});

$('#modalBackground, #closeBtn').click(function(){
  $('#modalBackground, #modal').hide();
});