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