The chart is blank on printed page in Chromium (Ctrl+P)

[dtanp-rft]

Lightweight Charts Version: 3.7.0

Steps/code to reproduce:

• Go to demo page https://www.tradingview.com/lightweight-charts/
• Ctrl + P in Chrome to print the page
• Observe print preview

Actual behavior:

None of the chart is printed. It's blank canvas.

Expected behavior:

It should be printed

Note:

• Firefox, Safari works fine
• It seems that only little square on the bottom right is printed
• Same issue with r-click on chart canvas and save image

[timocov]

Same issue with r-click on chart canvas and save image

That's because due performance optimizations we're creating several canvases for panes/price axis/time axis. If you want to get an image of chart, please use takeScreenshot function instead.

Firefox, Safari works fine

Doesn't it mean that this is a bug in Chromium? 🤔

[dtanp-rft]

Yeah it could be a bug in Chromium. Is there a chance to fix the printing? It would be easier for us if the printing work out of the box.

[timocov]

Is there a chance to fix the printing?

@dtanp-rft Do you have any idea what it could be? I mean, it seems that Chrome just ignores canvas elements on the page (or at least some "specific" canvases)? I think you can start with filing a report to Chromium team so they will be aware of the issue and probably they might have any workaround which we can use in the library.

[dtanp-rft]

@timocov Really sorry for late response. I was on road trip last week :)

I have tried to debug in lightweight chart to see why some bit of canvas is able to print, while other parts are failed. Unfortunately, I don't think I understand enough of the code as the process of painting looks very similar ...

I was thinking that it must be a quirk on Chrome engine as well that causes the issue. However, other Canvas Chart e.g. ChartJS can print correctly ....

[timocov]

If someone wants to investigate this and create an issue in chromium - you're more than welcomed to do it (or find a workaround for the library).

[subzey]

I believe the reason is that when being printed the page is briefly switched to the media: print.

And in this mode the window.devicePixelRatio and the (resolution) media doesn't match anymore. Looks like the media reflects the printer pixel density and the window.devicePixelRatio is the screen pixel density.

The workaround could be not changing the canvas size in the fancy-canvas if the window.devicePixelRatio hasn't really changed.

[timocov]

Thanks @subzey! It seems that the first fix should be done in https://github.com/tradingview/fancy-canvas/ package. @Nipheris fyi

[keithlfs]

That PR merge is still pending as of Sept '22 😬

Would be great to be able to print charts properly, this bug affects also affects chart PDF rendering when using Puppeteersharp/Chromium.