Resize a chart before printing with Highcharts

Question

I have a chart without height or width.

When I click on the print button, I want to obtain a taller and larger graph. I tried setSize() but since I don't know the original size of my graph (because there is not), I can't resize it like it was before and I end up with an enormous graph. I also tried to create a copy of the chart (by changing the renderTo, width and height attributes) inside another div but didn't suceed. It's been several hours and i'm all confused.

What should i do to stretch my graph in order to print it without modifing the original one ?

Thanks for your help.

Is there a specific dimension of chart you want to print out? — srijan, Aug 29 '13 at 01:19
Your best bet will be to resize your chart first with chart.setSize(), to whatever dimension you like to print it out. Then call chart.print(). After printing resize your chart back to the old dimensions... — srijan, Aug 29 '13 at 01:29
I figured out some original dimensions. I tried this code (with and without setTimeout) but setSize seems to be ignored (print is working). `this.setSize(1550, 900); this.print(); this.setSize(350, 290);` — Grégoire Borel, Aug 29 '13 at 08:24
Crap I think I know why setSize is not working. An official developper of HighCharts said that resize event only occurs for the chart in the browser. However, print() does not take in account the previous triggered events. — Grégoire Borel, Aug 29 '13 at 08:31

score 3 · Answer 1 · answered Aug 29 '13 at 10:50

For me it works fine, take a look: http://jsfiddle.net/Fusher/6hyfk/6/

Probably you are trying to set size in wrong place, some code would be useful (jsfiddle even better).

$('#container').highcharts({
    series: [{

        data: [1, 2, 3]        
    }]
});

$("#b").click(function() {
    var chart = $('#container').highcharts();

    chart.setSize(200,500, false);
    chart.print();
    chart.setSize(600,500, false)

});

score 3 · Accepted Answer · answered Sep 09 '14 at 15:18

Pawel's Fiddle doesn't work on IE, which does the second setSize before the printing. You need to set a timeout for the size to occur after the printing.

This works fine : http://jsfiddle.net/6hyfk/34/

$('#container').highcharts({
    series: [{

        data: [1, 2, 3]        
    }]
});

$("#b").click(function() {
    var chart = $('#container').highcharts();

    chart.setSize(200,500, false);
    chart.print();
    setTimeout(function() {
        chart.setSize(600,500, false);
    }, 1000);

});

score 2 · Answer 3 · edited May 23 '17 at 10:30

In addition to Pawel's and Arthur's solutions, you can use the solution in this question to get auto-resizing functionality back.

I have needed to deal with a very similar issue (though in my case it was printing a whole page, which happened to contain a highchart, not printing a chart specifically)

I came across a variety of useful bits of info which future developers may benefit from:

Extracting current Chart size: For the purpose of resetting the chart after the printing, you can collect (and thus store for later resetting) the current size of the chart by calling chart.chartHeight or chart.chartWidth (where var chart = $('#chart-container').highcharts();)

Returning to auto-resizing after setting size: After you've called setSize() post-print, the chart will no-longer auto-size itself if the window changes. You can fix that by using the 'hack' detailed here: Is modifying chart.hasUserSize a bad idea after calling Chart.setSize()? Which involves setting chart.hasUserSize = false;

Hooking into before and after print events Is handled on this Question: Do modern browsers support onbeforeprint / onafterprint HTML events? and the answer is (indirectly) yes, but you have to use a combination of the onbeforeprint events and watchMedia eventHandler API.

Hope this is valuable to someone?

Resize a chart before printing with Highcharts

3 Answers3