CanvasJS Chart Width Bug Until Window is Resized

Question

I've seen other people with this issue, but none that ended with a resolution. I'm building an array of charts to cycle through a carousel, and as far as the elements tab on the Chrome debugger is concerned, all widths are the same/correct. The issue is that until the window is resized, whether that be by pulling up the debugger or going in/out of fullscreen, only the active carousel item is actually 100% width.

Squished Chart

JavaScript

Html

Here is my code for resizing the width of the charts getting called on a window resize event. I attempted to add it to the document ready event, but this doesn't work. Something about the styles not loading in time. Honestly I'm stuck, and can't even find a hack to get past this.

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

I also tried adding a timeout to drawing the chart - still squishy chart.

setTimeout(GetDriverCount('bgxp'), 1500);

Here is my desired result (which occurs successfully after a resize event)

Chart 1 Squished Chart After Resize

Answer 1

VICTORY!! Here are the additions I made to end up with my desired result:

After initializing the carousel interval on document ready, I added the cycle event followed by the slide.bs.carousel event to set the height and width of my charts.

Once that was complete, I drew my charts. I also left the height and width assignments on the window resize event as this was still an issue.

$(document).ready(function () {
            $('#chart-carousel').carousel({
                interval: 4500
            });
            $('#chart-carousel').carousel('cycle');

            $('#chart-carousel').on('slide.bs.carousel', function () {
                for (var i = 0; i < charts.length; i++) {
                    charts[i].options.width = $('.carousel').width();
                    charts[i].options.height = $('.carousel').height();
                    charts[i].render();
                } 
            })

            GetDriverCount($('#companyKpi').val());
        })