I am working with a CSS grid that is 3 columns wide because that’s how the rest of the page is set up. However, I want to display two Dash plots side by side in one of the rows.
Every way I try to do this currently stacks the two plots on top of each other. It seems like everything I try to with html.Div
around the go.Bar
tags gets overridden with the Plotly positioning.
I tried adding float: left
to the div style, but it didn’t work. I guess I could redo the entire page to be 6 columns, but there has to be a better way!
Here is the function I am using to create both bar charts:
def bar_charter(id_, fig):
return Graph(
id=id_,
figure=fig,
config={
'staticPlot': True,
'format': 'svg',
'displayModeBar': False
}
)
Here is the enclosing div:
bar_charts = [
html.Div(
[bar_charter('total', total_fig), bar_charter('pct', pct_fig)],
className="spacer"
)
]
And here’s what the spacer
class looks like:
.spacer {
grid-column: 1 / -1;
margin-bottom: 5vh;
float: left;
}
Thanks!