Column Charts within Bootstrap 4 Carousel - CanvasJS JavaScript Charts

Column Charts within Bootstrap 4 Carousel - CanvasJS JavaScript Charts

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
  
  <div id="chart-carousel" class="carousel slide" data-ride="carousel">
 
  <!-- Wrapper for slides -->
  <div class="carousel-inner">
    <div class="carousel-item active">  
      <div id="chartContainer1" class="chart" style="width:100%; height:300px;"></div>
    </div>
    <div class="carousel-item">
      <div id="chartContainer2" class="chart" style="width:100%; height:300px;"></div>
    </div>
    <div class="carousel-item">
     <div id="chartContainer3" class="chart" style="width:100%; height:300px;"></div>
    </div>
  </div>
 
 <!-- Left and right controls -->
  <a class="carousel-control-prev" href="#chart-carousel" data-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </a>
  <a class="carousel-control-next" href="#chart-carousel" data-slide="next">
    <span class="carousel-control-next-icon"></span>
  </a>
</div> <!-- Carousel -->

JavaScript

var charts = [];
var chart, width, width;

width = $('#chart-carousel').width();
height = $('#chart-carousel').height();

$('.carousel').carousel({
    interval: 2000
});

chart = new CanvasJS.Chart("chartContainer1",
{
    title:{
        text: "Column Chart 1"
    },
    width: width,
    height: 1200, 
    data: [{        
        type: "column",
        dataPoints: [
            { x: 10, y: 171 },
            { x: 20, y: 155},
            { x: 30, y: 150 },
            { x: 40, y: 165 },
            { x: 50, y: 195 },
            { x: 60, y: 168 },
            { x: 70, y: 128 },
            { x: 80, y: 134 },
            { x: 90, y: 114}
        ]
    }
    ]
});
chart.render();
charts.push(chart);

chart = new CanvasJS.Chart("chartContainer2",
{
    title:{
        text: "Column Chart 2"
    }, 
    width: width,
    height: height,
    data: [{               
    type: "column",
        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}
        ]
    }
    ]
});
chart.render();
charts.push(chart);

chart = new CanvasJS.Chart("chartContainer3",
{
    title:{
        text: "Column Chart 3"
    }, 
    width: width,
    height: height,
    data: [{               
        type: "column",
        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}
        ]
    }
    ]
});
chart.render();
charts.push(chart);

$(window).resize(function() {
    for(var i = 0; i < charts.length; i++) {
        charts[i].options.width = $('.carousel').width();
        charts[i].options.height = $('.carousel').height();
       ...