Highcharts: Page after canceling print doesn't resize chart

[pawelfus]

Example: http://jsfiddle.net/highcharts/erZHY/49/embedded/result/ ( in small iframe it's not possible to reproduce )
Code: http://jsfiddle.net/erZHY/4/

Steps:
1) Click print button
2) Cancel print
3) Chart isn't at full screen

Tested with chrome.

[MuralidharanKannappan]

Same Problem occurred to me also.

[TorsteinHonsi]

Confirmed in Highcharts 3.0.2.

[pawelfus]

Still doesn't work in 3.0.10

[pawelfus]

Another case: http://jsfiddle.net/Fusher/Lp2ahsbk/1/

It's probably caused by setting percentages in width/height.

[L0g1k]

I have this problem and if you manually fire the window resize event [ jQuery(window).resize() ] then the chart recalculates its size. If you modify the source of the exporting module you can fix this issue.

On like 414 of the exporting.src.js file, add jQuery(window).resize(); (just after chart.isPrinting false). You could find this file here http://code.highcharts.com/modules/exporting.src.js

[L0g1k]

In terms of a proper solution, the exporting module would need to fire that event without jQuery, or else use some alternative method of hiding the user's content such that the browser fires it by itself.

Another solution could be to allow a user call back to the print() function - then the user can call their own resize event if that's needed. That might be a handy feature anyway.

[TorsteinHonsi]

I can't reproduce any of these now with Chrome 40. Can you @pawelfus ?

[pawelfus]

Yes, my first demo with actual Highcharts: http://jsfiddle.net/erZHY/50/ (tested on W7 + Chrome 40).

[TorsteinHonsi]

Confirmed, also on the Mac.

[TorsteinHonsi]

The issue was caused by the chart being disconnected from the container, so when reflowing, the reported container width was not correct.

[houmark]

This is partly fixed for me. After cancelling the print, the window/tab with the chart is still looking correctly, but when I close that one and come back to my screen with multiple charts (6+) all the other charts gets resized to a very small width. Before that happened to all charts on the screen, including the one I was printing, now it happens to all but the one I'm printing.

[mik356ua]

Same for me. I have multiple chart widgets on a page which can be opened in modal window. After cancelling print dialog chart in modal window looks good, but when modal is closed all other charts are totally messed up!

[TorsteinHonsi]

Demo please? This one works well: http://jsfiddle.net/highcharts/qhxet49t/

[houmark]

I've been trying to recreate the issue with the provided demo, but I was unable to. But in my application, it replicates every single time. Might be something with media queries or many items, but I will try to get closer to why and also try to recreate it in a jsfiddle and update it here as soon as I can. @mik356ua if you are able to recreate it somehow, please do :)

[mik356ua]

I also did a few tries to recreate this issue applying some modifications to provided jsfiddle, but no luck. I think I'll try to find a way how to reproduce it later. As a temporary solution I'm using ability to set global options in Highcharts:

Highcharts.setOptions({
    chart: {
        events: {
            afterPrint: function () {
                Highcharts.charts.forEach(function (chart) {
                    if (chart !== undefined) {
                        chart.reflow();
                    }
                });
            }
        }
    }
});

[begizi]

I'm having the same issue with multiple charts. The chart that actually get's canceled printing gets resized correctly, but all of the other chart instances on the page get reflowed to a much smaller size.

Running:
Mac OSX 10.10.3
Google Chrome Version 42.0.2311.90 (64-bit)

Used @mik356ua's temporary solution which solved the problem for now.

[houmark]

@begizi Exactly the same for me.

And using the little brilliant workaround by @mik356ua also fixes it for me! Thanks so much for sharing that!

[mattscotty]

Hi, I'm having this issue too, @mik356ua work-around seemed to sort it but I don't understand why this bug is closed though?
Shouldn't this still be on the to-do list?

Thanks anyway

[heliobentzen]

Same problem here to multiple graphics.

[TorsteinHonsi]

@mattscotty

I don't understand why this bug is closed though?

It is because we don't have a live demonstration of a scenario that breaks. I would be grateful if you can help me with that.

@heliobentzen mentions multiple graphics. I set up this demo, http://jsfiddle.net/highcharts/erZHY/55/, but everything seems fine...

[mattscotty]

Torstein,

Thanks for the response.

Please see attached fiddle;

https://jsfiddle.net/mattscotty/x8obf84e/

It does not have to have multiple charts in my experience;

http://jsfiddle.net/mattscotty/x8obf84e/1/

Reproduction steps, Export button > Print > Cancel = Chart does not go back to its previous size.

I have reproduced with the latest highstock version and it seems to work.

http://jsfiddle.net/mattscotty/x8obf84e/2/

Any ideas where the issue lies?

Regards, Matt.

[TorsteinHonsi]

Okay, I updated Chrome and now I see it, but only with Highstock 2.1.4. With the latest version it works, which means the issue remains closed...

[mattscotty]

Torstein,

            Agreed, thanks for looking in to this.

It’s useful for anyone who finds this issue and thread.

From: Torstein Hønsi [mailto:[email protected]]
Sent: 05 August 2015 14:45
To: highslide-software/highcharts.com
Cc: mattscotty
Subject: Re: [highcharts.com] Page after canceling print doesn't resize chart (#1093)

Okay, I updated Chrome and now I see it, but only with Highstock 2.1.4. With the latest version it works, which means the issue remains closed...

—
Reply to this email directly or view it on GitHub https://github.com/highslide-software/highcharts.com/issues/1093#issuecomment-128000608 . https://github.com/notifications/beacon/ACBKov1AdBZqbC45oFX9FCm0ZDQuewOhks5okgrsgaJpZM4ADiaZ.gif

[akhileshcoder]

I did it in easier way by adding following in my script

`Highcharts.setOptions({
    chart: {
        events: {
            afterPrint: function () {
                jQuery(window).resize()
            }
        }
    }
});`

[morteza-gho]

I used this:
https://stackoverflow.com/a/32866436/2690160

But just this section ↓:

beforePrint: function () {
     this.resetParams = [this.chartWidth, this.chartHeight, false]; 
},
afterPrint: function () {
     this.setSize.apply(this, this.resetParams);
}