Plotly / Plotly-Dash: How to embed number+delta indicators for each legend inside a graph?

Question

I am trying to embed a number and a delta indicator underneath each legend using Plotly packages.

Here's an example of the desired result (right side of the pic):

I tried looking in the documentation of plotly.graph_objects / plotly.express and didn't find anything there.

Indicators Documentation: https://plotly.com/python/indicator/

The forth example within the Documentation attached above is close but this is not my use case:

import plotly.graph_objects as go

fig = go.Figure(go.Indicator(
    mode = "number+delta",
    value = 492,
    delta = {"reference": 512, "valueformat": ".0f"},
    title = {"text": "Users online"},
    domain = {'y': [0, 1], 'x': [0.25, 0.75]}))

fig.add_trace(go.Scatter(
    y = [325, 324, 405, 400, 424, 404, 417, 432, 419, 394, 410, 426, 413, 419, 404, 408, 401, 377, 368, 361, 356, 359, 375, 397, 394, 418, 437, 450, 430, 442, 424, 443, 420, 418, 423, 423, 426, 440, 437, 436, 447, 460, 478, 472, 450, 456, 436, 418, 429, 412, 429, 442, 464, 447, 434, 457, 474, 480, 499, 497, 480, 502, 512, 492]))

fig.update_layout(xaxis = {'range': [0, 62]})
fig.show()

I have searched our community and found nothing regards this as well.

Is this achievable?

Answer 1

You could do that using Plotly Subplots , see the code below for an example.

from plotly.subplots import make_subplots
import plotly.graph_objects as go

fig = make_subplots(rows=3, cols=2,
                    column_widths=[0.9, 0.1],
                    specs=[[{'rowspan': 3}, {'type': 'indicator'}],   # first row
                           [None,           {'type': 'indicator'}],   # second row
                           [None,           {'type': 'indicator'}]])  # third row

# first column
fig.add_trace(go.Scatter(x=[1, 2], y=[1, 2],
                         mode='lines',
                         line=dict(color='blue')),
              row=1, col=1)

fig.add_trace(go.Scatter(x=[1, 2], y=[2, 3],
                         mode='lines',
                         line=dict(color='purple')),
              row=1, col=1)

fig.add_trace(go.Scatter(x=[1, 2], y=[3, 4],
                         mode='lines',
                         line=dict(color='green')),
              row=1, col=1)

# second column
fig.add_trace(go.Indicator(mode='number+delta',
                           value=2,
                           delta={'reference': 1,
                                  'valueformat': '.0f',
                                  'increasing': {'color': 'blue'},
                                  'decreasing': {'color': 'gray'}},
                           title={'text': '28-Day'},
                           domain={'y': [0, 1], 'x': [0.25, 0.75]}),
              row=1, col=2)

fig.add_trace(go.Indicator(mode='number+delta',
                           value=3,
                           delta={'reference': 2,
                                  'valueformat': '.0f',
                                  'increasing': {'color': 'purple'},
                                  'decreasing': {'color': 'gray'}},
                           title={'text': '7-Day'},
                           domain={'y': [0, 1], 'x': [0.25, 0.75]}),
              row=2, col=2)

fig.add_trace(go.Indicator(mode='number+delta',
                           value=4,
                           delta={'reference': 3,
                                  'valueformat': '.0f',
                                  'increasing': {'color': 'green'},
                                  'decreasing': {'color': 'gray'}},
                           title={'text': '1-Day'},
                           domain={'y': [0, 1], 'x': [0.25, 0.75]}),
              row=3, col=2)

fig.update_layout(showlegend=False,
                  plot_bgcolor='white',
                  paper_bgcolor='white',
                  xaxis=dict(linecolor='gray',
                             mirror=True,
                             showgrid=False),
                  yaxis=dict(linecolor='gray',
                             mirror=True,
                             showgrid=False))

fig.show()