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:
Add dcc.Graph to html.Td
Doesn’t work, the graph is squashed into a tiny vertical line.
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:
Not only the graph is squashed but also they’re not in one line.
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).
You can do the same putting each graph into a different html.Div and styling the html.Div with:
or just applying the display style directly to each graph.
@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.
Sorry, I don’t understand your explanation, could you explain a little more or show a picture to get an idea easily?
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).
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 )