0

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.

enter image description here

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)
alphanumEric
  • 89
  • 8

1 Answers1

0

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),
            ]
        ),
    ]
)
Lukas Kaspras
  • 409
  • 1
  • 5
  • 15
  • Thank you for your response. I actually looked into trying the dash-bootstrap-components and I ran into an issue with the layout. For some reason the layout components are going underneath each other and not side by side. I just posted my question about. If you could look at it would be helpfulf. https://stackoverflow.com/questions/69228099/my-layout-of-my-dbc-row-dash-bootstrap-isnt-displaying-side-by-side – alphanumEric Sep 17 '21 at 18:36