toImageButton capturing whole Graph size instead of just image figure size

Dash Python
1

The main graph in my application shows a figure that includes an image and some other traces. When I use the “toImageButton” (i.e. the camera icon) to save the figure to a file, it captures the whole area of the Graph rather than just the size of the figure inside the graph.

For Graphs that contain scatter or other plots as figures, those plots are scaled to fit whatever size the Graph is but for an image it can’t necessarily fit to the graph size since you don’t want to change the aspect ratio of the image.

Is there a way to have the toImageButton only capture the extent of the figure contained in the graph? I’ve tried using the height and width parameters in the toImageButtonOptions config, both setting them to the height and width of the image or alternately setting both the height and width to None but neither of these fix the issue.

I’ve also changed the margin parameters to have zero margin but that also doesn’t address the issue.

Here’s a screenshot of the image figure within dash:

image
image1374×1192 144 KB

And here’s the resulting image after exporting it with the toImage (camera icon) tool

custom_image (22)
custom_image (22)937×720 69.7 KB

you can see the unwanted border on the left and right side.

2

Any suggestions on this? Thanks, Dave

3

Hello @DaveAZ,

Have you tried to adjust the width of the dcc.Graph itself with the 0 margins?

4

I did make several attempts at doing so by turning autoMargins off and setting zero margins for top/bottom/left/right but nothing seemed to result in the effect I need which is to just use the extent of the figure when it exports an image of the figure.

1 Like
5

No, I mean, adjusting the dcc.Graph to have the same width as the image. Not just shrinking the margins.

6

Thanks for the followup @jinnyzor,

I just tried setting the graph size with a style property of:

    responsive=False,
    style={'width': f'{width}px', 'height': f'{height}px'}

but when I inspect the graph it’s not being set to the height/width I specified.

I think one issue is that the an image figure inside the graph is scaled to fit inside the graph component and I want it to do scaling so that if I import a very large image, it doesn’t take over the whole browser window area, but I want the toImage function to work at the full resolution of the image figure as specified in the figure layout parameters. It almost works the way I want but if aspect ratio of the graph isn’t the same as the aspect ratio of the image figure then I wind up with extra space around the image on the top or bottom of the png image file.

Perhaps I need to use some other styling units than pixels (‘px’) in the above style parameter?

Dave

1 Like
7

Hmm, yeah, you would need to be able to replicate the aspect ratio I think. :slight_smile: