Display multi bullet charts in two seperate rows in dash/plotly python

Question

I would like to display multi bullet charts and icons using dash and plotly in separate rows. I would like them to display something like the image below. I've already implemented the multi bullet chart on one row. I'm having trouble placing another multi bullet chart beside this one with icons because of the domain x and y positioning. Here's the code that I have so far. Once I get this I would be adding a drop down to display this information.

app = dash.Dash(__name__)
fig = go.Figure()

fig.add_trace(go.Indicator(
    mode = "number+gauge+delta", value = 180,
    delta = {'reference': 200},
    domain = {'x': [0.25, 1], 'y': [0.08, 0.25]},
    title = {'text': "SV 3"},
    gauge = {'shape': "bullet"}))

fig.add_trace(go.Indicator(
    mode = "number+gauge+delta", value = 35,
    delta = {'reference': 200},
    domain = {'x': [0.25, 1], 'y': [0.4, 0.6]},
    title = {'text': "SV 2"},
    gauge = {'shape': "bullet"}))

fig.add_trace(go.Indicator(
    mode = "number+gauge+delta", value = 220,
    delta = {'reference': 200},
    domain = {'x': [0.25, 1], 'y': [0.7, 0.9]},
    title = {'text' :"SV 1"},
    gauge= {'shape': "bullet"}))

fig.update_layout(height = 400 , margin = {'t':0, 'b':0, 'l':0})
fig.show()


app.run_server(debug=True, use_reloader=True)

Answer 1

I would recommend you to work with dash-bootstrap-components!

layout = html.Div(
    [
        dbc.Row(
            dbc.Col
                (html.Div("A single, half-width column"), width=6)),
        dbc.Row(
            [
                dbc.Col(fig, width=3),
                dbc.Col(html.Div("Some space in the middle")),
                dbc.Col(html.Div("One of your other elements"), width=3),
            ]
        ),
    ]
)