Possible to create Gauge Charts side-by-side using make_subplot()?

Dash Python
1

Hi All,

I’m new to Dash and Plotly. I’m trying to make some gauge charts appear side-by-side in my layout.

A snippet of my code is as follows:

# Mercedes
fig_09_trace_01 = go.Indicator(
    domain = {'row' : 0, 'column' : 0},
    value = 0.20,
    mode = 'gauge+number+delta',
    title = {'text' : 'Mercedes'},
    delta = {'reference' : 0.62},
    gauge = {'axis' : {'range' : [None, 6]},
             'steps' : [
                 {'range' : [0, 2], 'color' : 'lightgray'},
                 {'range' : [2, 4], 'color' : 'gray'}],
             'threshold' : {'line': {'color' : 'red', 'width' : 4}, 'thickness' : 0.75, 'value': 5}})


# Ford
fig_09_trace_02 = go.Indicator(
    domain = {'row' : 0, 'column' : 1},
    value = 0.19,
    mode = 'gauge+number+delta',
    title = {'text' : 'Ford'},
    delta = {'reference' : 0.62},
    gauge = {'axis' : {'range' : [None, 6]},
             'steps' : [
                 {'range' : [0, 2], 'color' : 'lightgray'},
                 {'range' : [2, 4], 'color' : 'gray'}],
             'threshold' : {'line': {'color' : 'red', 'width' : 4}, 'thickness' : 0.75, 'value': 5}})

# BMW
fig_09_trace_03 = go.Indicator(
    domain = {'row' : 0, 'column' : 2},
    value = 0.22,
    mode = 'gauge+number+delta',
    title = {'text' : 'BMW'},
    delta = {'reference' : 0.62},
    gauge = {'axis' : {'range' : [None, 6]},
             'steps' : [
                 {'range' : [0, 2], 'color' : 'lightgray'},
                 {'range' : [2, 4], 'color' : 'gray'}],
             'threshold' : {'line': {'color' : 'red', 'width' : 4}, 'thickness' : 0.75, 'value': 5}})


fig_09 = make_subplots(
    rows=1,
    cols=3,
    subplot_titles=('Mercedes', 'Ford', 'BMW'))
fig_09.append_trace(fig_09_trace_01, 1, 1)
fig_09.append_trace(fig_09_trace_02, 1, 2)
fig_09.append_trace(fig_09_trace_03, 1, 3)

    dcc.Graph(id='dash_graph_09',
        figure = fig_09)

I get an error message saying:

ValueError: Trace type 'indicator' is not compatible with subplot type 'xy'
at grid position (1, 1)

Is it possible to position gauge charts side-by-side? Thanks in advance!

2

Yes, you can do it, you have to specify the “type” of subplot as per https://plotly.com/python/subplots/#subplots-types

3

@nicolaskruchten – thank you. I amended the code to:

fig_09 = make_subplots(
    rows=1,
    cols=3,
    specs=[[{'type' : 'xy'}, {'type' : 'xy'}, {'type' : 'xy'}]],
    subplot_titles=('Mercedes', 'Ford', 'BMW'))
fig_09.append_trace(fig_09_trace_01, row=1, col=1)
fig_09.append_trace(fig_09_trace_02, row=1, col=2)
fig_09.append_trace(fig_09_trace_03, row=1, col=3)

I received an error message indicating:

ValueError: Trace type 'indicator' is not compatible with subplot type 'xy'
at grid position (1, 1)

I believe it should be type xy for the Gauge Chart. Did I pass the correct type? (or is it a different error I’ve made?)

4

Ah actually the error message is telling you the opposite: you’ve set type xy but you’re adding an indicator trace which is incompatible. So you need to set the type to indicator :slight_smile:

5

I set the type as indicator. Here is the relevant code:

fig_09_trace_01 = go.Indicator(
    domain = {'row' : 1, 'column' : 1},
    value = 0.75,
    mode = 'gauge+number+delta',
    title = {'text' : 'Mercedes'},
    delta = {'reference' : 0.62},
    gauge = {'axis' : {'range' : [None, 6]},
             'steps' : [
                 {'range' : [0, 2], 'color' : 'lightgray'},
                 {'range' : [2, 4], 'color' : 'gray'}],
             'threshold' : {'line': {'color' : 'red', 'width' : 4}, 'thickness' : 0.75, 'value': 5}})


fig_09_trace_02 = go.Indicator(
    domain = {'row' : 1, 'column' : 2},
    value = 0.75,
    mode = 'gauge+number+delta',
    title = {'text' : 'Ford'},
    delta = {'reference' : 0.62},
    gauge = {'axis' : {'range' : [None, 6]},
             'steps' : [
                 {'range' : [0, 2], 'color' : 'lightgray'},
                 {'range' : [2, 4], 'color' : 'gray'}],
             'threshold' : {'line': {'color' : 'red', 'width' : 4}, 'thickness' : 0.75, 'value': 5}})


fig_09_trace_03 = go.Indicator(
    domain = {'row' : 1, 'column' : 3},
    value = 0.75,
    mode = 'gauge+number+delta',
    title = {'text' : 'BMW'},
    delta = {'reference' : 0.62},
    gauge = {'axis' : {'range' : [None, 6]},
             'steps' : [
                 {'range' : [0, 2], 'color' : 'lightgray'},
                 {'range' : [2, 4], 'color' : 'gray'}],
             'threshold' : {'line': {'color' : 'red', 'width' : 4}, 'thickness' : 0.75, 'value': 5}})


fig_09 = make_subplots(
    rows=1,
    cols=3,
    specs=[[{'type' : 'indictor'}, {'type' : 'indictor'}, {'type' : 'indictor'}]],
    subplot_titles=('Mercedes', 'Ford', 'BMW'))
fig_09.append_trace(fig_09_trace_01, row=1, col=1)
fig_09.append_trace(fig_09_trace_02, row=1, col=2)
fig_09.append_trace(fig_09_trace_03, row=1, col=3)


    dcc.Graph(id='dash_graph_09',
        figure = fig_09),

And, I still get this error message:

  File "C:\Users\ra\Anaconda3\lib\site-packages\plotly\subplots.py", line 1035, in _validate_coerce_subplot_type
    raise ValueError("Unsupported subplot type: {}".format(repr(orig_subplot_type)))
ValueError: Unsupported subplot type: 'indictor'

What am I doing wrong?

6

Hi,

Use the type “domain” while creating the subplots. There is no subplot type as “indicator”. Please refer https://plotly.com/python/subplots/#custom-sized-subplot-with-subplot-titles for more information.

Thanks

7

You were almost right. You omitted the “a” in “indictor”. Correct spec was “indicator”, as I’ve just used:

    fig = make_subplots(
        rows=2, cols=2,
        specs=[[{"colspan": 2, "type": "indicator"}, None],
               [{"type": "indicator"}, {"type": "indicator"}]])

    fig.add_trace(go.Indicator(mode="number",
                               value=filtered_strategy_data.total_orders,
                               title="Total Orders"),
                  row=1, col=1)
    fig.add_trace(go.Indicator(mode="delta",
                               value=filtered_strategy_data.total_buy_trades,
                               title="Total Buy Orders"),
                  row=2, col=1)
    fig.add_trace(go.Indicator(mode="delta",
                               value=filtered_strategy_data.total_buy_trades,
                               title="Total Sell Orders"),
                  row=2, col=2)
    fig.update_layout(height=300)