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

Issue

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):

enter image description here

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()

enter image description here
I have searched our community and found nothing regards this as well.

Is this achievable?

Solution

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()

enter image description here

Answered By – Flavia Giammarino

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published