Printing chart in a div

[nsartor]

Hi all, first, thanks for the great library! The charts really look good.

I'm having an issue printing the charts within a div, specifically in Chrome. When I click print preview in chrome, the chart is blank, unless I click it a 2nd time. It has been well documented to use toBase64Image(), so I've gone that route.

However, when I do that, I get 2 charts on the page. This is only an issue in Chrome.

Please see this jsfiddle:
https://jsfiddle.net/zebfrphu/

What I'd like is to print/show 1 chart, with the 2 lines of text.

Thanks in advance!

[LeeLenaleee]

idk exactly where this weird behaviour is comming from, feeling is that it is some kind of race condition because if I print the value of a.href first it works fine, also if I pprovide myChart.toBase64Image() directly to the place where its needed it also works fine: https://jsfiddle.net/Leelenaleee/pgv3zuch/8/

[nsartor]

@LeeLenaleee thanks for the quick response. I'm seeing 2 charts in your fiddle, both in print preview and in the browser. Chome & Firefox.

Are you seeing something different?

[LeeLenaleee]

Well its printing 2 charts because you say it has to print 2 charts, if you log the divContents variable you can see it already has an img tag with the chart image as source set, after that you add another image tag with the same chart as source so thats why its duplicate

[nsartor]

@LeeLenaleee correct. So I thought I would outsmart it by moving the chart out of the printme div, and generating the img on the onClick event, but that gives the same problem where you have to hit the print button twice:
https://jsfiddle.net/1w6rex5c/
Firefox is still OK with this, Chrome isn't.

[nsartor]

I think I got it - if anyone else is having the same issue, the solution for chrome is:

setTimeout(function() { // Chrome
    a.print();
    a.close();
  }, 0);

https://jsfiddle.net/0hkyj5bx/

Thanks @LeeLenaleee for your help.