Cannot render images generated by plotly

[bondeanikets]

My div (which corresponds the id 'Usage') consists of plotly-generated images along with some text. The text before the image is present in the pdf generated, but the images and the later text is absent. Tried {embedLocalImages: 'true'} as well, but in vain. Please suggest a solution.

Thanks

[kbrown01]

Can you create a fiddle please? It is hard to speculate without seeing the sample

[kbrown01]

I did create a simple ploty plot and while things do print, I do see issues that may have to do with svg's inside svg's (plotly uses this extensively).

See https://jsfiddle.net/c1kt3r82/220/

[bondeanikets]

Thanks for the fiddle. So, is there any solution that you can suggest?

[kbrown01]

Yes. I extracted the SVG from the page and that formats. Good news. So I tracked backwards to see what is happening and I know what is wrong, how to fix it will take some thought.

The software works by creating a hidden div in the page and then scrapes the HTML DOM and puts it into that div and grabs the results and sends to the formatter. It has to operate this way because all CSS needs to be resolved.

When that happens, something in the plotly SVG that is embedded in the other SVG returns a width/height of 0. Here is a side by side comparsion:

What you would have to do is to remove them or replace them with the correct width. I stopped the process and fix the width/height and it works: