Plotly.js: Legend covers graph when saving as png

[damiarita]

I love this library and use it for a dashboard I am building for my company.

I have this issue. When I save a graph as a png, the legend covers de graph partially or totally. On the website, it looks good, though.

This is a screenshot of the graph as I see it on the website

And this is the png I get once saved:

[etpinard]

When I save a graph as a png

How are you doing that? Using the modebar button, through the plot.ly export services or something else?

[damiarita]

Hi @etpinard

Thanks for your reply

I use the save as PNG button. The one that has a photo camera on it

[etpinard]

Thanks.

In this case, this ticket is a duplicate of https://github.com/plotly/plotly.js/issues/1576 - which offers a workaround.

[damiarita]

Hi,

Thanks for your reply. I added the modeBarButtonsToRemove and modeBarButtonsToAdd to the last paramenter. But it doesn't help. I am creating a fiddle to show my case

[damiarita]

This is my Fiddle: https://jsfiddle.net/damiarita/n11h2zm6/6/

You will see that depending on how big you make the right side, you will get the correct graph when you click "Run".

However, even if the graph shows OK on the browser, it saves badly

[etpinard]

Here's a working solution: https://jsfiddle.net/n11h2zm6/7/

[damiarita]

Perfect. Thanks!

[rDuinoStar]

Here's a working solution: https://jsfiddle.net/n11h2zm6/7/

Can you reshare your solution? Thanks!