Plotly: how to write text on/above the graph

Question

In below code I just get output which is showing the text on the graph. Just want to move to the upper right corner or above the graph

from dash import Dash,html,dcc,Input, Output
import plotly.express as px
import plotly.graph_objects as go
import dash_daq as daq
app = Dash(__name__)

app.layout = html.Div([
                        html.H1('Billboard'),
                        dcc.Interval(id='input_place'),
                           
                        html.Div([dcc.Graph(id='mileage_kpi')], style={'width': '100%', 'display': 'inline-block', 'padding': '0 0'})
])

@app.callback(Output('mileage_kpi','figure'),Input('input_place','value'))
def mileage_kpi(inpu):
    fig = go.Figure(go.Indicator(
        mode = "number",
        value = df4.mileage.mean(),
        #delta = {"reference": 512, "valueformat": ".0f"},
        title = {"text": "Avg. Mileage"},
        domain = {'y': [0, 1], 'x': [0.25, 0.75]}))
    fig.add_trace(go.Scatter(
        y = df4.mileage))
    
    fig.update_layout(xaxis = {'range': [0, 68]}) # ,height=150, width=200
    return fig


if __name__ == '__main__':
    app.run_server(debug=False)

output of this is

just want to move upper right corner or above the graph on left corner of graph. How to do that? Thank you in advance.!!

Answer 1

The indicator is designed to be placed only in the current graphical range, so the domain specified by the indicator is to be changed. Also, the indicator does not support subplots, so this would be a limitation.

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.7, 1], 'x': [0.0, 0.15]}))

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]}, margin={'t':50,'b':0,'r':0,'l':0})
fig.show()