Plotly Dash: How to add footnotes and source text to plots

Question

Below is my code:

app = dash.Dash(__name__, meta_tags=[{
      'name': 'viewport',
      'content': 'width=device-width, initial-scale=1.0'
    }])
server=app.server

tabs_styles = {'display': 'inlineBlock', 'height': 'auto', 'width': 'auto',
               'position': 'fixed', "background": "#323130", 'top': '12.5vh', 'left': '7.5vw',
               'border': 'grey', 'border-radius': '4px'}

tab_style = {
    "background": "#323130",
    'text-transform': 'uppercase',
    'color': 'white',
    'border': '#A9A9A9',
    'font-size': '10px',
    'font-weight': 600,
    'align-items': 'center',
    'justify-content': 'center',
    'border-radius': '4px',
    'padding':'6px'
}

tab_selected_style = {
    "background": "#A9A9A9",
    'text-transform': 'uppercase',
    'color': 'white',
    'font-size': '10px',
    'font-weight': 600,
    'align-items': 'center',
    'justify-content': 'center',
    'border-radius': '4px',
    'padding':'6px'
}

app.layout = html.Div([
    dcc.Tabs(id='tabs-example', value='tab-1', mobile_breakpoint=0, children=[
        dcc.Tab(label='India', value='tab-1',style=tab_style, selected_style=tab_selected_style),
        dcc.Tab(label='Ahmedabad', value='tab-2',style=tab_style, selected_style=tab_selected_style),
        dcc.Tab(label='Bengaluru', value='tab-3',style=tab_style, selected_style=tab_selected_style)
    ]),
    html.Div(id='tabs-example-content')
])

@app.callback(Output('tabs-example-content', 'children'),
              Input('tabs-example', 'value'))

def render_content(tab):
    if tab == 'tab-1':
        return html.Div([
            dcc.Graph(id='g2', figure=india)], 
            className="row", 
            style={"display": "block","margin-left": "auto","margin-right": "auto"})
    elif tab == 'tab-2':
        return html.Div([
            dcc.Graph(id='g2', figure=ahm)], 
            className="row", 
            style={"display": "block","margin-left": "auto","margin-right": "auto"})
    elif tab == 'tab-3':
        return html.Div([
            dcc.Graph(id='g2', figure=blr)], 
            className="row", 
            style={"display": "block","margin-left": "auto","margin-right": "auto"})


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

I want to include footnotes in this dashboard under each tab for each plot.

• How should I modify to achieve this?

The expected output of a plot in a tab looks something like this: a plot, and some footnotes under the plot in each tab.

Link to the dashboard of my code: https://isb-quant-index.herokuapp.com/

eg3: https://twitter.com/ShamikaRavi/status/1377893086810959872/photo/1

Answer 1

I wrote the code with the understanding that your question is about how to annotate a plotly graph but not how to do it. I customized the sample in the official reference and added the text with links.

import plotly.express as px
import plotly.graph_objects as go
import pandas as pd

df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/finance-charts-apple.csv')

fig = go.Figure(go.Scatter(x=df['Date'], y=df['AAPL.High']))

fig.update_xaxes(rangeslider_visible=True)

note = 'NYSE Trading Days After Announcement<br>Source:<a href="https://www.nytimes.com/"">The NY TIMES</a> Data: <a href="https://www.yahoofinance.com/">Yahoo! Finance</a>'
fig.add_annotation(
    showarrow=False,
    text=note,
    font=dict(size=10), 
    xref='x domain',
    x=0.5,
    yref='y domain',
    y=-0.5
    )

fig.show()