Resizing issue for px.imshow figure

Dash Python
1

Hello!

So after figuring out the spacing issue for px.imshow, I implemented a heatmap plot using this figure into my Dash app. It seems to display in the app just fine, until I try to implement a resizing function.
I set the default size for each imshow graph at 1000x1000, but of course, this would need to be resized in most cases. So I added some inputs for users to resize the imshow graphs to whatever they want. However, if the size is too small, it seems that the pixels in the heatmap just disappear. And even if the image is resized to a larger set of dimensions, the pixels still don’t show and occupy only a fraction of the total image size:


Capture
Capture702×595 21.9 KB



This is the code I used to resize the image:

@app.callback(
        Output('heat-graph', 'figure'),
        [Input('heat-sizeh', 'value'),
            Input('heat-sizew', 'value')],
        State('heat-graph', 'figure'),
        background=True,
        manager=background_callback_manager, prevent_initial_call=True
    )
    def heat_resize(heat_height, heat_width, heat):
        heat['layout']['height'] = int(heat_height)
        heat['layout']['width'] = int(heat_width)
        heat['layout']['autosize'] = False
        return heat

Is there some minimum height/width for imshow that would cause the graph to break like this? Or should I be resizing the imshow graph some other way other than through update_layout?

Thank you!

2

did u remove the margin from the figure?

fig.update_layout(
        margin={"t": 0, "b": 0, "r": 0, "l": 0, "pad": 0},
    )

I had a similar problem with another figure and this solved it for me.

1 Like
3

You are a godsend, this worked perfectly!
Thank you so much!

1 Like
4

happy to help but full credit goes to @jinnyzor he answered the exact same question for me!

2 Likes
5

Reopening this thread because I’m suddenly getting a completely new issue.
The result of px.imshow is now creating the plot with large margins:

image
image1047×493 19 KB

And resizing it will make the pixels visible, but the margins will still persist. Meaning the plot isn’t taking up the full size of the image dimensions:

image
image1557×1211 22.4 KB

Here’s the code I used to create the plot, as per the previous solution:

fig9 = px.imshow(count_pivot, 
                labels=dict(x="V Gene", y="Group", color="Frequency"),
                x=count_pivot.columns, y=count_pivot.index)
fig9.update_xaxes(tickmode='linear', showgrid=False)
fig9.update_yaxes(tickmode='linear', showgrid=False)
fig9.update_layout({
    'plot_bgcolor': 'rgba(255, 255, 255, 1)',
    'paper_bgcolor': 'rgba(255, 255, 255, 1)',
})
fig9.update_layout(
    margin={"t": 0, "b": 0, "r": 0, "l": 0, "pad": 0},
)

xlim = len(count_pivot.columns.tolist())
ylim = len(count_pivot.index.tolist())

for i in range(xlim):
    fig9.add_shape(
        type='rect', xref='x', yref='y',
        x0=i-0.5, x1=i+0.5, y0=-0.5, y1=ylim-0.5, line_color='white'
    )
    
for j in range(ylim):
    fig9.add_shape(
        type='rect', xref='x', yref='y',
        x0=-0.5, x1=xlim-0.5, y0=j-0.5, y1=j+0.5, line_color='white'
    )

fig9.update_shapes(line_width=3)

I would greatly appreciate the help! The issue is that this only happens with some uploaded datasets, but works perfectly fine for others and I don’t know what triggers this.