Adding graph within a table

Dash Python
1

Hi. New to dash and looking for a answer to the current problem I am facing.

I want to display a bunch of images (let’s say 5) and a graph in the same line or row.

I have tried two different things:

  1. Add dcc.Graph to html.Td
    Doesn’t work, the graph is squashed into a tiny vertical line.

  2. Try the answer here
    Instead of using ‘three columns’ and ‘five columns’, I use ‘two columns’ (Because I am testing it on one image and a graph).

Output Looks like this:

image
image391×614 27.5 KB

Not only the graph is squashed but also they’re not in one line.

2

I figured out something similar to what I wanted.

Use html.Table and keep adding columns to each row.

When you add the graph, make sure to resize it. (I am using figure.layout.autosize = True).

Result:

image
image1345×505 39.2 KB

3

Hi @ninja

You can do the same putting each graph into a different html.Div and styling the html.Div with:

style={'display': 'inline-block'}

or just applying the display style directly to each graph.

1 Like
4

@Eduardo Thank you for replying. I think html.Div would make the code simpler as compared to what I did.

Could you also help me in resizing the graph, when I use the same size as the images (i.e. 160 x 160), the graph isn’t scaled down, in fact it gets cut down, the axes become smaller.

The width can be of variable length, but I want the height to be consistent with the images in the preceding columns.

5

@ninja

Sorry, I don’t understand your explanation, could you explain a little more or show a picture to get an idea easily?

6

you see how the four images adjacent to the graph have the same size? I want the graph to have the same height as those. (resizing the graph breaks it, i.e. the y-axis collapses).

7

You can style each html.Div using ‘margin’, ‘margin-top’ or ‘padding’ or ‘height’, or just using the dcc.Graph margings. (I sill not sure I understand your issue :woozy_face:)