Redraw/Resize highcharts when printing website

Question

When I\'m printing the bottom right frame the text some text is partly covered by the highcharts because they don\'t resize before printing. Is there a solution to

Answer 1

Using listener that will trigger reflow for a chart and media queries in CSS chart should be printed in set size when printing a website.

JS:

$(function () {
    Highcharts.setOptions({ // Apply to all charts
        chart: {
            events: {
                beforePrint: function () {
                    this.oldhasUserSize = this.hasUserSize;
                    this.resetParams = [this.chartWidth, this.chartHeight, false];
                    this.setSize(600, 400, false);
                },
                afterPrint: function () {
                    this.setSize.apply(this, this.resetParams);
                    this.hasUserSize = this.oldhasUserSize;
                }
            }
        }
    });

    $('#container').highcharts({
        title: {
            text: 'Rescale to print'
        },
        subtitle: {
            text: 'Click the context menu and choose "Print chart".
The chart size is set to 600x400 and restored after print.'
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
        }]
    });

    var printUpdate = function () {
        $('#container').highcharts().reflow();
    };

    if (window.matchMedia) {
        var mediaQueryList = window.matchMedia('print');
        mediaQueryList.addListener(function (mql) {
            printUpdate();
        });
    }
});

CSS:

@page {
    size: A4;
    margin: 0;
}
@media print {
    html, body {
        padding:0px;
        margin:0px;
        width: 210mm;
        height: 297mm;
    }
    #container {
        float:left;
        padding: 0px;
        margin: 0px;
        width: 80%;
    }
}

HTML:

JSFiddle: http://jsfiddle.net/w4ro5xb7/13/

Test in full screen result for better effect: http://jsfiddle.net/w4ro5xb7/13/show/