Highcharts wrong size on window maximize

Question

Odd problem here. I am constructing a highchart and placing it within a bootstrap 3 carousel. When the window is in any size but 'maximized', the chart labels and data all fit the area correctly. However when maximizing the window, both axis labels and titles are moved out of the visible space. The odd thing is that this happens even if the difference in window size from non-maximized to maximized is a few pixels.

Does anyone know of a fullscreen setting for highcharts or something similar that could be causing this? My avid googling has come up with nothing.

The chart construction code is rather long, but I will copy what is necessary here. Also note, that the setSize() animations and functionality is all perfect when the window is not maximized.

// The relevant highcharts code
var chartOptions = {
                chartType: 'column',
                reportContainer: 'reportResultsContainer',
                chartContainerName: 'reportChart',
                title: 'Driver Tonnages (Total ' + totalTonsSum.formatMoney(2, false) + ')',
                //floatingTitle: true,
                //titleY: 20,
                chartName: 'Drivers',
                yaxisName: 'Tons',
                //rotateDegrees: -90,
                chartData: deliveryData,
                xAxisTitlePadding: '0px',
            };
// later on
$('#' + chartContainerName).highcharts({
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            type: chartType,
            //margin: [50.50,50,50]
        },
        title: titleObject,
        subtitle: subtitleObject,
        tooltip: {
            headerFormat: headerFormatHtml,
            pointFormat: pointFormatHtml
        },
        plotOptions: {
            column: {
                allowPointSelect: true,
                cursor: cursor,
                dataLabels: {
                    enabled: true,
                    y: rotateDegrees != 0 ? -20 : 0, // 15 pixels up from the top
                    rotation: rotateDegrees,
                    formatter: dataLabelformat,
                },
            }
        },
        xAxis: {
            type: 'category',
            title: {
                text: xaxisName,
                useHTML: true,
                style: { paddingTop: xAxisTitlePadding }
            },
            labels: {
                step: xAxisLabelStep,
            },
        },
        yAxis: {
            title: {
                text: yaxisName,
            },
        },
        legend: {
            enabled: false
        },
        series: [{
            name: xaxisName,
            type: chartType,
            colorByPoint: true,
            data: chartData,
        }, ]
    });
// the set size function, called on window resize
$('.highchart').each(function() {
    $(this).highcharts().setSize($('#carouselContent').width() - 35, $('#carouselContent').height() - 35, doAnimation=true)
});

Here are the images of the charts. The first is when the window is minimized 2px under the maximized resolution. The second is the chart when maximized. Notice that the chart size as a whole is the same. https://i.sstatic.net/tgZlt.jpg

Answer 1

I spent a long time looking at this, and finally have a solution.

In my example above, I was using the charts within a bootstrap 3 carousel. When a panel is not shown, the div holding it gets its CSS 'display' set to 'none'. Highcharts freaks out when this is the case, and doesn't format itself correctly. As a solution, I bound a handler to watch the slide event which is fired prior to the transition (slide.bs.carousel for Bootstrap), which fires a JQuery $(window).resize() event. This triggers the chart to format itself correctly, as it is after the CSS 'display' property has been reverted from 'none' to 'normal', but before the transition animation shows the chart itself.

Point of Order: some other plugins seem to dislike it when you fire a window resize() in this method (DataTable confirmed so far), and distort their content. If this happens to you, please be sure to use an 'if' clause to mask the function fire depending on the content that is about to be shown.

Sample Code:

Carousel.$Wrapper.on('slide.bs.carousel', function (evt) { onSlide(evt) });