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. http://imgur.com/a/7b4g2

I would love to, but as I said the methods creating the charts are rather complex as the program as a whole is C# MVC with CSHTML tied in. Even if I took the hour it would take to make a jfiddle, I doubt that I could reproduce the effect since most of the code creating/running my version would need to be stripped out. I'm confident that the answer is not a botched line of code, but rather a plugin conflict or DOM setting I missed with highcharts. This is more of a theory/knowledge question than anything. — Chris
Can you check if the setSize is called if window is maximized? And is it called with proper values? There is also a Chart.reflow() that is usually helpful when chart's container is being resized. — Kacper Madej
setSize is called on $(window).resize(), so yes it is called when the window is maximized. This is the only time setSize is ever called in the code. A resize() event is triggered on chart render so that it is given the appropriate size on page load. I checked the numbers via console for when the function is called and everything is in order. Upon inspection with firebug, it would appear that the xaxis size is overflowing the chart area (which is correctly set) for some reason... IT does not appear to be included with the rest of the formatting of the chart. — Chris
After testing reflow(), it would appear that it gives the chart the correct width, but not the correct height... I will test it a bit more, but I don't think that function is the answer. — Chris

Chris Chris · Accepted Answer · 2016-05-11T15:23:18

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) });

Highcharts wrong size on window maximize

1 Answers