Legend cut off when downloading png

Dash Python
1

I’m finding that if I download a png image of a plot on my dash app it cuts off the legend if its a bit longer than normal (see image).
It renders fine on the app but when I click the download plot as png the problem occurs.
I’ve tried playing around with the legend location and the margin of the plot but it makes no difference, even if the legend is in the middle of the plotting area I still get the same problem.

newplot (1)
newplot (1)1012×450 70.1 KB

Any help of what I can try would be very appreciated!

2

Hi @dig, probably your problem is the same as Save plot as png; sizing and positioning (see the last post, you need to set the config of your dcc.Graph

config = {"toImageButtonOptions": {"width": None, "height": None}}
dcc.Graph(figure=..., config=config)

)

3

I’ve set that and there same problem still occurs - I’ve also tried explicitly setting a height and width to see if I could make the plot big enough but the same problem still occurs.
I’ve got round this for now by just having shorter labels in the legend but not sure thats a long term solution

4

ok… if you post here a minimal standalone app (with dummy data) reproducing the problem I can take a look.

5

I can’t seem to recreate the problem with a simple example. Do you think this could be something to do with my CSS layout? The plots are in divs which I’ve made set sizes and I wonder if that could affect the image? Although I would have thought that would just change the rendering on the browser.

I also had the attribute ‘scale’ in the ‘toImageButtonOptions’ set to ‘scale’:2. I’ve played around with that but it doesn’t seem to change the legend either.

6

@dig Did you ever find a solution to this? I’m having the same issue with svg exports.

7

Hi @dig , @bigmike , I’m seeing the same issue but wonder similarly if my CSS is having some effect here. Did either of you come up with anything?

Thanks,

Stu

8

Still no solution to this issue on my end.

9

Thanks for the update; I might try and raise again elsewhere.

10

Hi @dig , @bigmike, this is possibly ancient history for you both now, but I eventually found a workaround to this issue from another forum and I wanted so share it in case is is useful: simply pad your legend string with sufficient trailing spaces and it should display the full text. Admittedly, not an elegant solution but it is good enough for what I need, plus I couldn’t afford the time to figure out what elements on my page were causing Plotly issues in my case.

1 Like
11

I’ll take it for now! Thanks for following up

12

I have no idea if this is still on anyones radar…but I’m having the same issue except with axis text. I have a horizontal bar graph where some of the axis text is being cut off. Adding axis titles or anything else doesn’t seem to help at all.

13

For anyone else stumbling across this in the future - I was able to fix this for our application by changing and specifying the font - I used a monospaced font in our case. Hope it helps someone else one day.

something like this:

        legend={
            "font": {
                "family": "Courier New, monospace",
                "size": 12,
                "color": "black"
            },

Thanks to everyone else here who posted - you helped me to find the solution.

1 Like