Graph iframe doesn't resize correctly when printing

Grafana Time Series Panel
1

I have a graph in an iframe on a page that I would like to print. But when the browser renders the layout for print the page width changes. The graph’s canvas element width is updated, but not redrawn in time.

This is what the panel looks like in the iframe in a full screen browser, spanning 100% of the page width:

image
image1465×307 45.4 KB

When attempting to print (Ctrl + P) the graph ends up looking like this, where the right edge is cut off:

image

The same type of issue occurs if I make my browser window very narrow before printing:

image

I tried setting the iframe width to a proper page width with CSS right before printing so the graph would already be drawn to the correct size, but that didn’t work quite as well as I hoped. It seems the “print width” the browser uses is wider than 8.5":

iframe {
  width: 8.5in;
}

image

Does anyone know a good way to fix this issue? I’m open to “hacky” solutions. I’m using a reverse proxy so Grafana is seen as “same origin”, which allows me to access the iframe document with JS from the parent page if needed.

2

Yo can solve this issue via CSS object-fit property:

iframe{
   object-fit:contain;
}